I have in my database days, which are not buisness dates(sundays, holidays).
I want to mark this days in red, in the date picker.
I would like to do it, on client side, with javascript.
the following post http://forums.infragistics.com/forums/t/45550.aspx
shows how to do it in webdatechooser.
But I understand, that webdatechooser is obsolete.
I dont have it it my toolbox.
How to do the same thing in webdatepicker?
Hello drpoalim,Please take a look at the attached from me sample. It uses a calendar and adds custom days to this calendar. Hope the sample helps you to achieve the design you are looking for.
I want to add the days, on client side, using javascript, and not hard coded,
since they change.
Can you please show a code for it..
Hello drpoalim,Yes this is possible but if you add the rows via javascript they will not be available on the server on postback. I have modified the sample to add 11 November 2012 as a custom day via javascript. You have to create a new javascript object and set its properties which are relative to a day and then push this day in the custom days collection. If you have more than one ( which is most likely your scenario) please itterate in order to add all. If you have many custom days please consider to add them only when necessary in order to improve the performance.
I need to load new values, when the user change a month.
Is there MonthChanged event on the client side?
I've found it on visiblemonthchanging, on the monthcalendar.
I load the custom days,
The values are are being loaded to the customdate, but it seems that
the month gets changed before the customdates are being applied with the right style.
So for example, if I move from november to December, the user wont see the customdates, only when they reopen the calendar,
will they see the change.
Here is an example
<title></title> <style type="text/css"> .Red { background-color: Red !important; } </style> <script type="text/javascript" id="igClientScript"> <!-- function WebDatePicker1_CalendarOpening() { ///<summary> /// ///</summary> ///<param name="sender" type="Infragistics.Web.UI.WebDatePicker"></param> ///<param name="eventArgs" type="Infragistics.Web.UI.CancelEventArgs"></param> var customDays = ig_controls.WebMonthCalendar1.get_customDays(); var obj = ig_controls.WebMonthCalendar1.get_visibleMonth(); var year = obj.getYear(); var month = obj.getMonth(); var newCD = new Object(); newCD.css = "Red"; newCD.day = 1; newCD.month = month+1; newCD.year = year; newCD.text = ""; newCD.disable = false; newCD.dow = -1; customDays.push(newCD); //Add code to handle your event here. } // --> </script> </head> <body> <form id="form1" runat="server"> <ig:WebScriptManager ID="WebScriptManager1" runat="server"> </ig:WebScriptManager> <ig:WebDatePicker ID="WebDatePicker1" runat="server" DropDownCalendarID="WebMonthCalendar1"> </ig:WebDatePicker> <ig:WebMonthCalendar ID="WebMonthCalendar1" runat="server" > <ClientEvents VisibleMonthChanged ="WebDatePicker1_CalendarOpening" /> <CustomDays> <ig:CalendarCustomDay CssClass="Red" Day="1" Month="1" Year="1990" /> </CustomDays> </ig:WebMonthCalendar> <br /> </form> </body> </html>
Hello drpoalim,Indeed there is a delay in applying the css styles. I would advice you to take a different approach and handle the render day event which is fired only for the days which are visible at the curren month(about 30 + a few days from the previous/next month ) and directly apply a coloring css to them like:<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.Red
{
background-color: Red !important;
}
</style>
<script type="text/javascript" id="igClientScript">
<!--
function WebMonthCalendar1_RenderDay(sender, eventArgs)
///<summary>
///
///</summary>
///<param name="sender" type="Infragistics.Web.UI.WebMonthCalendar"></param>
///<param name="eventArgs" type="Infragistics.Web.UI.CalendarRenderDayEventArgs"></param>
if((eventArgs.get_day().day == 3) || (eventArgs.get_day().day == 13))
eventArgs.get_day().css = "Red";
alert(eventArgs.get_day().day + " " + eventArgs.get_day().month + " " + eventArgs.get_day().year);
//Add code to handle your event here.
// -->
</script>
</head>
<body>
<form id="form1" runat="server">
<ig:WebScriptManager ID="WebScriptManager1" runat="server">
</ig:WebScriptManager>
<ig:WebDatePicker ID="WebDatePicker1" runat="server" DropDownCalendarID="WebMonthCalendar1">
</ig:WebDatePicker>
<ig:WebMonthCalendar ID="WebMonthCalendar1" runat="server">
<ClientEvents VisibleMonthChanging="WebDatePicker1_VisibleMonthChanging" RenderDay="WebMonthCalendar1_RenderDay"
/>
<CustomDays>
<ig:CalendarCustomDay CssClass="Red" Day="1" Month="1" Year="1990" />
</CustomDays>
</ig:WebMonthCalendar>
<br />
</form>
</body>
</html>
Please let me know if this suggestion helps you to achieve your goals.
He
Hello drpolarim,Please let me know if my latest suggestion was helpfull to you.
Seems promising.