Giving "special days" a different color?

10 posts, 1 answers
  1. Datamex
    Datamex avatar
    161 posts
    Member since:
    Jun 2012

    Posted 10 Sep 2009 Link to this post

    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?
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 10 Sep 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Datamex
    Datamex avatar
    161 posts
    Member since:
    Jun 2012

    Posted 10 Sep 2009 Link to this post

    Great! Thanks!
  5. Datamex
    Datamex avatar
    161 posts
    Member since:
    Jun 2012

    Posted 11 Sep 2009 Link to this post

    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.
  6. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 15 Sep 2009 Link to this post

    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.
  7. Datamex
    Datamex avatar
    161 posts
    Member since:
    Jun 2012

    Posted 15 Sep 2009 Link to this post

    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!
  8. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 17 Sep 2009 Link to this post

    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.
  9. Datamex
    Datamex avatar
    161 posts
    Member since:
    Jun 2012

    Posted 07 Oct 2009 Link to this post

    Dear Peter,

    Could it be possible this does not work in the TimeLineView? How can I achieve this for the TimeLineView also?
  10. Answer
    Peter
    Admin
    Peter avatar
    6637 posts

    Posted 09 Oct 2009 Link to this post

    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.
  11. Datamex
    Datamex avatar
    161 posts
    Member since:
    Jun 2012

    Posted 13 Oct 2009 Link to this post

    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";  
              }  
            });  
          }          
        }   
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017