Limit to Weekend only in RadDatepicker/Calendar

7 posts, 0 answers
  1. Saqib
    Saqib avatar
    24 posts
    Member since:
    Jan 2014

    Posted 20 Mar 2014 Link to this post

    Hi,
    What is the property or how I can show the calendar so that users can only select a specific day. Example: Only Saturday.

    Thanks,
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 Mar 2014 in reply to Saqib Link to this post

    Hi Saqib,

    Please try the following sample code snippet to achieve your scenario.

    ASPX:
    <telerik:RadCalendar ID="RadCalendar1" runat="server" ClientEvents-OnDateSelecting="OnDateSelecting">
    </telerik:RadCalendar>

    JavaScript:
    <script type="text/javascript">
        function OnDateSelecting(sender, args) {
            var date = new Date(args.get_renderDay().DomElement.title);
            if (date.getDay() != 6) {
                args.set_cancel(true);
            }
        }
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Saqib
    Saqib avatar
    24 posts
    Member since:
    Jan 2014

    Posted 21 Mar 2014 in reply to Shinu Link to this post

    Can I use this function / property with <telerik:RadDatePicker>?
  5. Saqib
    Saqib avatar
    24 posts
    Member since:
    Jan 2014

    Posted 21 Mar 2014 in reply to Saqib Link to this post

    I m using RadDatePicker control and what I want that I want user to Select only Saturday/Sunday or just Sunday only in some cases.
    The weekdays should appear as disabled except weekends.
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 24 Mar 2014 in reply to Saqib Link to this post

    Hi Saqib,

    Please try the following code snippet to achieve your scenario.

    ASPX:
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
        <Calendar OnDayRender="Calendar_OnDayRender" runat="server">
        </Calendar>
    </telerik:RadDatePicker>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            RadDatePicker1.Calendar.SpecialDays.Clear();
        }
    }
    protected void Calendar_OnDayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {
        if (e.Day.Date.DayOfWeek != DayOfWeek.Saturday && e.Day.Date.DayOfWeek != DayOfWeek.Sunday)
        {
            string calendarSkin = RadDatePicker1.Calendar.Skin != "" ? RadDatePicker1.Calendar.Skin : "Default";
            string otherMonthCssClass = "rcOutOfRange";
            e.Cell.Text = "";
            e.Cell.CssClass = otherMonthCssClass;
            Label label = new Label();
            label.Text = e.Day.Date.Day.ToString();
            e.Cell.Controls.Add(label);
            RadCalendarDay calendarDay = new RadCalendarDay();
            calendarDay.Date = e.Day.Date;
            calendarDay.IsSelectable = false;
            calendarDay.ItemStyle.CssClass = otherMonthCssClass;
            RadDatePicker1.Calendar.SpecialDays.Add(calendarDay);
        }
    }

    Thanks,
    Princy.
  7. Richie
    Richie avatar
    4 posts
    Member since:
    Sep 2012

    Posted 11 Jan 2015 Link to this post

    Hi,
    The last answer about RadDatePicker helped me  a lot,
    But there is still a problem when I want to select a day on the next month.
    When I click the arrow to move to next month all the days suddenly become available without the limitations I made.
    I would really be thankfull if someone can help me with that issue.
    Thanks,
    Richie
  8. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 14 Jan 2015 Link to this post

    Hello Richie,

    If you want to disable dates when you navigate the calendar client side, you will need to disable them client side as well. Because the server side approach will work only if there are PostBacks.

    See this help topics about the JavaScript API of the calendar:
    http://www.telerik.com/help/aspnet-ajax/calendar-on-day-render.html
    http://www.telerik.com/help/aspnet-ajax/calendar-on-date-selecting.html

    Regards,
    Vasil
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017