v7.3.0

Labels
Feature

Displays labels at positions top, right, bottom and left.

Text in labels can be set from a field on the EventModel or the ResourceModel or using a custom renderer. See SchedulerLabelConfig for configuration specification.

new Scheduler({
   features : {
       labels : {
           // Label rendered above the event bar with content from the
           // record's location field
           top : {
               field  : 'location',
               editor : {
                   type : 'textfield'
               }
           },
           // Label rendered below the event bar with custom content
           // from a renderer
           bottom : {
               renderer : ({ eventRecord }) => `ID: ${eventRecord.id}`
           }
       }
   }
});

Since top and bottom labels occupy space that would otherwise be used by the event we recommend using bigger rowHeights (>55px for both labels with default styling) and zero barMargins because top/bottom labels give space around events anyway.

To prevent labels from being overlapped by other events, see labelLayoutMode.

This feature is disabled by default. It is not supported in vertical mode. For info on enabling it, see GridFeatures.

Useful configs and functions

Member Description
top Top label configuration
bottom Bottom label configuration
left Left (before) label configuration
right Right (after) label configuration
labelCls CSS class to apply to label elements
labelLayoutMode How to handle labels during event layout

See also

No results

Configs

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

    Configuration object for the label which appears after the event bar in the current writing direction.

  • before : SchedulerLabelConfig

    Configuration object for the label which appears before the event bar in the current writing direction.

  • blurAction : 'complete'/'cancel'cancel

    What action should be taken when focus moves leaves the cell editor, for example when clicking outside. May be 'complete' or 'cancel'.

  • bottom : SchedulerLabelConfig

    Bottom label configuration object.

  • labelCharWidth : Number7

    Factor representing the average char width in pixels used to determine label width when configured with labelLayoutMode: 'estimate'.

  • labelCls : Stringb-sch-label

    CSS class to apply to label elements

  • left : SchedulerLabelConfig

    Left label configuration object.

  • right : SchedulerLabelConfig

    Right label configuration object.

  • top : SchedulerLabelConfig

    Top label configuration object.

Properties

Properties are getters/setters or publicly accessible variables on this class
  • isLabels : Booleantrue
    READONLY
    static
    ADVANCED
    Identifies an object as an instance of Labels class, or subclass thereof.
  • isLabels : Booleantrue
    READONLY
    ADVANCED
    Identifies an object as an instance of Labels class, or subclass thereof.

Type definitions

CSS variables

CSS variables that can be set to adjust appearance
Name Description
--b-event-label-background Label background
--b-event-label-color Label color
--b-event-label-font-size Label font size
--b-event-label-font-weight Label font weight
--b-event-label-gap Gap between label and event bar
Selected
--b-selected-event-label-color Label color when event is selected
id: labels

Source path

Scheduler/feature/Labels.js

Demo

examples/labels

Contents