Set the CssClass of the day of the RadDatePicker Calendar

[Mike]

I have two RadDatePickers on a page. They look like this:

<rad:RadDatePicker ID="RadDatePicker1" runat="server" SkinID="sknRadDatePicker">
  <ClientEvents OnDateSelected="OnDateSelected"></ClientEvents>
</rad:RadDatePicker>

<rad:RadDatePicker ID="RadDatePicker2" runat="server" SkinID="sknRadDatePicker">
</rad:RadDatePicker>

Their skin is this:

<rad:RadDatePicker SkinId="sknRadDatePicker" Calendar-Skin="Web20" DateInput-Skin="WebBlue" DateInput-ForeColor="#666666" DateInput-Font-Names="Arial" DateInput-Font-Size="9" DatePopupButton-CssClass="RadDatePicker_padding" Width="101px" runat="server" />

As you can see the Calendar-Skin is set to "Web20" skin...

Now i have a Client Side script that executes when a date is selected on the first RadDatePicker. Here it is:

<rad:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script language="JavaScript" type="text/javascript">
        function OnDateSelected(sender, e)
        {      
            var RadDatePicker1 = $find("<%= RadDatePicker1.ClientID %>");   
            var RadDatePicker2 = $find("<%= RadDatePicker2.ClientID%>");
            
            var SelectedDate = RadDatePicker1.get_selectedDate();
            if (RadDatePicker1.isEmpty())
                SelectedDate = new Date();        

            SelectedDate.setDate(SelectedDate.getDate() + 1);
            
            var SelectedDate2 = RadDatePicker2.get_selectedDate();
            SelectedDate2.setDate(SelectedDate2.getDate());
            
            RadDatePicker2.set_minDate(SelectedDate);            
            
            if (SelectedDate2 <= SelectedDate)
            {
                RadDatePicker2.set_selectedDate(SelectedDate);
            }                
            
            RadDatePicker2.togglePopup();
            
        }
    </script>
</rad:RadCodeBlock>

What i would like to do is "highlight" the day on the calendar with the Web20 rcToday css class. The idea being that i want RadDatePicker2 to show RadDatePicker1's selected date in orange on the calendar... I would like to do this via Client Side Script...

Two things i can not figure out that is stopping me for making this happen:

1) I can not figure out how to fire the onDayRender ClientSide event for the RadDatePicker (Not RadCalendar)... I have been reading this article: http://www.telerik.com/help/aspnet-ajax/calendar_clientsideondayrender.html but it pertains to the Calendar control and not the date picker.

2) I am using SiteFinity and i do not have access to the CSS files for the Web20 skin... I can not figure out how to set a day tot he rcToday css class.... I have tried the foloowing and it does nto work:

                                <rad:RadDatePicker ID="RadDatePicker1" runat="server" SkinID="sknRadDatePicker">
                                    <ClientEvents OnDateSelected="OnDateSelected"></ClientEvents>
                                    <Calendar runat="server">
                                        <SpecialDays>
                                            <rad:RadCalendarDay Date="1/16/2009"  ItemStyle-CssClass="rcToday" />
                                        </SpecialDays>
                                    </Calendar>
                                </rad:RadDatePicker>

This however does work:

                                <rad:RadDatePicker ID="RadDatePicker1" runat="server" SkinID="sknRadDatePicker">
                                    <ClientEvents OnDateSelected="OnDateSelected"></ClientEvents>
                                    <Calendar runat="server">
                                        <SpecialDays>
                                            <rad:RadCalendarDay Date="1/16/2009" ItemStyle-BackColor="Aqua" />
                                        </SpecialDays>
                                        <ClientEvents OnDayRender="RenderADay" />
                                    </Calendar>
                                </rad:RadDatePicker>

So i am not access the skins style correctly for some reason although this is how every example i have found says to do this....

In any case. I do not want to use the <Calendar runat="server"><SpecialDays> block and want to rather fire a clientside event to do the highlighting of the day.

Additionally i will need to Rerender the calendar days each time a date in RadDatePicker1 is selected as my OnDateSelected event will fire and change the date on the calendar i want highlighted...

So please excuse my frustration but i have spent the entire day wasted on this and i am annoyed that there is not much info on this that pertains specifically to the RadDatePicker - not just the RadCalendar... Ontop of if all i refuse to fire off any server side events to do this as this control, combined with the RadAjaxPanel has been causing server exceptions (for whihc i have another post about on this forum) so i have resorted to doing all this ClientSide...

Please..... Please someone help me get this done, some example code would be very much appreciated and i would be eternally grateful!

Duncan

[Dimo]

Hello Duncan,

I am afraid that a good client-only solution in this case is hard to implement, that's why I am offering you the following approach, which works quite well, in my opinion:

<%@ Page Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadDatePicker1_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
    {
        RadDatePicker2.MinDate = RadDatePicker1.SelectedDate.Value;
        RadDatePicker2.Calendar.SpecialDays.Clear();
        RadDatePicker2.SelectedDate = null;
        RadCalendarDay cd = new RadCalendarDay();
        cd.Date = RadDatePicker1.SelectedDate.Value;
        cd.ItemStyle.CssClass = "rcToday";
        RadDatePicker2.Calendar.SpecialDays.Add(cd);
    }

</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" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadDatePicker1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadDatePicker2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    <ClientEvents OnResponseEnd="ResponseEnd" />
</telerik:RadAjaxManager>

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="Web20" OnSelectedDateChanged="RadDatePicker1_SelectedDateChanged" AutoPostBack="true" />

<telerik:RadDatePicker ID="RadDatePicker2" runat="server" Skin="Web20" />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">

function ResponseEnd(sender, args)
{
    if (args.get_eventTarget() == "<%= RadDatePicker1.ClientID %>")
    {
        $find("<%= RadDatePicker2.ClientID %>").togglePopup();
    }
}

</script>
</telerik:RadCodeBlock>

</form>
</body>
</html>

Greetings,
Dimo
the Telerik team

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