We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Posibility to grey out some days like the weekend days

Hi,

Is it possible to have the color grey for some days(public holidays) like the days of the weekend?

Thanks,
Cornel.

5 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team March 17, 2017 08:40 AM UTC

Hi Cornel,      
     
Thank you for contacting Syncfusion support.     
   
We can format the cell using cell template and query cell info options, kindly visit the below links to know more about the features. We have prepared the sample to customize the public holiday cell color (ex: Christmas) which can be viewed from the below link.   
   
Kindly refer the below code example used in the sample. 
   
<Code> 
<script id="workTemplate" type="text/x-jsrender">        
        {{if view == 'month' && date.getMonth() == 11 && date.getDate() == 25}}         
        <div class="image"><img src='../content/images/schedule/christmas.png' /><br /><span class="caption">Christmas</span></div> 
        {{/if}}         
</script> 
function check(args) { 
                     if (args.requestType == "monthcells") { 
                           if(args.cell.currentDate.getMonth()==11 && args.cell.currentDate.getDate()==25) { 
                                  args.element.css("background-color", "#c8c8c8"); 
                           } 
                     } 
              } 
</Code> 
 
                                                                                                                                                                     
Regards,   
Karthigeyan   



CA Cornel Amarandei March 17, 2017 01:51 PM UTC

Hi Karthigeyan,

Thanks for your information.

What I have is a Schedule control like in http://mvc.syncfusion.com/demos/web/schedule/horizontalresourcegrouping in the montly view. And what I want in fact is to grey out some days (public holidays, received from the server) with the same grey color from up to down (like the weekend days).

Regards,
Cornel.


KK Karthigeyan Krishnamurthi Syncfusion Team March 20, 2017 08:45 AM UTC

Hi Cornel,         
   
Thanks for your update.   
   
We can change cell background color by using Create and ActionComplete events, kindly use the below code example to achieve your requirement.   
 
<Code> 
function cellCustom() { // this event function will be trigger when the control initially loads 
        var obj = $("#Schedule1").data("ejSchedule"); // here we are creating the object for schedule 
        if (obj.model.orientation == "horizontal") { 
            var today, date, index, value, element, dateCount = (obj.model.orientation == "horizontal" && (obj.currentView() == "month" || obj._isCustomMonthView())) ? obj.monthDays : obj._dateRender 
            today = new Date(2017, 11, 25).setHours(0, 0, 0, 0); // Dec 25th is given here 
            index = dateCount.indexOf(today); 
            if (index != -1) { 
                var element = obj.element.find(".e-workcellstab tr td:nth-child(" + (index + 1) + ")"); 
                element.each(function () { $(this).css("background-color", "#c8c8c8"); }); 
            } 
        } 
    } 
function navigation(args) { // this event function will be trigger when the view is navigated 
        if (args.requestType == "viewNavigate" || args.requestType == "dateNavigate") { 
            cellCustom(); 
        } 
    } 
</Code> 
 
Regards, 
Karthigeyan 



CA Cornel Amarandei March 20, 2017 11:14 AM UTC

Hi Karthigeyan,

Thanks for your information. It worked.

Regards,
Cornel.


KK Karthigeyan Krishnamurthi Syncfusion Team March 21, 2017 04:35 AM UTC

Hi Cornel,    
 
We are happy that our solution has fulfilled your requirement. 
 
Please let us know if you need further assistance. 
 
Regards, 
Karthigeyan 


Loader.
Up arrow icon