disabling calendar weekend days

7 posts, 0 answers
  1. Hans van Rijnswoud
    Hans van Rijnswoud avatar
    72 posts
    Member since:
    Sep 2008

    Posted 23 Mar 2009 Link to this post

    Hi ,

    I try to implement the sample http://www.telerik.com/community/code-library/aspnet-ajax/calendar/disabling-calendar-days.aspx ti disable the weekend day.

    But the result is very strange. He don't disable the weekend days but the 4 days of the first week and  3 day on the last week.
    I say that the sample was from 2007 (little bit old ;-) ) and it was needed to change little think (like i found in other post).
    But this change don't solve my problem.

    Any issue would be appreciate.

    Thanks

    Edwin.

    Here my code:

    // necessary to disable the weekends on client-side navigation 
        function OnDayRender(calendarInstance, args) { 
            // convert the date-triplet to a javascript date 
            // we need Date.getDay() method to determine  
            // which days should be disabled (e.g. every Saturday (day = 6) and Sunday (day = 0))                 
            var jsDate = new Date(args._date[0], args._date[1] - 1, args._date[2]); 
            if (jsDate.getDay() == 0 || jsDate.getDay() == 6) { 
                var otherMonthCssClass = "otherMonth_" + calendarInstance.Skin; 
                args.Cell.className = otherMonthCssClass
                // replace the default cell content (anchor tag) with a span element  
                // that contains the processed calendar day number -- necessary for the calendar skinning mechanism  
                args.Cell.innerHTML = "<span>" + args._date[2] + "</span>"; 
                // disable selection and hover effect for the cell 
                args.Cell.DayId = ""
            } 
        } 
     
     
    <telerik:RadDatePicker ID="Raddatepicker2" Style="vertical-align: middle;" Skin="Office2007" Width="200px" 
                                MinDate="2009-01-01" runat="server" MaxDate="2099-12-16" Culture="Dutch (Netherlands)"
                                <DateInput onclick="ToggleSecondPopup()" DateFormat="d" runat="server"></DateInput> 
                                <Calendar DayNameFormat="FirstTwoLetters" FirstDayOfWeek="Monday" runat="server" OnDayRender="Calendar_OnDayRender" Skin="Office2007" DisabledDayStyle-ForeColor="Gray"
                                    <ClientEvents OnDayRender="OnDayRender" /> 
                                </Calendar> 
                            </telerik:RadDatePicker> 
     
     
     




    protected void Page_Load(object sender, EventArgs e) 
            { 
                if(!Page.IsPostBack) 
                { 
                     
                } 
                if(!IsAlreadyLoaded) 
                { 
                    Raddatepicker2.Calendar.SpecialDays.Clear(); 
                    Raddatepicker2.SelectedDate = DateTime.Now; 
                    FullPage(); 
                    FullUpdate(); 
                    IsAlreadyLoaded = true
                } 
            } 
     
     
    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 = Raddatepicker2.Calendar.Skin != "" ? Raddatepicker2.Calendar.Skin : "Default"; 
                    string otherMonthCssClass = String.Format("otherMonth_{0}", calendarSkin); 
     
                    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
                    Raddatepicker2.Calendar.SpecialDays.Add(calendarDay); 
                } 
            } 
     

  2. Dimo
    Admin
    Dimo avatar
    8456 posts

    Posted 25 Mar 2009 Link to this post

    Hi Edwin,

    Thanks for the code snippets. You should use a different CSS class now - rcOutOfRange (the skin name doesn't matter). A working example follows:

    <%@ Page Language="C#" %> 
    <%@ Import Namespace="System.Data" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <script runat="server"
     
        protected void Page_Load(object sender, EventArgs e) 
        { 
            bool IsAlreadyLoaded = false
             
            if (!Page.IsPostBack) 
            { 
     
            } 
            if (!IsAlreadyLoaded) 
            { 
                Raddatepicker2.Calendar.SpecialDays.Clear(); 
                Raddatepicker2.SelectedDate = DateTime.Now; 
                IsAlreadyLoaded = true
            } 
        } 
     
     
        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 otherMonthCssClass = "rcOutOfRange"
     
                e.Cell.Text = ""
                e.Cell.CssClass = "rcOutOfRange"
     
                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
                Raddatepicker2.Calendar.SpecialDays.Add(calendarDay); 
            } 
        }  
         
    </script> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>RadControls for ASP.NET AJAX</title> 
    </head> 
    <body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <script type="text/javascript"
     
    function OnDayRender(calendarInstance, args) 
        var jsDate = new Date(args._date[0], args._date[1] - 1, args._date[2]);  
        if (jsDate.getDay() == 0 || jsDate.getDay() == 6) {  
            var otherMonthCssClass = "rcOutOfRange"
            args.get_cell().className = otherMonthCssClass;  
            args.get_cell().innerHTML = "<span>" + args._date[2] + "</span>";  
            args.get_cell().DayId = "";  
        }  
     
    </script> 
     
    <telerik:RadDatePicker ID="Raddatepicker2" Skin="Office2007" Width="200px" MinDate="2009-01-01" 
        runat="server" MaxDate="2099-12-16"
        <DateInput ID="DateInput1" DateFormat="d" runat="server"
        </DateInput> 
        <Calendar ID="Calendar1" DayNameFormat="FirstTwoLetters" FirstDayOfWeek="Monday" 
            runat="server" OnDayRender="Calendar_OnDayRender" Skin="Office2007"
            <ClientEvents OnDayRender="OnDayRender" /> 
        </Calendar> 
    </telerik:RadDatePicker>  
     
    </form> 
    </body> 
    </html> 
     


    Kind regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  3. Hans van Rijnswoud
    Hans van Rijnswoud avatar
    72 posts
    Member since:
    Sep 2008

    Posted 26 Mar 2009 Link to this post

    Hi Dimo,

    Thanks for this answer but I have now other problem.
    In IE and FF3 I have other days in gray but this is possible to select this day.
    In FF3 the weekend days are in gray but i can select the weekend days. This is a problem only in FF. In IE it's ok.

    Any Idee?

    On the following link you can see a little print screen with the result.
    Error calendat print screen

    Thanks,

    Edwin.


  4. Dimo
    Admin
    Dimo avatar
    8456 posts

    Posted 26 Mar 2009 Link to this post

    Hi Edwin,

    The screenshot shows days, which are marked as "out of range" (31, 1, 7, 8, 14, 15, etc) and days, which are "other month" days (26, 27, 28, 29, 30, 2, 3, 4, 5, 6).

    "Other month days" are selectable by default. You can hide them with ShowOtherMonthsDays="false".

    The days, which are marked as "out of range" using DayRender are not selectable in all browsers.

    Sincerely yours,
    Dimo
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  5. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 27 May 2011 Link to this post

    protected void DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
            {
                DateTime CurrentDate = e.Day.Date;
                TableCell currentCell = e.Cell;
      
                //if (CurrentDate.Month == DateTime.Now.Month)
                //{
                    if (CurrentDate.DayOfWeek != DayOfWeek.Saturday && CurrentDate.DayOfWeek != DayOfWeek.Sunday && CurrentDate.Month == DateTime.Now.Month)
                    {
                        if (startDate <= CurrentDate && CurrentDate <= DateTime.Now.Date)
                        {
                            //currentCell.Style["background-color"] = "#009900";
                            //currentCell.ToolTip = "7.5 hrs or more logged.";
                        }
                        else
                        {
                            //currentCell.Style["background-color"] = "#990000";
                            //currentCell.ToolTip = "Less than 7.5 hrs logged.";
                        }
                    }
                    else
                    {
                        // if you are using the skin bundled as a webresource("Default"), the Skin property returns empty string
                        string calendarSkin = DatePicker.Skin != "" ? DatePicker.Skin : "Timesheet";
                        string otherMonthCssClass = "rcOutOfRange";
      
                        // clear the default cell content (anchor tag) as we need to disable the hover effect for this cell
                        e.Cell.Text = "";
                        e.Cell.CssClass = otherMonthCssClass; //set new CssClass for the disabled calendar day cells (e.g. look like other month days here)
      
                        // render a span element with the processed calendar day number instead of the removed anchor -- necessary for the calendar skinning mechanism 
                        Label label = new Label();
                        label.Text = e.Day.Date.Day.ToString();
                        e.Cell.Controls.Add(label);
      
                        // disable the selection for the specific day
                        RadCalendarDay calendarDay = new RadCalendarDay();
                        calendarDay.Date = e.Day.Date;
                        calendarDay.IsSelectable = false;
                        calendarDay.ItemStyle.CssClass = otherMonthCssClass;
                        DatePicker.SpecialDays.Add(calendarDay);
                        e.Cell.CssClass = "rcOutOfRange";
                        //RadCalendarDay calendarDay = new RadCalendarDay();  
                        //calendarDay.Date = e.Day.Date;  
                        //calendarDay.IsSelectable = false; 
                    }
                //}
            }

    I'm having issues when I try to extend this to include days that aren't in the currently selected month.

    If I navigate away from the month (May 2011) to April, and then back to May, then the weekend days and days that aren't in May are not selectable, but the style of some of the days that are in May show as the disabled colour? Screenshot attached...

    <script type="text/javascript">
            // necessary to disable the weekends on client-side navigation
            function OnDayRender(calendarInstance, args)
            {
                // convert the date-triplet to a javascript date
                // we need Date.getDay() method to determine 
                // which days should be disabled (e.g. every Saturday (day = 6) and Sunday (day = 0))                
                  
                //var jsDate = new Date(args.get_date()[0], args.get_date()[1] - 1, args.get_date()[2]);
                //if (jsDate.getDay() == 0 || jsDate.getDay() == 6 || (jsDate.getMonth() + 1) != calendarInstance.CurrentViews[0]._MonthStartDate[1] )
      
                if (args._renderDay.IsWeekend == true || args._renderDay._date[1] != calendarInstance.CurrentViews[0]._MonthStartDate[1])
                {
                    var otherMonthCssClass = "rcOutOfRange";
                    args.get_cell().className = otherMonthCssClass;
                    // replace the default cell content (anchor tag) with a span element 
                    // that contains the processed calendar day number -- necessary for the calendar skinning mechanism 
                    args.get_cell().innerHTML = "<span>" + args.get_date()[2] + "</span>";
                    // disable selection and hover effect for the cell
                    args.get_cell().DayId = "";
                }
            }
        </script>

    <telerik:RadCalendar 
                                        id="DatePicker" 
                                        runat="server" 
                                        skin="Timesheet" 
                                        EnableEmbeddedSkins="false"
                                        EnableMultiSelect="False" 
                                        Width="398"
                                        height="187"
                                        OnDayRender="DayRender" 
                                        FirstDayOfWeek="Monday"
                                        DayNameFormat="Short"
                                        onselectionchanged="DatePicker_SelectionChanged"
                                        >
                                        <ClientEvents OnDayRender="OnDayRender" />
                                    </telerik:RadCalendar>


  6. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 01 Jun 2011 Link to this post

    Hello Karl,

     This happens because the styles overlap with each other. If you set disabled style for cell of May 27 and then change to another month view the style for this cell will be persisted although the 27th should be enabled in this month. One option would be to set AutoPostBack="true" which will cause the page to postback each time you change the view hence the OnDayRender server-side event will be executed every time and the styles will applied correctly. In this case no client-side code is needed - all the styles are changed on the server. Here is the server-side method from the code library modified to disable out of range months as well:

    protected void Calendar_OnDayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
        {
            // modify the cell rendered content for the days we want to be disabled (e.g. every Saturday and Sunday)
            if (e.Day.Date.DayOfWeek == DayOfWeek.Saturday || e.Day.Date.DayOfWeek == DayOfWeek.Sunday
                || e.Day.Date<e.View.MonthStartDate || e.Day.Date > e.View.MonthEndDate)
            {
                // if you are using the skin bundled as a webresource("Default"), the Skin property returns empty string
                string calendarSkin = RadCalendar1.Skin != "" ? RadCalendar1.Skin : "Default";
                string otherMonthCssClass = "rcOutOfRange";
     
                // clear the default cell content (anchor tag) as we need to disable the hover effect for this cell
                e.Cell.Text = "";
                e.Cell.CssClass = otherMonthCssClass; //set new CssClass for the disabled calendar day cells (e.g. look like other month days here)
     
                // render a span element with the processed calendar day number instead of the removed anchor -- necessary for the calendar skinning mechanism
                Label label = new Label();
                label.Text = e.Day.Date.Day.ToString();
                e.Cell.Controls.Add(label);
     
                // disable the selection for the specific day
                RadCalendarDay calendarDay = new RadCalendarDay();
                calendarDay.Date = e.Day.Date;
                calendarDay.IsSelectable = false;
                calendarDay.ItemStyle.CssClass = otherMonthCssClass;
                RadCalendar1.SpecialDays.Add(calendarDay);
            }
        }
    Another option will be to hide the out of range days by setting ShowOtherMonthsDays="false"

    All the best,
    Marin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  7. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 01 Jun 2011 Link to this post

    Excellent! Thanks Marin...
Back to Top