Adding Tooltip to Scheduler Cell (dynamic) (es5)

[Dave]

Hello!

I'm using Scheduler (es5), and everything works great. I completely override the cell rendering, like this:

scheduleObj = new ej.schedule.Schedule({
        selectedDate: new Date(2023, 1, 15),
        views: [{ option: 'TimelineMonth', interval: 2 }],
        cellTemplate: '${renderCalendarCell(data)}',
        cellClick: onCellClick
    });


function renderCalendarCell(data) {
    if (data.type == 'monthCells') {
        return '<div id="myCalculatedUniqueIdGoesHere"></div>';
    }
}



Everything works. Now, I'd like to add ToolTip to the various <div> I've created. It looks like I cannot understand WHEN to "myTooltip.appendTo('#myCalculatedUniqueIdGoesHere')". 
If I put the Tooltip creation right after the scheduleObj.appendTo('#schedulePlaceholder'), it fails, because I think the scheduleObj is not rendered in the DOM yet, therefore the myCalculatedUniqueIdGoesHere div does not exist yet.

When is the proper time to call myTooltip.appendTo('#myCalculatedUniqueIdGoesHere')? Could I async/await the scheduleObj.appendTo('#schedulePlaceholder') somehow?

Thank you in advance, I hope the problem is clear!...

[Ravikumar Venkatesan]

Hi Dave,

Sample: https://stackblitz.com/edit/ej2-js-schedule-cell-template-with-tooltip?file=index.js

You can achieve your requirement in the dataBound event of the Schedule as shown in the below code snippet.

[index.js]

var scheduleObj = new ej.schedule.Schedule({

    navigating: (args) => {

        updateTooltip = true;

    },

    dataBound: (args) => {

        if (updateTooltip) {

            var listOfEle = document.querySelectorAll('#myCalculatedUniqueIdGoesHere');

            if (listOfEle.length > 0) {

                for (var i = 0; i < listOfEle.length; i++) {

                    var tooltip = new ej.popups.Tooltip({

                        content: "Let's go green to save the planet!!"

                    });

                    tooltip.appendTo(listOfEle[i]);

                }

            }

            updateTooltip = false;

        }

    }

});

Regards,

Ravikumar Venkatesan