ScheduleTooltip

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

Schedule tooltip
//<code-header>
fiddle.title = 'Schedule tooltip';
//</code-header>
targetElement.innerHTML = '<p>Hover an empty part of the schedule to display the ScheduleTooltip:</p>';
const scheduler = new Scheduler({
    appendTo : targetElement,

    features : {
        scheduleTooltip : {
            getText(date, event, resource) {
                return 'Hovering ' + resource.name;
            }
        }
    },

    // makes scheduler as high as it needs to be to fit rows
    autoHeight : true,

    startDate : new Date(2018, 4, 6),
    endDate   : new Date(2018, 4, 13),

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ],

    resources : [
        { id : 1, name : 'Bernard' },
        { id : 2, name : 'Bianca' }
    ],

    events : [
        { id : 1, resourceId : 1, name : 'Hover outside me', startDate : '2018-05-07', endDate : '2018-05-10', iconCls : 'fa fa-mouse-pointer' }
    ]
});

To hide the schedule tooltip, just disable this feature:

const scheduler = new Scheduler({
    features : {
        scheduleTooltip : false
    }
});

You can also output a message along with the default time indicator (to indicate resource availability etc)

const scheduler = new Scheduler({
   features : {
      scheduleTooltip : {
          getText(date, event, resource) {
              return 'Hovering ' + resource.name;
          }
      }
  }
});

To take full control over the markup shown in the tooltip you can override the generateTipContent method:

const scheduler = new Scheduler({
    features : {
        scheduleTooltip : {
            generateTipContent({ date, event, resourceRecord }) {
                return `
                    <dl>
                        <dt>Date</dt><dd>${date}</dd>
                        <dt>Resource</dt><dd>${resourceRecord.name}</dd>
                    </dl>
                `;
            }
        }
    }
});

Configuration properties from the feature are passed down into the resulting Tooltip instance.

const scheduler = new Scheduler({
    features : {
        scheduleTooltip : {
            // Don't show the tip until the mouse has been over the schedule for three seconds
            hoverDelay : 3000
        }
    }
});

This feature is enabled by default in Scheduler and disabled in ResourceUtilization. For info on enabling it, see GridFeatures.

Configs

10

Common

disabledInstancePlugin
listenersEvents

Other

Set to true to hide this tooltip when hovering non-working time. Defaults to false for Scheduler, true for SchedulerPro

Misc

clientInstancePlugin
localeClassLocalizable
localizableLocalizable

Properties

15

Common

disabledInstancePlugin

Class hierarchy

isScheduleTooltip: Boolean= truereadonly
Identifies an object as an instance of ScheduleTooltip class, or subclass thereof.
isScheduleTooltip: Boolean= truereadonlystatic
Identifies an object as an instance of ScheduleTooltip class, or subclass thereof.
isEventsEvents
isInstancePluginInstancePlugin
isLocalizableLocalizable

Lifecycle

configBase

Misc

clientInstancePlugin
localeHelperLocalizable
localeManagerLocalizable

Other

Functions

30

Other

Called as mouse pointer is moved over a new resource or time block. You can override this to show custom HTML in the tooltip.

ParameterTypeDescription
contextObject
context.dateDate

The date of the hovered point

context.eventEvent

The DOM event that triggered this tooltip to show

context.resourceRecordResourceModel

The resource record

Returns: String -

The HTML contents to show in the tooltip (an empty return value will hide the tooltip)

Override this to render custom text to default hover tip

ParameterTypeDescription
dateDate
eventEvent

Browser event

resourceRecordResourceModel

The resource record

Returns: String
LstaticLocalizable
onEvents
relayAllEvents
triggerEvents
unEvents

Configuration

applyDefaultsstaticBase

Events

Lifecycle

destroystaticBase

Misc

doDisableInstancePlugin
initClassstaticBase
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Events

5
catchAllEvents
destroyEvents
disableInstancePlugin
enableInstancePlugin

Event handlers

5
onDestroyEvents
onDisableInstancePlugin
onEnableInstancePlugin

Typedefs

1