CSS Class for non-working days and hours as well as timeline

[Harshad]

Hi,

I tried to find this in the Forum and also tried to derive from related threads but did not succeed hence asking.

What is the CSS class for 1) non-working days and non-working hours and also for 2) the timeline (where is shows slot times 9:00 AM etc in a Week view).  I want to change to colours for those.

Thanks

Harshad

[Swathi Ravi]

Hi Harshad,

Thanks for reaching out. 

Q1: CSS class for non-working days and non-working hours.

To change the background color for non-working days and hours, you can use the following CSS selectors:

/* Vertical (Day, Week, and Work Week), Month, Timeline Month, and Timeline Views */

   

 .e-schedule .e-vertical-view .e-work-cells:not(.e-work-hours),

    .e-schedule .e-month-view .e-work-cells:not(.e-work-days),

    .e-schedule .e-timeline-view .e-work-cells:not(.e-work-hours),

   .e-schedule .e-timeline-month-view .e-work-cells:not(.e-work-days)

   {

        background: beige;

    }

Q2: CSS class for the timeline (where is shows slot times 9:00 AM etc in a Week view).

To change the background color of the time cells, use the following CSS selectors:

.e-schedule .e-vertical-view .e-time-cells-wrap table td,

 .e-schedule .e-timeline-view .e-date-header-wrap table tbody td.e-time-slots,

  .e-schedule .e-timeline-month-view .e-date-header-wrap table tbody td.e-time-slots {

        background: #ecc4bd;

   }

Sample - https://blazorplayground.syncfusion.com/VXVIssZzAPzMvsDv

UG - https://blazor.syncfusion.com/documentation/scheduler/scheduler-styling

Let me know if you need any further assistance.

Regards,

Swathi

[Harshad]

Thank you so much, Swathi!

[Vijay Ravi]

Hi Harshad,

Thank you for the update. We're glad to hear that the provided solution meets your requirements. Reach out to us if you need any further assistance. We are here to help you.

Regards,
Vijay