This is a migrated thread and some comments may be shown as answers.

RadDatePicker -- Only Enable Special Dates

6 Answers 566 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 12 Dec 2012, 09:25 PM
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

6 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 13 Dec 2012, 06:11 AM
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.
0
Matt
Top achievements
Rank 1
answered on 30 Jan 2013, 04:44 PM
Thanks, that reference helped a lot.
0
Matt
Top achievements
Rank 1
answered on 30 Jan 2013, 08:07 PM
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.
0
Vasil
Telerik team
answered on 04 Feb 2013, 07:49 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Matt
Top achievements
Rank 1
answered on 07 Feb 2013, 04:55 PM
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>
0
Vasil
Telerik team
answered on 08 Feb 2013, 09:27 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Calendar
Asked by
Matt
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Matt
Top achievements
Rank 1
Vasil
Telerik team
Share this question
or