Smart.Scheduler CSS API

Styling

Smart.Scheduler can be styled easily with CSS selectors but not everything should be modified. It is recommended to use the Smart CSS variables instead. Smart.Scheduler provides a range of CSS variables to style particular sections of the element that are intended for customization.

All Common CSS variables:

  • --smart-primary - The theme primary color.
  • --smart-primary-color - Text color on top of a primary background.
  • --smart-secondary - The theme secondary color.
  • --smart-secondary-color - Text color on top of a secondary background.
  • --smart-error - The theme error color.
  • --smart-error-color - Text color on top of a error background.
  • --smart-success - The theme success color.
  • --smart-success-color - Text color on top of a success background.
  • --smart-background - The theme background color. The background color appears behind scrollable content.
  • --smart-background-color - Text color on top of a background background.
  • --smart-surface - The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus.
  • --smart-surface-color - Text color on top of a surface surface.
  • --smart-disabled - The theme primary color in disabled state.
  • --smart-disabled-color - Text color on top of a theme background in disabled state.
  • --smart-ui-state-hover - Hover state background.
  • --smart-ui-state-color-hover - Text color, when UI Element's state is 'hover'.
  • --smart-ui-state-border-hover - Border color, when UI Element's state is 'hover'.
  • --smart-ui-state-active - Active state background.
  • --smart-ui-state-color-active - Text color, when UI Element's state is 'active'.
  • --smart-ui-state-border-active - Border color, when UI Element's state is 'active'.
  • --smart-ui-state-focus - Focus state background.
  • --smart-ui-state-color-focus - Text color, when UI Element's state is 'focus'.
  • --smart-ui-state-border-focus - Border color, when UI Element's state is 'focus'.
  • --smart-ui-state-selected - Selected state background.
  • --smart-ui-state-color-selected - Text color, when UI Element's state is 'selected'.
  • --smart-ui-state-border-selected - Border color, when UI Element's state is 'selected'.
  • --smart-item-border-width - Border width of items.
  • --smart-item-border-radius - Border radius of items.
  • --smart-item-border-top-left-radius - Border top-left radius of items.
  • --smart-item-border-top-right-radius - Border top-right radius of items.
  • --smart-item-border-bottom-left-radius - Border bottom-left radius of items.
  • --smart-item-border-bottom-right-radius - Border bottom-right radius of items.
  • --smart-font-size - Theme font-size.
  • --smart-font-family - Theme font-family.
  • --smart-font-family-icon - Theme icons font-family.
  • --smart-border-width - Theme border-width.
  • --smart-border-radius - Theme border-radius.
  • --smart-border-top-left-radius - Border top-left radius.
  • --smart-border-top-right-radius - Border top-right radius.
  • --smart-border-bottom-left-radius - Border bottom-left radius.
  • --smart-border-bottom-right-radius - Border bottom-right radius.
  • --smart-border - The theme border settings.
  • --smart-outline - The theme border color.
  • --smart-arrow-size - Font size of the arrow elements.
  • --smart-editor-selection - Background color of the selected text.
  • --smart-editor-selection-color - Color of the selected text.
  • --smart-box-height - Default height for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-box-width - Default width for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-bar-height - Default height for headers and footers.
  • --smart-bar-width - Default width for headers and footers.
  • --smart-editor-height - Default height for editors.
  • --smart-editor-width - Default width for editors.
  • --smart-editor-drop-down-width - Default width for editors drop-down.
  • --smart-editor-drop-down-height - Default height for editors drop-down.
  • --smart-editor-label-padding - Default padding for inputs.
  • --smart-editor-addon-width - Default width for spin buttons, dropdown buttons.

Specific CSS variables for Scheduler

  • --smart-scheduler-default-height - Sets the default height of the Smart.Scheduler
  • --smart-scheduler-default-width - Sets the default width of the Smart.Scheduler
  • --smart-scheduler-item-size - Sets the default size of the view selection items inside the Timeline Header
  • --smart-scheduler-timeline-cell-width - Sets the default width of the cells inside the Timeline
  • --smart-scheduler-timeline-cell-height - Sets the default height of the cells inside the Timeline
  • --smart-scheduler-timeline-cell-min-width - Sets the default min-width of the cells inside the Timeline
  • --smart-scheduler-timeline-cell-min-height - Sets the min-height of the cells inside the Timeline
  • --smart-scheduler-header-height - Sets the height of the header
  • --smart-scheduler-header-today-button-size - Scheduler header Today Button width
  • --smart-scheduler-header-date-button-max-size - Sets the size of the Header Date Selection Button
  • --smart-scheduler-header-navigation-button-size - Sets the size of the header buttons
  • --smart-scheduler-footer-height - The height of the footer
  • --smart-scheduler-header-box-shadow - Sets a Box shadow to the Timeline header
  • --smart-scheduler-header-padding - Sets a the padding for the header/footer
  • --smart-scheduler-timeline-header-cell-padding - Sets a the padding for the header/footer cells
  • --smart-scheduler-header-menu-button-size - Sets the size for the Header menu button
  • --smart-scheduler-timeline-weekend-color - Sets the background color for the weekend cells
  • --smart-scheduler-timeline-nonworking-color - Sets the background color for nonworking days/hours cells
  • --smart-scheduler-timeline-all-day-label-font-weight - Sets a the font-weight of the All day label
  • --smart-scheduler-timeline-header-horizontal-cells-size - Sets a the horizontal header cells size
  • --smart-scheduler-timeline-header-horizontal-label-padding - Sets a the horizontal header cells label padding
  • --smart-scheduler-timeline-header-horizontal-details-size - Sets the size of the Horizontal Details Header
  • --smart-scheduler-timeline-header-horizontal-group-size - Sets the size of the Horizontal Group Header
  • --smart-scheduler-timeline-header-vertical-cells-size - Sets the vertical header cell size
  • --smart-scheduler-timeline-header-vertical-label-padding - Sets the vertical header cells padding
  • --smart-scheduler-timeline-header-vertical-details-size - Sets the size of the Vertical Details Header
  • --smart-scheduler-timeline-header-vertical-group-size - Sets the size of the Vertical Group Header
  • --smart-scheduler-timeline-header-all-day-cells-size - Sets the All Day View height
  • --smart-scheduler-timeline-group-separator-background - Sets the color for the group separator
  • --smart-scheduler-timeline-group-separator-size - Sets the group cell separator size
  • --smart-scheduler-timeline-group-white-space - Sets the white-space property for the Header Group cells
  • --smart-scheduler-timeline-group-header-offset - Sets the label offset for the header cells when groupByDate is enabled
  • --smart-scheduler-current-time-indicator-background - Current Time Indicator background-color
  • --smart-scheduler-current-time-indicator-size - Current Time Indicator size(width/height depending on the view orientation)
  • --smart-scheduler-current-time-indicator-header-size - Current Time Indicator size(width/height) inside the Headers
  • --smart-scheduler-current-time-indicator-arrow-size - Current Time Indicator arrow size
  • --smart-scheduler-shader-background - Shade Until Current Time background
  • --smart-scheduler-view-line-size - Timeline lines size
  • --smart-scheduler-view-horizontal-line-color - Horizontal timeline line color
  • --smart-scheduler-view-vertical-line-color - Vertical timeline line color
  • --smart-scheduler-day-week-view-vertical-line-size - Vertical line size in 'day' and 'week' views
  • --smart-scheduler-day-week-view-vertical-line-color - Vertical line color in 'day' and 'week' views
  • --smart-scheduler-day-week-view-hour-size - Horizontal line size for 'day', 'week'. Only the hour lines (excluding minutes)
  • --smart-scheduler-day-week-view-hour-color - Horizontal line color for 'day', 'week' views. Only the hour lines ( excluding the minutes)
  • --smart-scheduler-time-ruler-tick-size - Time ruler tick size. Applicable only to day/week views
  • --smart-scheduler-event-background-rgb - Event background RGB values. Used as a base for the hover and active states.
  • --smart-scheduler-event-background - Event background color
  • --smart-scheduler-event-color - Event color
  • --smart-scheduler-event-focus - Event focus background color
  • --smart-scheduler-event-color-focus - Event focus color
  • --smart-scheduler-event-hover - Event hover background color
  • --smart-scheduler-event-color-hover - Event hover color
  • --smart-scheduler-event-padding-agenda - Event padding in 'agenda' view only
  • --smart-scheduler-event-padding-basic - Event padding in all basic views
  • --smart-scheduler-event-padding-timeline - Event padding in all timeline views
  • --smart-scheduler-event-padding-all-day - Event padding for events inside AllDay container
  • --smart-scheduler-event-content-padding - Event content padding
  • --smart-scheduler-event-label-font-size - Event label font size
  • --smart-scheduler-event-time-font-size - Event time label font size
  • --smart-scheduler-event-time-font-size-agenda - Event time font size for 'agenda' view
  • --smart-scheduler-event-time-font-weight-agenda - Event time label font weight for 'agenda' view
  • --smart-scheduler-event-time-opacity-agenda - Event time label opacity for 'agenda' view
  • --smart-scheduler-event-time-opacity - Event time label opacity
  • --smart-scheduler-event-icon-size - Event icon (repeating, exception icon) size
  • --smart-scheduler-event-size - Sets the size of the timeline events in all views. There's a specific event size CSS variable for Basic, Timeline views that have higher priority then this variable in the corresponding views. Use them instead when necessary. They are listed below.
  • --smart-scheduler-event-size-basic - Sets the size of the events only in Basic views
  • --smart-scheduler-event-size-timeline - Sests the size of the events only in Timeline views. Should only be in pixels.
  • --smart-scheduler-event-collector-size - Event collector size
  • --smart-scheduler-event-collector-mobile-size - Event collector size on mobile
  • --smart-scheduler-event-collector-background - Event collector background color
  • --smart-scheduler-event-collector-color - Event collector color
  • --smart-scheduler-event-collector-focus - Event collector background color on focus
  • --smart-scheduler-event-collector-color-focus - Event collector color on focus
  • --smart-scheduler-event-collector-hover - Event collector background colot on hover
  • --smart-scheduler-event-collector-color-hover - Event collector color on hover
  • --smart-scheduler-month-view-number-size - The size of the day number in month view
  • --smart-scheduler-status-size - The size of the day number in month view
  • --smart-scheduler-status-padding - The paddng between the content of the event and the satus strip
  • --smart-scheduler-status-background - The size of the day number in month view
  • --smart-scheduler-status-free-background - Event Status 'free' background color
  • --smart-scheduler-status-tentative-background - Event status 'tentative' background color
  • --smart-scheduler-status-busy-background - Event status 'busy' background color
  • --smart-scheduler-status-out-of-office-background - Event status 'out-of-office' background color
  • --smart-scheduler-cell-feedback-background - Cell feedback background color on event drop
  • --smart-scheduler-event-resize-indicator-size - Event resize indicator size
  • --smart-scheduler-event-resize-indicator-color - Event resize indicator color
  • --smart-scheduler-event-resize-indicator-border-color - Event resize indicator border color
  • --smart-scheduler-restricted-background - Restricted cells background color
  • --smart-scheduler-event-item-size - Event menu item size(height)
  • --smart-scheduler-event-button-size - Event menu item button size(delete button)
  • --smart-scheduler-event-border-radius - Event border radius
  • --smart-scheduler-event-collector-border-radius - Event collector border radius
  • --smart-scheduler-context-menu-max-height - Context menu max-height
  • --smart-scheduler-context-menu-max-width - Context menu max-width
  • --smart-scheduler-window-header-height - Window editor header height
  • --smart-scheduler-window-footer-height - Window editor footer height
  • --smart-scheduler-event-label-font-weight - Event label font weight
  • --smart-scheduler-event-time-font-weight - Event time label font weight
  • --smart-scheduler-event-item-label-font-weight - Event menu item label font-weight
  • --smart-scheduler-toast-default-width - Toast(notifications) default width
  • --smart-scheduler-toast-default-height - Toast(notifications) default height
  • --smart-scheduler-shortcut-size - The width of the shortuct of the view items when placed inside a drop down

