How to change the weekend background color in Scheduler?

[Syncfusion Support]

Answer:

We can achieve weekend background color in Scheduler by overriding the scheduler style.

<style>

.e-work-cells:not(.e-work-days) {

background-color: #80808085 !important;

}

style>

Find the sample to change the weekend background color in Scheduler from here.

[Julian Wandel]

Hello,

this example is working fine for timeline month and timeline year, but on timeline day all cells are being colored.

How can I get it working on timeline day view?

Thank you in advance.

Regards,

Julian

[Ruksar Moosa Sait]

Hi Julian,

You can set the background color for the weekends in the timeline views by overwriting the default CSS with the cellcustomclass in the OnRenderCell event like the below code snippet.

public void OnRenderCell(RenderCellEventArgs args)

    {

        DateTime cellDate = args.Date;

        int weekDay = (int)cellDate.DayOfWeek;

        if (weekDay == 0 || weekDay == 6)

        {

            args.CssClasses = new List<string>(CellCustomClass);

        }

    }

<style>

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

        background-color: darkred;

    }

 

   .e-schedule .e-timeline-view .cell-custom-class {

        background-color: yellowgreen !important;

    }

</style>

Kindly try the attached sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

Attachment: CustomCssWeekendsTimelineView_25fd1e86.zip

[Julian Wandel]

Hi Ruksar,

thank you very much for your reply.

Using your code snippets and translating them to javascript, I got it working.

Regards,

Julian

[Satheesh Kumar Balasubramanian]

Hi Julian,

Thanks for the update.

We are happy that your problem has been resolved now.

Regards,

Satheesh Kumar B