This is a migrated thread and some comments may be shown as answers.
Calendar Day Formatting
1 Answer 50 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Paul Smrz
Top achievements
Rank 1
Paul Smrz asked on 21 Oct 2010, 11:28 PM
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

1 Answer, 1 is accepted

Sort by
0
Paul Smrz
Top achievements
Rank 1
answered on 22 Oct 2010, 08:58 PM
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;
               }
            }
         }
      });
   });
}


Tags
Calendar
Asked by
Paul Smrz
Top achievements
Rank 1
Answers by
Paul Smrz
Top achievements
Rank 1
Share this question
or