TimeVisualizingEditor

Widget

A specialized EventEditor which contains a time visualizer DayView showing the event being edited in context of the time span of the day.

To use this as the event editor in your application, configure your Calendar EventEdit feature's editorConfig as follows:

features : {
    eventEdit : {
        // Our event editor shows a time visualizer day/week view.
        // Make the hour height a little smaller to better fit the editor size.
        editorConfig : {
            type           : 'timevisualizingeditor',
            maximizable    : true,
            timeVisualizer : {
                hourHeight : 30
            }
        }
    }
}

When maximized, if the editor width is at least 900px, the time visualizer will show a week view instead of a day view to give more context.

The user can also toggle between day and week view using the buttons in the editor tbar when maximized and width >= 900px.

The responsive configuration of the editor is

responsive : {
   small : {
      when : 900
  }
}

This means that when the editor width is less than 900px, the time visualizer will always show a day view, even when maximized. This may be reconfigured by changing or removing the responsive configuration of the editor.

The time visualizer will only be shown when editing intra-day events. Day-spanning events will not show the time visualizer.

The time visualizer will show the event being edited and, optionally, other events occurring on the same day. This is configured by the showOtherEvents config.

Useful configs

See also

• EventEdit — The feature that uses this editor
• EventEditor — Parent class providing base editor functionality
• DayView — The day view embedded as the time visualizer