Posibility to grey out some days like the weekend days

[Cornel Amarandei]

Hi,

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

Thanks,

Cornel.

[Karthigeyan Krishnamurthi]

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.   

Cell Template:  http://mvc.syncfusion.com/demos/web/schedule/celltemplate   

QueryCellInfo: http://mvc.syncfusion.com/demos/web/schedule/querycell   

Sample: http://jsplayground.syncfusion.com/wd5iictb   

   

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   

[Cornel Amarandei]

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.

[Karthigeyan Krishnamurthi]

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 25^th 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 

[Cornel Amarandei]

Hi Karthigeyan,

Thanks for your information. It worked.

Regards,

Cornel.

[Karthigeyan Krishnamurthi]

Hi Cornel,    

 

We are happy that our solution has fulfilled your requirement. 

 

Please let us know if you need further assistance. 

 

Regards, 

Karthigeyan