ScheduleTooltip
Feature

A feature that displays a tooltip containing the time at the mouse position when hovering empty parts of the schedule.

By default, in DayView and WeekView, the time is rounded to the view's increment unless the precise config is set to true.

The example below illustrates how to use this feature in a Calendar instance and add a custom renderer to the tooltip. It shows the time at the pointer position, and if the pointer is outside of the core hours.

It also validates that any event being created or moved does not extend outside of the core hours:

const calendar = new Calendar({
    features : {
        scheduleTooltip : true
    }
});

This feature is disabled by default.

Useful configs

Config	Description
renderer	Custom content renderer for the tooltip
precise	Show precise time instead of snapped to increment
showOnEvents	Also show tooltip when hovering events
showScheduleTip	Filter which views show the tooltip
anchorToDayCell	Anchor tooltip to the day cell instead of following mouse

Configs

Configs are options you supply in a configuration object when creating an instance of this class

anchorToDayCell : Booleanfalse

Configure whether the tooltip should anchor to the day cell when not in a DayView.

By default, when not in a DayView, the tooltip will follow the mouse pointer.

If you enable this config, the tooltip will anchor to the day cell under the pointer instead.

Has a corresponding runtime anchorToDayCell property.
precise : Booleanfalse

When in a DayView, this config determines whether the tooltip should show the time at the pointer position with a precision of seconds, or rounded to the nearest increment.

Has a corresponding runtime precise property.
renderer : Function/String
The function or the name of a function to use to create the tooltip content. The function is passed the full context of the pointer position.

An implementation may call the defaultRenderer method to get the default HTML string content.
Parameters
- view : CalendarView
  
  The Calendar view that the pointer is over.
- date : Date
  
  The date at the pointer position. If the view is a DayView, this date is snapped to the view's increment based on the view's timeSnapType if any.
- preciseDate : Date
  
  The precise date at the pointer position. This may differ from date if the view is a DayView. It will be as accurate as can be determined.
- events : EventModel[]
  
  The events which coincide with the pointer position.
- timeRanges : TimeRangeModel[]
  
  The time ranges which coincide with the pointer position. Each time range has a coincidingEvents property which is an array of events which intersect the time range.
- resource : ResourceModel
  
  The resource record if any at the pointer position.
Returns

String/DomConfig
:

The HTML or DOM configuration to display in the tooltip. A falsy return value will hide the tooltip.
Has a corresponding runtime renderer property.
showOnEvents : Booleanfalse

Configure whether the tooltip should also show when hovering events.

By default, the tooltip only shows when hovering empty parts of the schedule.

If you enable this config, the tooltip will also show when hovering events.

This may conflict with the EventTooltip feature if that is configured to show on hover rather than on click.

The anchorToDayCell config will remove this conflict.

Has a corresponding runtime showOnEvents property.
showScheduleTip : Function/String
A function (or name of a function in the ownership hierarchy) which decides whether to show the ScheduleTooltip depending on the active view. The active view is passed, and if a truthy value is returned, the tip is shown, otherwise it is hidden.

This defaults to only showing for DayViews
Parameters
- view : CalendarView
  
  The Calendar view that the pointer is over. Return true to show the ScheduleTooltip for the passed view.
- date : Date
  
  The date at the pointer position as accurately as can be determined. If the view is a DayView, this date will have hour and minute resolution.
Returns

Boolean
:

Whether to show the ScheduleTooltip.
Has a corresponding runtime showScheduleTip property.
tooltip : TooltipConfig

This config is used to directly configure the associated Tooltip.

Has a corresponding runtime tooltip property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isScheduleTooltip : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of ScheduleTooltip class, or subclass thereof.

anchorToDayCell : Booleanfalse

Configure whether the tooltip should anchor to the day cell when not in a DayView.

By default, when not in a DayView, the tooltip will follow the mouse pointer.

If you enable this config, the tooltip will anchor to the day cell under the pointer instead.

Has a corresponding anchorToDayCell config.
precise : Booleanfalse

When in a DayView, this config determines whether the tooltip should show the time at the pointer position with a precision of seconds, or rounded to the nearest increment.

Has a corresponding precise config.
renderer : Function/String

The function or the name of a function to use to create the tooltip content. The function is passed the full context of the pointer position.

An implementation may call the defaultRenderer method to get the default HTML string content.

Has a corresponding renderer config.
showOnEvents : Booleanfalse

Configure whether the tooltip should also show when hovering events.

By default, the tooltip only shows when hovering empty parts of the schedule.

If you enable this config, the tooltip will also show when hovering events.

This may conflict with the EventTooltip feature if that is configured to show on hover rather than on click.

The anchorToDayCell config will remove this conflict.

Has a corresponding showOnEvents config.
showScheduleTip : Function/String

A function (or name of a function in the ownership hierarchy) which decides whether to show the ScheduleTooltip depending on the active view. The active view is passed, and if a truthy value is returned, the tip is shown, otherwise it is hidden.

This defaults to only showing for DayViews

Has a corresponding showScheduleTip config.
tooltip : Tooltip

READONLY

Gets the Tooltip instance that this feature is using.

Has a corresponding tooltip config.
isScheduleTooltip : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of ScheduleTooltip class, or subclass thereof.

Functions

Functions are methods available for calling on the class

defaultRenderer( view, date, preciseDate, events, timeRanges, resource )
: String

The default renderer for the tooltip, which shows the time at the pointer position. If the view is a day view, it will also show the time in the format specified by the timeFormat config of the view.

id: scheduleTooltip

Source path

Calendar/feature/ScheduleTooltip.js

Demo

examples/tooltips

ScheduleTooltip
Feature

Useful configs

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Functions

Source path

Demo

Inheritance tree4

Mixins2

Contents

ScheduleTooltip Feature

Useful configs

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Functions

Source path

Demo

Inheritance tree4

Mixins2

Contents

ScheduleTooltip
Feature