This is a migrated thread and some comments may be shown as answers.

Set the CssClass of the day of the RadDatePicker Calendar

1 Answer 343 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 15 Jan 2009, 02:14 AM
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






1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 19 Jan 2009, 01:34 PM
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.
Tags
Calendar
Asked by
Mike
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or