How to customize the Web Calendar Tooltip

  • Updated

If you hover over a calendar event, a tooltip automatically shows its details. This KB article shows how to modify the tooltip display.

web cal tooltip

The telerik:RadToolTip properties govern how the tool tip displays.

You can apply many changes to a tool tip. The following example makes the tool tip appear without delay and use fade-in animation, using the EktronTech starter site.

Before you begin, add a calendar event and observe the default behavior. Then, open the EktronTech website file folder and do the following steps.

  1. Make a copy of the Display.ascx and Display.ascx.cs files from this folder: siteroot\workarea\WebCalendar\DefaultTemplate .
  2. Paste them into a new folder in the website, such as siteroot\CustomUserControls .
  3. Edit the new .ascx file you just created.
  4. Set these property values on the Telerik:RadToolTip server control. 
    ShowDelay-0         
Animation-Fade
  5. Save your changes.
  6. Edit your template.
  7. Update the WebCalendar server control's DisplayTemplatePath property with the location of the revised display.ascx file. For example: /CustomUserControls/display.ascx . WebCalendar server control.
  8. Save your changes.
  9. Refresh the browser page containing the calendar and hover over the calendar event to see the new behavior.