Change Cell (day) Color

[Maikel Cordeiro]

Hi, how can I change the background color of a day using Vanilla Javascript?

Below I send a picture to illustrate what I'd like to do.

PS: It's important to paint day 03/11 of only one person (DANIELE RUDNIK). Can't paint day 03/11 of Person "Fabio 2"

Thanks

[Ravikumar Venkatesan]

Hi Maikel, 

Greetings from Syncfusion support. 

We have validated your requirement “Change Cell (day) Color” at our end and achieved it in the created and renderCell events of the Schedule with help of the code shown below. For the same, we have prepared a sample which can be downloaded from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/163764/ze/ej2-vanilla-schedule-app-sample1641753384 

[app.js] 

// Data that contains the information of which date needs to highlight 

var highLightData = [ 

    { resourceIndex: 0, color: "yellow", date: new Date(2021, 2, 11) }, 

    { resourceIndex: 2, color: "red", date: new Date(2021, 2, 11) }, 

    { resourceIndex: 0, color: "yellow", date: new Date(2021, 2, 24) }, 

    { resourceIndex: 2, color: "red", date: new Date(2021, 2, 24) } 

]; 

var dates = {}; 

 

var scheduleOptions = { 

    created: (args) => { 

        // Converting the data that contains the color details as the time based object 

        for (let i = 0; i < highLightData.length; i++) { 

            var time = highLightData[i].date.getTime(); 

            var index = highLightData[i].resourceIndex; 

            if (!dates[time]) { 

                dates[time] = []; 

                dates[time][index] = highLightData[i].color; 

            } else if (dates[time] && !dates[time][index]) { 

                dates[time][index] = highLightData[i].color; 

            } 

        } 

    }, 

    renderCell: (args) => { 

        if (args.elementType === "monthCells") { 

            var time = args.date.getTime(); 

            // Checking the current rendering cell dates is available or not in the generated data 

            if (dates[time] && dates[time][args.groupIndex]) { 

                // Changing the background color of the cell based on the data 

                args.element.style.background = dates[time][args.groupIndex]; 

            } 

        } 

    } 

}; 

var scheduleObj = new ej.schedule.Schedule(scheduleOptions, '#Schedule'); 

API(created event): https://ej2.syncfusion.com/javascript/documentation/api/schedule/#created 

API(renderCell event): https://ej2.syncfusion.com/javascript/documentation/api/schedule/#rendercell 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan