How do I Change and Persist RadCalendar CSS class on cells from client code

[Bob Pinna]

I have a RadCalendar in MultiView mode, with AutoPostback set to true.  Multiple selections are enabled.

I want to cancel postback in response to a date click and change the
CSS class of the DOM Element (the td cell).  I'm using the client
side code shown below.  It's hooked to the OnDateClick event.

The event handler cancels postback as expected.  The first alert displays
class=radCalDefault_Default.  The second alerts class=Red.  When the event handler
completes however, the IE Developer Toolbar shows that the cells CSS class
has returned to radCalDefault_Default.

Can you advise as to how to change CSS classes on the client so that they persist?

function OvernightCalendar_OnDateClick(calendarInstance, args)
{
  var renderDay = args.get_renderDay();

  alert('Class Name: ' + renderDay.DomElement.className);
  renderDay.DomElement.className = 'Red';
  alert('Class Name (After): ' + renderDay.DomElement.className);
  args.set_cancel(true);
  return false;
}

Also: Is there a way to get Intellisense on the Telerik javascript objects?

Best,
Bob

[Bob Pinna]

FYI: I tried modifying the style element, from within ..._OnDateClick()...

renderDay.DomElement.style.backgroundColor = 'Red';

The cell briefly turns Red, then it goes back to the default style.  What causes the class and style information to be overwritten and how can I disable this?

[Bob Pinna]

For anybody looking to solve the same problem...

I was able to accomplish my goal by styling the anchor tag that is the one and only child element of the day cell (which is a td).

Haven't tried applying a class, but assume that will work.  It looks like RadTools overwrites the td class and style information, but leaves the innerHtml untouched.

Here's my date click handler to style the cell in response to a click and to cancel postback.  Not shown is a web service I'm using to communicate the date selection to the server.

function OvernightCalendar_OnDateClick(calendarInstance, args)
{
  var renderDay = args.get_renderDay();
  var e = renderDay.DomElement;
 
  //access the inner <A> element
  for (i=0; i < e.childNodes.length; i++)
  {
    if (e.childNodes[i].nodeName == "A")
    {
      //alert('Changing anchor background');
      e.childNodes[i].style.backgroundColor = 'Red';
    }
  }

  args.set_cancel(true);
  return false;
}

[Axel]

Hi

I am using the Radcalendar for absence management i.e. marking days with types of styles to indicate employee absence.
Everything has been working fine with my calendar set to autopostback=true. Now I am attempting to do everything client side (faster) and used the solutions described above for selectind days and setting different styles. The problem is when I change view "OnCalendarViewChanged" then all my style changes are lost.

I need to be able to select days i.e. change day styles onClick, change views and persist all days because in the end I count all the days I have changed styles on and store to my DB.

Any idea or trick to do this?

[Dimo]

Hello AxelGunn,

In order to apply custom styling to RadCalendar cells when using client-side month navigation, you can use the client-side DayRender event:

http://demos.telerik.com/aspnet-ajax/calendar/examples/programming/customdaycellrendering/defaultcs.aspx

Regards,
Dimo
the Telerik team