RadDatePicker -- Only Enable Special Dates

7 posts, 0 answers
  1. Matt
    Matt avatar
    31 posts
    Member since:
    Jan 2008

    Posted 12 Dec 2012 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Dec 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Matt
    Matt avatar
    31 posts
    Member since:
    Jan 2008

    Posted 30 Jan 2013 Link to this post

    Thanks, that reference helped a lot.
  5. Matt
    Matt avatar
    31 posts
    Member since:
    Jan 2008

    Posted 30 Jan 2013 Link to this post

    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.
  6. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 04 Feb 2013 Link to this post

    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.
  7. Matt
    Matt avatar
    31 posts
    Member since:
    Jan 2008

    Posted 07 Feb 2013 Link to this post

    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>
  8. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 08 Feb 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017