How to change the background color of a specific cell in ASP.NET MVC Scheduler?

This knowledge base article explains the way to highlight the background colour of a specific scheduler cell.

Step 1: Create an ASP.NET MVC application with default scheduler example by referring the following knowledge base link.

https://support.syncfusion.com/kb/article/3865/how-to-add-the-ejmvc-schedule-control-in-the-mvc-application

Step 2: Define the client side QueryCellInfo event which will be triggered on rendering of each cell as shown below.

@(Html.EJ().Schedule("Schedule1")
        .Width("100%")
        .Height("525px")
        .CurrentDate(new DateTime(2017, 12, 5))
        .CurrentView(CurrentView.Month)
        .ScheduleClientSideEvents(f => f.QueryCellInfo("customizeCells"))
            )

Step 3: Within the QueryCellInfo event function “customizeCells”, every cell can be accessed then and there, before it is being rendered on the DOM and therefore we can pass our own additional styles to it. In the below function, the currently rendering cell is checked for the date value of 25^th December and then its background colour is customized based on it.

   function customizeCells(args) {
        if (args.requestType == "monthcells") {
            if (args.cell.currentDate.getMonth() == 11 && args.cell.currentDate.getDate() == 25) {
                args.element.css("background-color", "#c8c8c8");
            }
        }
    }

Step 4: Run the sample and the Schedule control will be displayed as follows.

Figure 1: Schedule control displayed with different background colour for a specific cell.

Sample Link:

https://www.syncfusion.com/downloads/support/forum/129416/ze/ScheduleSample-444519426 

Conclusion

I hope you enjoyed learning about how to change the background color of a specific cell in ASP.NET MVC Scheduler.

You can refer to our ASP.NET MVC Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Scheduler example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!