Hi,
I am coding a calendar that has to color code the days depending on their state. A day can have five possible states.
The way I am doing this is by overriding the DayRender method on serverside and adding the css style to the cell's CssClass collection like this:
| c.CssClass = registeredHours >= capasity ? "Calendar_Day_CapacityReached" : "Calendar_Day_CapacityNotReached"; |
The result in HTML is this:
| <td class="radCalDefault_SSN Calendar_Day_NoCapacity" ...> |
My problem is that when I select one day the calendar empties the class attribute of the cell with a client side script and puts the "radCalSelect_SSN" css class instead. The result is this:
| <td class="radCalSelect_SSN" ...> |
And because my css class gets removed, the day loses its color coding when it is selected.
4 Answers, 1 is accepted
0
plamen
Top achievements
Rank 1
Rank 1
answered on 24 Apr 2008, 03:53 PM
hi:)
I would suggest you to use SpecialDays
Here is an example:
Regards...
<John:Peel />
I would suggest you to use SpecialDays
Here is an example:
| <div> |
| <telerik:RadCalendar ID="RadCalendar1" runat="server"> |
| <SpecialDays> |
| <telerik:RadCalendarDay Date="04/25/2008"> |
| <ItemStyle BackColor="red" /> |
| </telerik:RadCalendarDay> |
| </SpecialDays> |
| </telerik:RadCalendar> |
| </div> |
Regards...
<John:Peel />
0
Henning
Top achievements
Rank 1
Rank 1
answered on 24 Apr 2008, 04:52 PM
Hi :)
This doesn't help, because what this renders in HTML is
and when the day is selected both the class and style attributes are emptied and the radCalSelect_SSN class is set like this:
This implementation also looses the color coding of the cell/day when the day is selected.
This doesn't help, because what this renders in HTML is
| <td class="radCalDefault_SSN" style="background-color: Red;" ..> |
and when the day is selected both the class and style attributes are emptied and the radCalSelect_SSN class is set like this:
| <td class="radCalSelect_SSN" style="" ...> |
This implementation also looses the color coding of the cell/day when the day is selected.
0
plamen
Top achievements
Rank 1
Rank 1
answered on 25 Apr 2008, 03:42 PM
hi :)
You can use OnDateSelecting client event. Here is an example:
Thank you...
<John:Peel />
You can use OnDateSelecting client event. Here is an example:
| <%@ Page Language="C#" AutoEventWireup="true" %> |
| <%@ Register Assembly="RadCalendar.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %> |
| <!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>Untitled Page</title> |
| <style type="text/css"> |
| .MyCssClass |
| { |
| background-color: red; |
| } |
| </style> |
| <script type="text/javascript"> |
| function DateSelecting(sender, args) |
| { |
| if (args.RenderDay.Date[2] == 9) |
| return false; |
| } |
| </script> |
| <script runat="server"> |
| protected void RadCalendar1_DayRender(object sender, Telerik.WebControls.Base.Calendar.Events.DayRenderEventArgs e) |
| { |
| if (e.Day.Date.Day == 9) |
| { |
| e.Cell.CssClass = "MyCssClass"; |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <div> |
| <rad:RadCalendar |
| ID="RadCalendar1" |
| runat="server" |
| OnDayRender="RadCalendar1_DayRender"> |
| <ClientEvents OnDateSelecting="DateSelecting" /> |
| </rad:RadCalendar> |
| </div> |
| </form> |
| </body> |
| </html> |
Thank you...
<John:Peel />
0
Henning
Top achievements
Rank 1
Rank 1
answered on 28 Apr 2008, 02:13 PM
This works, but does not select the day so I don't know which day is selected in on the server side.
By overriding PerformSelect I can stop the style being changed on client side, but when the calendars renders after the postback it removes my cssclass and inserts the radCalSelect class instead.
By overriding PerformSelect I can stop the style being changed on client side, but when the calendars renders after the postback it removes my cssclass and inserts the radCalSelect class instead.
| <script type="text/javascript"> |
| window.onload = function() |
| { |
| Telerik.Web.UI.Calendar.RenderDay.prototype.PerformSelect = function(select) |
| { |
| if (null == select) |
| select = true; |
| if (this.IsSelected != select) |
| { |
| var eventArgs = |
| new Telerik.Web.UI.CalendarDateSelectingEventArgs(select, this); |
| this.RadCalendar.raise_dateSelecting(eventArgs); |
| if (eventArgs.get_cancel()) |
| { |
| return false; |
| } |
| this.IsSelected = select; |
| // var cellStyle = this.GetDefaultItemStyle(); |
| // |
| // if (cellStyle) |
| // { |
| // this.DomElement.className = cellStyle[1]; |
| // this.DomElement.style.cssText = cellStyle[0]; |
| // } |
| if (select) |
| { |
| this.RadCalendar.Selection.Add(this.get_date()); |
| } |
| else |
| { |
| this.RadCalendar.Selection.Remove(this.get_date()); |
| } |
| this.RadCalendar.raise_dateSelected(new Telerik.Web.UI.CalendarDateSelectedEventArgs(this)); |
| } |
| }; |
| } |
| </script> |