Calendar Day Formatting

[Paul Smrz]

Hi,

I am using the Calendar, and would like to visually highlight specific days.  I am planning to get the list of days for the currently displayed month via Json result from my controller.

1. How do I tap into the event of the user scrolling to a different month?

2. How do I apply the Json result to specific days?

Thanks,

Paul

[Paul Smrz]

Ok, got this working, so I thought I'd share..

My calendar Name is ScheduleCalendar.  I wired up the OnLoad ClientEvent as follows:

function ScheduleCalendar_onLoad(e) {

   // Mark up calendar with days that have schedules now, and when they navigate
   highlightDaysWithSchedules();

   $("#ScheduleCalendar").bind("navigate", null, function () {
      highlightDaysWithSchedules();
   });
}

function highlightDaysWithSchedules() {

   var calendar = $("#ScheduleCalendar").data("tCalendar");
   var firstDateInMonth = $.telerik.formatString('{0:dd/MM/yyyy hh:mm:ss tt}', calendar.viewedMonth.value);
   var lineSelectId = $("#SelectedLineId").val();

   // Get the list of days with schedules
   $.getJSON("/Schedule/GetDaysWithSchedules", { firstDateInMonth: firstDateInMonth, lineSelectId: lineSelectId }, function (data) {

      var links = $("#ScheduleCalendar A");
      var isProcessingCalendarDay = false;

      $.each(links, function (index, link) {

         // need to look at the previous node, and check it for class name
         if (link.className == 't-link' && link.parentNode.className == 't-other-month')
            isProcessingCalendarDay = true;

         if (link.className == 't-other-month' && link.parentNode.className == 't-link')
            isProcessingCalendarDay = false;

         if (isProcessingCalendarDay) {

            // Match the day to the dates, and highlight
            var day = link.innerText;

            for (i = 0; i < data.schedDays.length; i++) {
               if (data.schedDays[i].Day == day) {
                  link.parentNode.bgColor = "yellow";
                  break;
               }
            }
         }
      });
   });
}