Bug? Special Day CssClass not applied problem

[Curtis Mathews]

I want to disable Sundays and make them look disabled.

I'm adding a RadCalendarDay to my SpecialDays collection.  I'm setting it's ItemStyle.CssClass to "otherMonth_Web20".

When the page is first loaded, the style is not applied, but if you view a different month (by clicking the navigation next arrow), the style is applied.  It is also applied to the current month when you come back.

When the page is first loaded the CssClass is "radCalWeekendDefault_Web20 radCalDisable_Web20".  When you switch months and come back the CssClass is "otherMonth_Web20 radCalDisable_Web20".

Here is the declaration:
<rad:DatePickingCalendar ID="cal" runat="server" Skin="Web20"
 UseColumnHeadersAsSelectors="True" UseRowHeadersAsSelectors="True"
 ShowRowHeaders="False" >
    <specialdays>
        <rad:RadCalendarDay Date="2008-05-25" IsDisabled="True" IsSelectable="False"
   Repeatable="Week">
            <ItemStyle CssClass="otherMonth_Web20" />
    </rad:RadCalendarDay>
 </specialdays>
</rad:DatePickingCalendar>

Am I doing something wrong.  Is there a workaround?

[Maria Ilieva]

Hi Curtis Mathews,

How have you set your custom CSS class for the SpecialDays collection? Could you please try to use "!important" in your CSS declaration and check if this will give effect. Also in order to overwrite the default CSS class you could set the custom one with higher priority, by declaring it in this way for example:  td .otherMonth_Web20 a.

Test this approach and let us know how it goes.

Best wishes,
Maria Ilieva
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Curtis Mathews]

Hi Maria,

Thanks for your suggestions.   You asked "How have you set your custom CSS class for the SpecialDays collection?".  My sample declaration in the first post has "<ItemStyle CssClass="otherMonth_Web20" />".  Is this what you are talking about?

I could try and use CSS to do a workaround, but it would seem that you have a major bug.  Is there a way to escalate this issue to see if it is indeed a bug?  I am under a tight deadline and need to decide quickly if I am going to try and use this control or something else.

The bottom line is that it seems that the css classes applied to a cell for any given special day should not vary from one month to the next.  In other words, the second Sunday in April should always have the same css classes as the second Sunday in May.  And May 24th should ALWAYS have the same css classes, and certainly should not change when you go back to April and then return to May.

If you try and reproduce this behavior using the sample declaration in my first post you will see what I mean.  Have you tried my sample code?

Thanks,
Curtis

[Maria Ilieva]

Hi Curtis Mathews,

I tested the described scenario and was able to replicate the issue locally. It seems that this issue is a bug in our RadCalendar. I've already logged that in our bug-tracking system and forwarded it to our developers. They will further research on it and the issue should be fixed for the upcoming releases.

As a possible workaround you could set the IsDisabled property to false and the application should work as expected.

Best wishes,
Maria Ilieva
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Curtis Mathews]

Thank you Maria.

[Pete]

Has this bug been fixed yet? I've just come across it today, seems like a pretty big bug to still be unresolved?

[Missing User]

Hi Pete,

It turned out that the problem was more complex than we expected and we will need more time to fix it. Once our developers manage to fix it, I will inform you.


All the best,
Plamen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Oleg Fridman]

Any word on this? I cannot get it working in my code. I also tried defining the OnDayRender of the Calendar's ClientEvents and that didn't work either:

function OnDayRender(args) {
    alert('asd');
    var date = new Date(args.Date[0], args.Date[1] - 1, args.Date[2]);
    if (date.getDay() == 0) {
        args.Cell.innerHTML = "<span>" + args.Date[2] + "</span>";
        args.Cell.className = "rcOutOfRange";
        args.Cell.DayId = "";
    }
}

<telerik:RadDatePicker id="dpTime" OnSelectedDateChanged="dpTime_DateChanged2" AllowEmpty="false" Runat="server" PopupButton-Visible="false" Calendar-Skin="Telerik" Width="180px" Calendar-ShowOtherMonthsDays="false" Calendar-EnableMultiSelect="false" Calendar-ShowRowHeaders="false">
    <DateInput onclick="TogglePopup()" DateFormat="D" Width="180px" style="float: left" AutoPostBack="true" Skin="None" EnableEmbeddedSkins="false" />
    <DatePopupButton Visible="False"></DatePopupButton>
    <Calendar OnDayRender="dpTime_OnDayRender">
        <ClientEvents OnDayRender="OnDayRender" />
    </Calendar>
</telerik:RadDatePicker>

The strange part about the above is the OnDayRender is never triggered.

Also, I added a server-side OnDayRender to the Calendar which adds a special day. It disables the day and makes it unselectable. This works on first page load. However, if you change the selected day to a random day, you can then select the disabled day after that. What is going on here?
Here is the server-side code:

protected void dpTime_OnDayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
{
    if (e.Day.Date == new DateTime(2008, 11, 27).Date)
    {
        RadCalendarDay day = new RadCalendarDay();
        day.Date = e.Day.Date;
        day.IsSelectable = false;
        day.IsDisabled = true;
        day.ItemStyle.CssClass = "rcOutOfRange";
        day.Repeatable = Telerik.Web.UI.Calendar.RecurringEvents.None;
        dpTime.Calendar.SpecialDays.Add(day);
    }
}

As more info, the RadDatePicker is inside of a RadAjaxPanel.

[plamen]

Hi,


The OnDayRender client-side event handler is called for every calendar day cell when the calendar is rendered as a result of client-side navigation. This event mimics the server-side DayRender event, giving final control over the output of a specific calendar day cell. This event can be used to apply analogous changes to calendar cells when the user navigates that the server-side event handler applied to the cells in the initial view. Here is an example:

<%@ Page Language="C#"  %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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">
    <title></title>
    <script runat="server">
    protected void RadCalendar1_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {
        if (e.Day.IsWeekend)
        {
            ee.Cell.Text = e.Cell.Text + "test";
        }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <script type="text/javascript">
        function RenderADay(sender, eventArgs)
        {
            var cell = eventArgs.get_cell();
            var day = eventArgs.get_renderDay();
            if (day)
            {
                var view = day.RadCalendarView;
                if (day.IsWeekend) {
                    cellcell.innerHTML = cell.innerHTML + "test";
                }
            }
        }
        </script>
        <telerik:RadCalendar
            ID="RadCalendar1" runat="server"
            ondayrender="RadCalendar1_DayRender">
            <ClientEvents OnDayRender="RenderADay" />
        </telerik:RadCalendar>
    </div>
    </form>
</body>
</html>

Thank you...
<John:Peel />