Giving "special days" a different color?

[Datamex]

Would it be possible to give "special days" (holidays for example) a different color than other days? And would it be possible to do that for all resources shown in the Scheduler at that moment?

[Paul]

Hi Datamex,

Please refer to this knowledge-base article for details on the matter.

Greetings,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Datamex]

Great! Thanks!

[Datamex]

Would it also be possible to do this by using webservices / client side? The example you provide me with doesn't seem to work when you use the Scheduler with webservices.

[Peter]

Hello,

Unfortunately, there isn't a client side TimeClotCreated event which would allow you to achieve your goal.


Regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Datamex]

Dear Peter,

I think you can guess my next question :) How can we make this happen then?! Or is this an impossible thing to do?

Thanks in advance!

[Peter]

Hi,

Here is an examply of how to enumerate each time slot on the client and how to set its background based on a custom condition:

 <script type="text/javascript">
    function pageLoad() {
        var scheduler = $find('<%=RadScheduler1.ClientID %>');
        var schedulerElement = scheduler.get_element();

        $telerik.$(".rsTopWrap .rsContentTable td", schedulerElement).each(function() {
            var slot = scheduler.get_activeModel().getTimeSlotFromDomElement(this);
            if ([My custom condition]) {
                slot.get_domElement().style.background = "red";

            }
        });
    }

    function OnClientNavigationComplete(sender) {
        var scheduler = sender;
        var schedulerElement = scheduler.get_element();

        $telerik.$(".rsTopWrap .rsContentTable td", schedulerElement).each(function() {
            var slot = scheduler.get_activeModel().getTimeSlotFromDomElement(this);
            if ([My custom condition]) {
                slot.get_domElement().style.background = "red";

            }
        });
    }

    </script>
    <telerik:RadScheduler runat="server" ID="RadScheduler1"  OnClientNavigationComplete="OnClientNavigationComplete" >
        <WebServiceSettings Path="SchedulerWebService.asmx" ResourcePopulationMode="ServerSide" />
    </telerik:RadScheduler>

I hope this helps.

Regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Datamex]

Dear Peter,

Could it be possible this does not work in the TimeLineView? How can I achieve this for the TimeLineView also?

[Peter]

Hello,

I am sorry for this omission. For Timelineview you need to use the following code:

$telerik.$(".rsAllDayTable td", schedulerElement).each(function() {
               var slot = scheduler.get_activeModel().getTimeSlotFromDomElement(this);
               if (true) {
                   slot.get_domElement().style.background = "red";

               }
           });

This code can simply be added to your existing code. There is no need to check which is the current view.

Greetings,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Datamex]

Thanks! With your help I got it to work. This is how I did it:

    //On pageload retrieve all the exceptiondates and check if the current date is such a date.
    function pageLoad() {
      GetSchedulerWebService().GetExceptionDates(GetExceptionDatesSuccess, FailureCallback, OnTimeOut);
    }

    //Check if the current date is an exceptiondate. If so, color the background darkred!
    function GetExceptionDatesSuccess(message, context, method) {
      exceptionDates = message;

      var scheduler = $find('<%=RadScheduler.ClientID %>');
      var schedulerschedulerElement = scheduler.get_element();

      for (i in exceptionDates) {
        $telerik.$(".rsTopWrap .rsContentTable td", schedulerElement).each(function() {
          var slot = scheduler.get_activeModel().getTimeSlotFromDomElement(this)
          var slotslotStartDate = slot.get_startTime().getDate() + "/" + (slot.get_startTime().getMonth() + 1) + "/" + slot.get_startTime().getFullYear();
          var exceptionDate = exceptionDates[i].getDate() + "/" + (exceptionDates[i].getMonth() + 1) + "/" + exceptionDates[i].getFullYear();

          if (slotStartDate == exceptionDate) {
            slot.get_domElement().style.background = "darkRed";
          }
        });

        $telerik.$(".rsAllDayTable td", schedulerElement).each(function() {
          var slot = scheduler.get_activeModel().getTimeSlotFromDomElement(this);
          var slotslotStartDate = slot.get_startTime().getDate() + "/" + (slot.get_startTime().getMonth() + 1) + "/" + slot.get_startTime().getFullYear();
          var exceptionDate = exceptionDates[i].getDate() + "/" + (exceptionDates[i].getMonth() + 1) + "/" + exceptionDates[i].getFullYear();

          if (exceptionDate == slotStartDate) {
            slot.get_domElement().style.background = "darkRed";
          }
        });
      }
    }

    //When navigating through the scheduler it's possible to come accross an exceptiondate.
    //In that case, color the background darkred! Else the background should stay normal.
    function OnClientNavigationComplete(sender) {
      var scheduler = sender;
      var schedulerschedulerElement = scheduler.get_element();

      for (j in exceptionDates) {
        $telerik.$(".rsTopWrap .rsContentTable td", schedulerElement).each(function() {
          var slot = scheduler.get_activeModel().getTimeSlotFromDomElement(this);
          var slotslotStartDate = slot.get_startTime().getDate() + "/" + (slot.get_startTime().getMonth() + 1) + "/" + slot.get_startTime().getFullYear();
          var exceptionDate = exceptionDates[j].getDate() + "/" + (exceptionDates[j].getMonth() + 1) + "/" + exceptionDates[j].getFullYear();

          if (exceptionDate == slotStartDate) {
            slot.get_domElement().style.background = "darkRed";
          }
          else {
            slot.get_domElement().style.background = "none";
          }
        });

        $telerik.$(".rsAllDayTable td", schedulerElement).each(function() {
          var slot = scheduler.get_activeModel().getTimeSlotFromDomElement(this);
          var slotslotStartDate = slot.get_startTime().getDate() + "/" + (slot.get_startTime().getMonth() + 1) + "/" + slot.get_startTime().getFullYear();
          var exceptionDate = exceptionDates[j].getDate() + "/" + (exceptionDates[j].getMonth() + 1) + "/" + exceptionDates[j].getFullYear();

          if (exceptionDate == slotStartDate) {
            slot.get_domElement().style.background = "darkRed";
          }
          else {
            slot.get_domElement().style.background = "none";
          }
        });
      }
    }