We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Adding Tooltip to Scheduler Cell (dynamic) (es5)

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!...




1 Reply

RV Ravikumar Venkatesan Syncfusion Team January 12, 2023 04:56 PM UTC

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 = 0i < listOfEle.lengthi++) {

                    var tooltip = new ej.popups.Tooltip({

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

                    });

                    tooltip.appendTo(listOfEle[i]);

                }

            }

            updateTooltip = false;

        }

    }

});


Regards,

Ravikumar Venkatesan


Loader.
Up arrow icon