The following CSS selectors can be used to style the Scheduler:

  • .smart-scheduler-header - the Header section of the Scheduler.
    • .smart-scheduler-date-nav - a container that holds the date navigation controls
    • .smart-scheduler-view-nav - a container that holds the view navigation controls.
      • .smart-scheduler-view-items-button - a drop down button that when clicked opens the view menu.
        • .smart-scheduler-nav - a button for date nagivation. Three buttons are used for date navigation: 'today' - today button, 'prev' - previous button and 'next' - next button.
      • .smart-scheduler-items-container - a container for the view items. This container can be moved to the Tooltip depending on the viewSelectorType.
        • .smart-scheduler-item - a Scheduler view item.
  • .smart-scheduler-view - the Content section of the Scheduler.
    • .smart-scheduler-view-header-horizontal - the horizontal view header.
      • .smart-scheduler-view-time-container - a container for the header date/time cells.
        • .smart-scheduler-time-zone - a container for the label of the Time zones inside the header.
        • .smart-scheduler-view-details - a horizontal header details date/time cells. Details container is visible only in 'timelineWeek' view. container
          • .smart-scheduler-cell - a horizontal header view cell.
        • .smart-scheduler-view-time - a horizontal header default date/time cells container
          • .smart-scheduler-cell - a horizontal header view cell.
      • .smart-scheduler-groups-container - a container for the header group cells
        • .smart-scheduler-cell - a horizontal header group cell for the label of the group.
    • .smart-scheduler-view-header-vertical - the vertical view header.
      • .smart-scheduler-groups-container - a container for the header group cells
        • .smart-scheduler-cell - a vertical header group cell for the label of the group.
      • .smart-scheduler-view-time-container - a container for the header time cells.
        • .smart-scheduler-view-time - a vertical header default time cells container
          • .smart-scheduler-cell - a vertical header view cell
    • .smart-scheduler-scrollable-container - the view container for the date/time cells, events and indicators.
      • .smart-scheduler-cell - view content cell.
      • .smart-scheduler-event - view event element. The 'collector' attribute on this element inidicates that the event is an Event Collector.
        • .smart-scheduler-event-content - the content of the event element. Customizable via the eventTemplate property.
        • .smart-scheduler-event-button - the delete button for the event that is visible when part of the Menu list.
      • .smart-scheduler-shade-section - the past time shader that is shown then shadeUntilCurrentTime property is applied.
      • .smart-scheduler-current-time-indicator - the current time indicator for the view cells that is shown when currentTimeIndicator property is applied.
  • .smart-scheduler-footer - the Footer section of the Scheduler.Hidden by default.
  • .smart-scheduler-tooltip - a Smart.Tooltip element that is used for the Scheduler menus.
    • .smart-scheduler-context-menu - the Smart.Scheduler context menu.
      • .smart-scheduler-context-menu-item - a context menu item.
    • .smart-scheduler-items-container - a content for the view items.
      • .smart-scheduler-item - a Scheduler view item.
    • .smart-calendar - a Smart.Calendar element that allwos to select the current visible date.
    • .smart-scheduler-collector-event-list - the event menu that appears when an event item is clicked. It contains a list of Scheduler events that correspond to the event that was clicked. If the event was a collector a list of events is shown.
      • .smart-scheduler-event - an Event element shown as a menu item.

Here's how to apply new values to some of the Smart.Scheduler CSS variables:

.smart-scheduler {
    width: 100%;
    height: auto;
    --smart-scheduler-timeline-cell-height: 100px;
    --smart-scheduler-event-size-basic: 50px;
    --smart-scheduler-event-background-rgb: 3, 155, 229;
    --smart-primary-rgb: 234, 128, 252;
    --smart-scheduler-event-background: rgba(var(--smart-scheduler-event-background-rgb), 1);
    --smart-scheduler-event-color: var(--smart-primary-color);
    --smart-scheduler-event-focus: rgba(var(--smart-scheduler-event-background-rgb), .9);
    --smart-scheduler-event-color-focus: var(--smart-scheduler-event-color);
    --smart-scheduler-event-hover: rgba(var(--smart-scheduler-event-background-rgb), .8);
    --smart-scheduler-event-color-hover: var(--smart-scheduler-event-color);
    --smart-scheduler-event-collector-background: rgba(var(--smart-primary-rgb), 1);
    --smart-scheduler-event-collector-color: var(--smart-primary-color);
    --smart-scheduler-event-collector-focus: rgba(var(--smart-primary-rgb), .9);
    --smart-scheduler-event-collector-color-focus: var(--smart-scheduler-event-collector-color);
    --smart-scheduler-event-collector-hover: rgba(var(--smart-primary-rgb), .8);
    --smart-scheduler-event-collector-color-hover: var(--smart-scheduler-event-collector-color);
}

Demo