Background color to non working days for each resource - from 174469

[lamia]

hello  I have another question , my resources have different work days 

I want apply a background color to  non working  days   for each resource , I have done this before using onCelleRender but how can I acheive this for multiple resources , I am aware of 

workDaysField property but it doesn't work for my requirement , thank you 

SR

[Vengatesh Maniraj]

Hi Lea,

You can set the background color to non-working hours
for all the resources by making use of the renderCell event and getResourceByIndex method. Please find the example code snippet below.

Resources with different workdays.

List<DoctorRes> doctors = new List<DoctorRes>();

            doctors.Add(new DoctorRes { text = "Will Smith", id = 1, color = "#ea7a57", workDays = new List<int> { 1, 2, 4, 5 }, startHour = "08:00", endHour = "15:00" });

            doctors.Add(new DoctorRes { text = "Alice", id = 2, color = "rgb(53, 124, 210)", workDays = new List<int> { 1, 3, 5 }, startHour = "08:00", endHour = "17:00" });

            doctors.Add(new DoctorRes { text = "Robson", id = 3, color = "#7fa900", workDays = new List<int> { 1, 3, 5 }, startHour = "08:00", endHour = "16:00" });

Apply the color for non-working days

       

       function onRenderCell(args) {

            if (args.element.classList.contains('e-work-cells')) {

                var schObj = document.querySelector('.e-schedule').ej2_instances[0];

                var resource = schObj.getResourcesByIndex(args.groupIndex).resourceData;

                if(resource.workDays?.indexOf(args.date?.getDay()) == -1){

                   args.element.style.background = 'red';

                }

            }

        }

Output:

You can find the same in the below-attached sample. Kindly check the sample and let us know if you need any further assistance.

Regards,

Vengatesh

Attachment: Core_Schedule_1576f877.zip

[lamia]

Hello, It worked thank you , just one more question I want to keep the same viw after adding an event , for ewample I add an event on week view how to return to the same view 

Thank you

[Vengatesh Maniraj]

Hi Lea,

Thanks for the update.

We would like to let you know that the scheduler view doesn't change after adding an event by default, it still keeps the same view as behavior. If the view is changed after adding an event, kindly share more details of the problem. 

Regards,

Vengatesh 

[lamia]

hello because i set currentView of the scheduler to month and i need to keep the viw when i add event on a week view for example

[Vengatesh Maniraj]

Hi Lea,

We suggest setting the current view in the actionComplete event after adding a new event. Please refer to the below.

<ejs-schedule id="schedule" width="100%" height="650px" selectedDate="new DateTime(DateTime.Today.Year, 4, 6)" renderCell="onRenderCell" actionComplete="onActionComplete" currentView="Month">

function onActionComplete(args) {

if(args.requestType === 'eventCreated'){

var scheduleObj = document.getElementById('schedule').ej2_instances[0];

if(scheduleObj.currentView !== 'Month'){

scheduleObj.currentView = 'Month';

}

}

}

Please find the same in the below sample and get back to us if you need any further assistance.

Note: Please create a new forum for new queries for better follow-ups.

Regards,

Vengatesh

Attachment: Core_Schedule_9da90c2a.zip