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

Special Days style

13 Answers 250 Views

Calendar

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

Voss Grose asked on 25 Jan 2009, 11:19 PM

Once I set the SpecialDays collection they are styled correctly, but as soon as I hover over them I guess they go back to their hover style.

How do I make the SpeicalDays style stick?

CODE BELOW:

<asp:ScriptManager id="ScriptManager" runat="server" />
<telerik:radajaxmanager id="RadAjaxManager1" runat="server">
               <AjaxSettings>
                   <telerik:AjaxSetting AjaxControlID="RadCalendar1">
                       <UpdatedControls>
                           <telerik:AjaxUpdatedControl ControlID="RadCalendar1"></telerik:AjaxUpdatedControl>
                       </UpdatedControls>
                   </telerik:AjaxSetting>
               </AjaxSettings>
           </telerik:radajaxmanager>
           <telerik:radcalendar
               id="RadCalendar1"
               runat="server"
               Skin="Black"
               AutoPostBack="true"
               MultiViewColumns="2"
               MultiViewRows="2"
               EnableMultiSelect="false"
               EnableViewState="true"
               OnSelectionChanged="RadCalendar1_OnSelectionChanged"
               TitleFormat="MMMM yyyy"
               CultureInfo="English (United States)"
               >
               <DisabledDayStyle BorderColor="#573d08" BackColor="#573d08" CssClass="SelectedClass" />
           </telerik:radcalendar>

for (Int16 x = 0; x <= Math.Abs(ts.TotalDays); x++)
        {
            RadCalendarDay spec = new RadCalendarDay();
            DateTime dateV = StartDate.Value.AddDays(x);
            spec.Date = dateV;
            spec.IsSelectable = true;
            spec.IsDisabled = true;
            //spec.IsSelected = true;
            RadCalendar1.SpecialDays.Add(spec);
        }

13 Answers, 1 is accepted

answered on 30 Jan 2009, 07:46 PM

I'm not sure what I'm doing wrong, but I can't get this issues resolved.
Whenever I hover over the days they lose their formatting that was applied.
CS
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DateTime startDate = DateTime.Now;
            for (Int16 x = 0; x <= 10; x++)
            {
                RadCalendarDay spec = new RadCalendarDay();
                DateTime dateV = startDate.AddDays(x);
                spec.Date = dateV;
                spec.IsSelectable = true;
                spec.IsDisabled = true;
                RadCalendar1.SpecialDays.Add(spec);
            }

        }
    }
ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2.aspx.cs" Inherits="Test2" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!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>
    <link href="css/Default.css" rel="stylesheet" type="text/css" />
</head>
<body class="BODY">
        <form id="Form1" method="post" runat="server">

            <asp:ScriptManager id="ScriptManager" runat="server" />
            <asp:UpdatePanel ID="upCalendar" runat="server">
                <ContentTemplate>
                <telerik:radcalendar
               id="RadCalendar1"
               runat="server"
               Skin="Black"
               AutoPostBack="true"
               MultiViewColumns="2"
               MultiViewRows="2"
               EnableMultiSelect="false"
               EnableViewState="true"
               TitleFormat="MMMM yyyy"
               CultureInfo="English (United States)"
               >
               <DisabledDayStyle BackColor="#573d08" BorderStyle="Solid" BorderWidth="1px" BorderColor="#000000" CssClass="DisabledClass" />
           </telerik:radcalendar>
                <div>
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="upCalendar" DisplayAfter="100" DynamicLayout="true">
                    <ProgressTemplate>
                        <img border="0" src="images/ajax-loader-circle.gif"" />
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </div>
            </ContentTemplate>
           </asp:UpdatePanel>
           <br />

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

answered on 10 Feb 2009, 12:17 PM

Thanks. One thing I appreciate about Telerik is at least being told the truth about issues (all developers know they can exist) rather than being hesitant like many other suppliers.

However, I am a little unsure what you mean by, "Some further research and code rework is required.".

Do you mean at my end - or yours? If at yours, no problem, but if at mine - do you have any hints?

Don't forget this Calendar is within the ASP.NET AJAX suite - so, its a bit odd that it is NOT compatible with AJAX, and there doesn't seem to be many options available to enable it, or get around some of the issues.

I'm sure you know, but it is a pain, we had completely implemented a calendar in docks, within a split bar, with everything all working perfectly, only in the end to find you can't effectively use any ajax on the entire page because the calendar forgets everything (if anything on the page posts) and can't plot items on the calendar.

