Show Tooltip over Scheduler Events
Environment
| Product | Telerik UI for ASP.NET MVC Scheduler |
| Product Version | Created with version 2024.4.1112 |
Description
How can I show a Tooltip when hovering over the ASP.NET MVC Scheduler events to provide additional information like start and end time, description, and more?
Solution
-
Define a Tooltip component that shows when the title of a specified event is hovered.
@(Html.Kendo().Scheduler<MeetingViewModel>() .Name("scheduler") ...// Additional configuration. ) @(Html.Kendo().Tooltip() .For("#scheduler") .Filter(".k-event:not(.k-event-drag-hint) > div, .k-task") .Position(TooltipPosition.Top) ) -
Create an external Kendo UI Template for the content of the Tooltip. You can modify the template content based on your requirements.
@(Html.Kendo().Tooltip() .For("#scheduler") .Filter(".k-event:not(.k-event-drag-hint) > div, .k-task") .Position(TooltipPosition.Top) .Width(120) .ContentTemplateId("template") )<script id="template" type="text/x-kendo-template"> #var element = target.is(".k-task") ? target : target.parent();# // Select the respective target element. #var uid = element.attr("data-uid");# // Access the "uid" of the hovered event. #var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");# // Get a reference to the Scheduler. #var model = scheduler.occurrenceByUid(uid);# // Access the data of the hovered event. #if(model) {# <strong>event start:</strong> #=kendo.format('{0:d}',model.start)# <br /> <strong>event end:</strong> #=kendo.format('{0:d}',model.end)# <br /> <strong>event description:</strong> #=model.description# <br /> #} else {# <strong>No event data is available</strong> #}# </script>
For a runnable example, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository for how to show a Tooltip when hovering over a Scheduler event.