Number of events in a cell

[Eric]

I would like to use renderCell to draw something on the cell when there are events in it.

How do I get the number of events drawn in a cell ?

[Ruksar Moosa Sait]

Hi Eric,

We have checked on your requirement and suggest you to pass the start and end date in our default getEvents method like the below code snippet.

click: function() {

        var events = scheduleObj.getEvents( new Date(2022, 1, 15, 10, 0), new Date(2022, 1, 15, 11, 0));
        console.log(events);

    }

Output:

Sample: https://stackblitz.com/edit/iz2vcc?file=index.js

Kindly check the above sample and let us know if you need any assistance.

Regards,

Ruksar Moosa Sait

[Eric]

Thanks but I realize that I probably do not need the number of events if I can access the parent of an event in the eventRendered function but I could not get it to work.

What I want is to change the cell background when there is at least an event in it.

Something like

args.element.parentElement.classList.add('myspecialclass')

I also tried to the renderCell function by using 

scheduleObj.getEvents.(args.date,args.date) but it always return 0

[Satheesh Kumar Balasubramanian]

Hi Eric,

You can use eventRendered event to change the cell background when there is at least an event in it.

https://stackblitz.com/edit/javascript-cell-background-customization?file=index.js

index.js:

  eventRendered: function (args) {

    var startTimeValue = args.data.StartTime.getTime();

    var endTimeValue = args.data.EndTime.getTime();

    var values = (endTimeValue - startTimeValue) / 2;

    var middleTimevalue = startTimeValue + values;

    var startTimeElement = document.querySelector(

      ".e-work-cells[data-date='" + startTimeValue.toString() + "']"

    );

    var endTimeElement = document.querySelector(

      ".e-work-cells[data-date='" + endTimeValue.toString() + "']"

    );

    var middleTimeElement = document.querySelector(

      ".e-work-cells[data-date='" + middleTimevalue.toString() + "']"

    );

    startTimeElement.style.backgroundColor = 'red';

    endTimeElement.style.backgroundColor = 'red';

    middleTimeElement.style.backgroundColor = 'red';

  },

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

Regards,

Satheesh Kumar B