Anyways, we've sort of got around it for the moment by using traditional postback, but its ugly and really hope this is a priority for your guys.

Thanks!

answered on 13 Aug 2009, 12:06 AM

Acc. to the above thread this problem "selection lost after hovering over a special day" exists when using RadAjax with the RadCalendar control??
I however have this same problem while not using the RadAjax control. I am using a regular .Net Ajax Updatepanel. I assign my special days "holidays" in code-behind incl. my "CalendarHolidays" class.

This Server Side Code is called from PageLoad()

    
            foreach (CalendarHoliday c in rec)  
        
            {  
        
                if (c.holidaydate.HasValue)  
        
                {  
        
                    RadCalendarDay oneDay = new RadCalendarDay();  
        
                    oneDay.Date = c.holidaydate.Value;  
        
                    oneDay.ToolTip = c.holidayname;  
        
                    if (string.IsNullOrEmpty(c.cssclass))  
        
                        oneDay.ItemStyle.CssClass = "CalendarHolidays";  
        
                    else  
        
                        oneDay.ItemStyle.CssClass = c.cssclass;  // for custom days  
        
                    cnt++;  
        
                    myDays[cnt] = oneDay;  
        
                }  
        
            }  
        
            if (cnt > 0)  
        
                RadCalendar1.SpecialDays.AddRange(myDays);

My custom css class

    
            .CalendarHolidays a  
        
            {  
        
                color: red !Important;  
        
                font-weight: bold !Important;  
        
                background-color: #f2f2f2 !Important;  
        
            }

And finally my html calendar code

    
            <telerik:RadCalendar ID="RadCalendar1" Runat="server" AutoPostBack="True" 
        
                    DayNameFormat="Short"   
        
                    font-names="Arial,Verdana,Tahoma" forecolor="Black" MultiViewColumns="3"   
        
                    Skin="Hay" style="border-color: #ececec"   
        
                    ViewSelectorText="x" EnableNavigationAnimation="True" 
        
            EnableViewSelector="True"   
        
                    CssClass="RadCalendarMultiView_Hay" FastNavigationStep="4"   
        
                    ShowOtherMonthsDays="False">  
        
                </telerik:RadCalendar>

Any idea what is wrong here? Am I missing something in my css code?

answered on 18 Aug 2009, 10:39 AM

Hi Axel,

Try setting IsSelected = true to the special days in Page_Load. In this case the selected styles will not be lost upon hovering. As far as I can see, this works with RadAjax as well:

    
            <%@ Page Language="C#" %> 
        
            <%@ Import Namespace="System.Collections.Generic" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <script runat="server"> 
        
                public DateTime[] specialDates = { DateTime.Now, DateTime.Now.AddDays(-2), DateTime.Now.AddDays(2) }; 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                    int cnt = 0; 
        
                    List<RadCalendarDay> myDays = new List<RadCalendarDay>(); 
        
                    foreach (DateTime c in specialDates) 
        
                    { 
        
                        RadCalendarDay oneDay = new RadCalendarDay(); 
        
                        oneDay.Date = c; 
        
                        oneDay.ToolTip = c.ToShortDateString(); 
        
                        oneDay.ItemStyle.CssClass = "CalendarHolidays"; 
        
                        if (RadCalendar1.SelectedDates.Contains(new RadDate(c))) 
        
                        { 
        
                            oneDay.IsSelected = true; 
        
                        } 
        
                        myDays.Add(oneDay); 
        
                    } 
        
                    RadCalendar1.SpecialDays.AddRange(myDays.ToArray());  
        
                } 
        
            </script> 
        
            <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> 
        
            <style type="text/css"> 
        
            .CalendarHolidays a   
        
            {   
        
                color: red !Important;   
        
            } 
        
            </style> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="50" BackColor="Yellow" /> 
        
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"> 
        
                <AjaxSettings> 
        
                    <telerik:AjaxSetting AjaxControlID="RadCalendar1"> 
        
                        <UpdatedControls> 
        
                            <telerik:AjaxUpdatedControl ControlID="RadCalendar1" /> 
        
                        </UpdatedControls> 
        
                    </telerik:AjaxSetting> 
        
                </AjaxSettings> 
        
            </telerik:RadAjaxManager> 
        
            <%--<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
        
            <ContentTemplate> 
        
            --%> 
        
            <telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="True" MultiViewColumns="2" /> 
        
            <%--</ContentTemplate> 
        
            </asp:UpdatePanel>--%> 
        
            </form> 
        
            </body> 
        
            </html>

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Special Days style

13 Answers, 1 is accepted