disabling calendar weekend days

[Hans van Rijnswoud]

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);
            }
        }

[Dimo]

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.

[Hans van Rijnswoud]

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.

[Dimo]

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.

[Karl]

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>

[Marin]

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

[Karl]

Excellent! Thanks Marin...