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..
Seems promising.
Hello drpolarim,Please let me know if my latest suggestion was helpfull to you.
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
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>
I need to load new values, when the user change a month.
Is there MonthChanged event on the client side?