How to GrayOut Dates in ASP.NET Core Scheduler?
To gray out dates from the previous and next month, utilize the renderCell property in ASP.NET Core Scheduler. This property is triggered when each cell is rendered, allowing you to add a specific class to the desired cells. Once the class is added, apply the necessary CSS styles to gray out these cells.
To set the default view as 'Month', set the currentView property to 'Month'.
A below shared sample has been demonstrate the desired functionality, illustrating how to gray out dates from the previous and next month and set the default view to 'Month'.
<ejs-schedule id="schedule" height="550" renderCell="onRenderCell" currentView="Month"> </ejs-schedule> <script type="text/javascript"> function onRenderCell(args) { let currentDate = new Date(); let firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); let lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0); if (args.date < firstDayOfMonth || args.date > lastDayOfMonth) { args.element.classList.add('e-disable-dates'); } } </script> |
Output Screenshot:
Conclusion:
I hope you enjoyed learning about how to GrayOut Dates in ASP.Net Core Scheduler.
You can refer to our ASP.NET Core 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 Core Scheduler example to understand how to create and manipulate data.
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!
