RadDatePicker -- Only Enable Special Dates

[Matt]

I am having problems with the RadDatePicker.

We have a situation where the calendar should ONLY allow selection of dates that are in our special date list.  How do you go about disabling all other dates in the control?

A VB code example would be greatly appreciated.

Thanks,

Matt

[Princy]

Hi Matt,

Following is the sample code that I tried to enable only the special day in the RadCalendar.

ASPX:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
    <Calendar runat="server" ClientEvents-OnDayRender="OnDayRender">
    </Calendar>
</telerik:RadDatePicker>

JS:

<script type="text/javascript">
    function OnDayRender(sender, args) {
        var specialday = new Date(2013, 00, 23);
        if (Date.parse(specialday) != Date.parse(args.get_date())) {
            args.get_cell().className = "rcOutOfRange";
            args.get_cell().innerHTML = "<span>" + args.get_date()[2] + "</span>";
            args.get_cell().DayId = "";
        }
    }
</script>

VB:

Dim specialday As DateTime = New DateTime(2013, 1, 23)

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
       AddHandler RadDatePicker1.Calendar.DayRender, AddressOf Me.Calendar_DayRender
End Sub

Private Sub Calendar_DayRender(ByVal sender As Object, ByVal e As Telerik.Web.UI.Calendar.DayRenderEventArgs)
        If (e.Day.Date <> specialday) Then
            Dim calendarDay As RadCalendarDay = New RadCalendarDay
            calendarDay.Date = e.Day.Date
            calendarDay.IsSelectable = false
            calendarDay.ItemStyle.CssClass = "rcOutOfRange"
            RadDatePicker1.Calendar.SpecialDays.Add(calendarDay)
        End If
End Sub

Please take a look into this code library.

Hope this helps.

Regards,
Princy.

[Matt]

Thanks, that reference helped a lot.

[Matt]

Well, after further review, it appears that if you have a date you wish to disable/enable that is not on the current month, the Calendar_DayRender does not fire for the VB code.

[Vasil]

Hi Matt,

This is because only the current view is rendered ServerSide. Then if you navigate the calendar to another view it is created using JavaScript on ClientSide. You can do some more calculation on the OnDayRender JavaScript event.


All the best,
Vasil
the Telerik team

[Matt]

I cannot get the javascript OnDayRender event to fire in IE or Safari.  It only seems to work in Firefox or Chrome.  Any ideas on why?

<script type="text/javascript">
function OnDayRender(sender, args) {
var jsDate = new Date(args.get_date()[0], args.get_date()[1] - 1, args.get_date()[2]);
var specialday0 = new Date(2013, 1, 8);
var specialday1 = new Date(2013, 1, 11);
var specialday2 = new Date(2013, 1, 12);
var specialday3 = new Date(2013, 1, 13);
var specialday4 = new Date(2013, 1, 14);
var specialday5 = new Date(2013, 1, 15);
var specialday6 = new Date(2013, 1, 18);
var specialday7 = new Date(2013, 1, 19);
var specialday8 = new Date(2013, 1, 20);
var specialday9 = new Date(2013, 1, 21);
var specialday10 = new Date(2013, 1, 22);
var specialday11 = new Date(2013, 1, 25);
var specialday12 = new Date(2013, 1, 26);
var specialday13 = new Date(2013, 1, 27);
if (Date.parse(specialday0) == Date.parse(args.get_date())) { }
else if (Date.parse(specialday1) == Date.parse(args.get_date())) { }
else if (Date.parse(specialday2) == Date.parse(args.get_date())) { }
else if (Date.parse(specialday3) == Date.parse(args.get_date())) { }
else if (Date.parse(specialday4) == Date.parse(args.get_date())) { }
else if (Date.parse(specialday5) == Date.parse(args.get_date())) { }
else if (Date.parse(specialday6) == Date.parse(args.get_date())) { }
else if (Date.parse(specialday7) == Date.parse(args.get_date())) { }
else if (Date.parse(specialday8) == Date.parse(args.get_date())) { }
else if (Date.parse(specialday9) == Date.parse(args.get_date())) { }
else if (Date.parse(specialday10) == Date.parse(args.get_date())) { }
else if (Date.parse(specialday11) == Date.parse(args.get_date())) { }
else if (Date.parse(specialday12) == Date.parse(args.get_date())) { }
else if (Date.parse(specialday13) == Date.parse(args.get_date())) { }
else {
args.get_cell().className = "rcOutOfRange";
args.get_cell().innerHTML = "<span>" + args.get_date()[2] + "</span>";
args.get_cell().DayId = "";
return;
}
}
</script>


<telerik:RadDatePicker ID="requestdate" runat="server" Culture="en-US"
                 EnableTyping="False" Skin="Default2006" FocusedDate="2013-01-01"
                 MinDate="2013-01-01">
                <Calendar runat="server" OnDayRender="Calendar_OnDayRender" Skin="Default2006"
                    ShowRowHeaders="False" >
                    <ClientEvents OnDayRender="OnDayRender" />
                </Calendar>
                <DateInput runat="server" ReadOnly="True">
                    <ReadOnlyStyle BackColor="White" />
                </DateInput>

<DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
            </telerik:RadDatePicker>

[Vasil]

Hello Matt,

I have just tested your code inside IE and Safari and it works without any problem. Check the rest of your JavaScript in the page if it does not cause some exception.

Kind regards,
Vasil
the Telerik team