v7.3.0

EventTip
Widget

Displays a tooltip containing extra info and options on either event click or event hover.

See the EventTooltip feature for more information and an example of customizing the displayed event tooltip.

The EventTip is provided with two standard tools:

  • edit - A tool which is linked to the EventEdit feature to initiate editing when clicked.
  • delete - A tool which removes the current event record function of the active view to enable event deletion.

New tools may be added, or properties of existing tools may be changed by configuring the EventTooltip feature.

Content may be customized using the titleRenderer and renderer which may create complex content by returning a DomConfig:

    features : {
        eventTooltip : {
            tools : {
                // Just override handler of existing tool - all else is OK
                edit : {
                    handler : () => console.log(`Handle editing ${this.eventRecord.name} our way`);
                },
                // Add a new tool for our own operation
                newTool : {
                    cls     : 'b-icon-add',
                    tooltip : 'Test',
                    handler() {
                        console.log(`Test ${this.eventRecord.name}`);
                    }
                }
            },
            renderer({ eventRecord }) {
                return {
                    text : `From ${DateHelper.format(eventRecord.startDate, 'l')} to ${DateHelper.format(eventRecord.endDate, 'l')}`
                },
            },
            titleRenderer( eventRecord ) {
                return {
                    text      : `${eventRecord.name} ${eventRecord.resource.name}`,
                    className : {
                        'b-urgent'    : eventRecord.isUrgent,
                        'b-completed' : eventRecord.isCompleted
                    }
                };
            }
        }
    }

Useful configs

Config Description
renderer Custom function to create tooltip body content
titleRenderer Custom function to create tooltip header content
dateFormat Date format string for displayed dates
timeFormat Time format string for displayed times
extendAllDayEndDay Show technical end date for all-day events
revealEventsInCluster Expand clustered event to full width on activation

See also

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class
  • The event record for this tip to display

    Has a corresponding runtime eventRecord property.

Properties

Properties are getters/setters or publicly accessible variables on this class
  • isEventTip : Booleantrue
    READONLY
    static
    ADVANCED
    Identifies an object as an instance of EventTip class, or subclass thereof.
  • The event which the tooltip feature has been shown for.

    Has a corresponding eventRecord config.

  • The event which the tooltip feature has been activated for.

    Has a corresponding eventRecord config.

  • A function, or name of a function in the ownership hierarchy which is used to create the content of the tooltip's body.

    Has a corresponding renderer config.

  • A function, or name of a function in the ownership hierarchy which is used to create the content of the tooltip's header.

    Has a corresponding titleRenderer config.

  • isEventTip : Booleantrue
    READONLY
    ADVANCED
    Identifies an object as an instance of EventTip class, or subclass thereof.
type: eventTooltip

Source path

Calendar/widget/EventTip.js

Contents