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

A (day) cell looses its assigned custom css classes when selected

4 Answers 142 Views

Calendar

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

Henning asked on 24 Apr 2008, 03:42 PM

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

answered on 24 Apr 2008, 03:53 PM

hi:)

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

answered on 25 Apr 2008, 03:42 PM

hi :)

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

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.

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