EventTip
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
}
};
}
}
}
Configs
141
Configs
141Common
Other
A DateHelper format string/function used to format dates displayed in this tooltip.
| Parameter | Type | Description |
|---|---|---|
date | Date | The date to format. |
The formatted date.
The event record for this tip to display
By default, the end date of an all day event is displayed in the tooltip UI as the last calendar date on which the event falls. For most end users, this is the expected value.
Technically, the endDate is a timestamp
which represents the exact point in time at which an event ends. To use this instead,
configure extendAllDayEndDay as true.
To be clear, this would mean that an allDay event starting and ending on the 7th of February 2020, would show the end date in the tooltip as 8th of February 2020.
A function, or name of a function in the ownership hierarchy which is used to create the content of the tooltip's body.
| Parameter | Type | Description |
|---|---|---|
data | Object | Contextual data about the current tooltip activation |
data.activeTarget | HTMLElement | The event bar element being aligned to |
data.eventRecord | EventModel | The event record |
data.event | Event | The DOM event which initiated the tooltip show |
data.tip | EventTip | The tooltip instance being shown |
The content of the body element.
By default, if the tip's target event is in a cluster of overlapping events and therefore narrow, activating the tip will expand it to full width temporarily.
Configure this as false to disable this.
A DateHelper format string/function used to format the time displayed in this tooltip.
| Parameter | Type | Description |
|---|---|---|
date | Date | The date to format. |
The formatted date.
A function, or name of a function in the ownership hierarchy which is used to create the content of the tooltip's header.
| Parameter | Type | Description |
|---|---|---|
eventRecord | EventModel | The event record |
The content of the header element.
Content
CSS
DOM
Float & align
Layout
misc
Misc
Scrolling
Properties
110
Properties
110Class hierarchy
Other
The event which the tooltip feature has been shown for.
The event which the tooltip feature has been activated for.
By default, the end date of an all day event is displayed in the tooltip UI as the last calendar date on which the event falls. For most end users, this is the expected value.
Technically, the endDate is a timestamp
which represents the exact point in time at which an event ends. To use this instead,
configure extendAllDayEndDay as true.
To be clear, this would mean that an allDay event starting and ending on the 7th of February 2020, would show the end date in the tooltip as 8th of February 2020.
A function, or name of a function in the ownership hierarchy which is used to create the content of the tooltip's body.
| Parameter | Type | Description |
|---|---|---|
data | Object | Contextual data about the current tooltip activation |
data.activeTarget | HTMLElement | The event bar element being aligned to |
data.eventRecord | EventModel | The event record |
data.event | Event | The DOM event which initiated the tooltip show |
data.tip | EventTip | The tooltip instance being shown |
The content of the body element.
By default, if the tip's target event is in a cluster of overlapping events and therefore narrow, activating the tip will expand it to full width temporarily.
Configure this as false to disable this.
A function, or name of a function in the ownership hierarchy which is used to create the content of the tooltip's header.
| Parameter | Type | Description |
|---|---|---|
eventRecord | EventModel | The event record |
The content of the header element.