TimeVisualizingEditor

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 view.
        // Make the hour height a little smaller to better fit the editor size.
        editorConfig : {
            type           : 'timevisualizingeditor',
            maximizable    : true,
            timeVisualizer : {
                hourHeight : 30
            }
        }
    }
}

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.

Time visualizing editor

//<code-header>
fiddle.title = 'Time visualizing editor';
//</code-header>
const events = [
    {
        id        : 1,
        name      : 'Team Meeting',
        startDate : '2024-01-07T10:00:00',
        endDate   : '2024-01-07T11:00:00'
    },
    {
        id        : 2,
        name      : 'Project Planning',
        startDate : '2024-01-09T14:00:00',
        endDate   : '2024-01-09T15:30:00'
    },
    {
        id        : 3,
        name      : 'Code Review',
        startDate : '2024-01-11T09:30:00',
        endDate   : '2024-01-11T10:30:00'
    },
    {
        id        : 4,
        name      : 'Daily Standup',
        startDate : '2024-01-08T09:00:00',
        endDate   : '2024-01-08T09:30:00'
    },
    {
        id        : 5,
        name      : 'Client Call',
        startDate : '2024-01-10T11:00:00',
        endDate   : '2024-01-10T12:00:00'
    },
    {
        id        : 6,
        name      : 'Sprint Review',
        startDate : '2024-01-12T15:00:00',
        endDate   : '2024-01-12T16:30:00'
    },
    {
        id        : 7,
        name      : 'Lunch & Learn',
        startDate : '2024-01-13T12:00:00',
        endDate   : '2024-01-13T13:00:00'
    }
];

// Calendar configuration
const calendar = new Calendar({
    appendTo   : targetElement,
    mode       : 'week',
    date       : new Date('2024-01-07'),
    height     : 600,
    width      : '100%',
    eventStore : {
        data : events
    },
    features : {
        eventEdit : {
            editorConfig : {
                type           : 'timevisualizingeditor',
                maximizable    : true,
                timeVisualizer : {
                    hourHeight : 30
                }
            }
        }
    },
    modeDefaults : {
        dayStartTime : '07:00',
        dayEndTime   : '20:00'
    }
});

Configs

124

Common

listenersEvents

Other

showOtherEvents: Boolean | Object

Whether to show other events occurring at the same time as the event being edited in the time visualizer. If true, all day events will be shown as well.