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