EventEdit
Feature

Feature that displays a popup containing widgets for editing event data.

To customize its contents you can:

Reconfigure built-in widgets by providing override configs in the items config.
Change the date format of the date & time fields: dateFormat and timeFormat
Configure provided widgets in the editor and add your own in the items config.
Remove fields related to recurring events configuration (such as recurrenceCombo) by setting showRecurringUI config to false.
Advanced: Reconfigure the whole editor widget using editorConfig

Built-in widgets

The built-in widgets are:

Widget ref	Type	Weight	Description
`nameField`	TextField	100	Edit name
`resourceField`	ResourceCombo	200	Pick resource(s)
`startDateField`	DateField	300	Edit startDate (date part)
`startTimeField`	TimeField	400	Edit startDate (time part)
`endDateField`	DateField	500	Edit endDate (date part)
`endTimeField`	TimeField	600	Edit endDate (time part)
`recurrenceCombo`	RecurrenceCombo	700	Select recurrence rule (only visible if recurrence UI is enabled)
`editRecurrenceButton`	RecurrenceLegendButton	800	Edit the recurrence rule (only visible if recurrence is used)
`colorField` ¹	EventColorField	700	Choose background color for the event bar

¹ Set the showEventColorPickers config to true to enable this field

Date and time fields

The date and time fields both keep the full date and time value of the event's start and end instant.

The date and time fields are partner linked pairs. Changing one will update the other to keep the full date/time value.

The start and end instants of the event are kept consistent while editing. Changing the start date/time will adjust the end date/time to keep the same duration.

The min of the end fields is kept in sync to be no earlier than the start instant.

The built-in buttons are:

Widget ref	Type	Weight	Description
`saveButton`	Button	100	Save event button on the bbar
`deleteButton`	Button	200	Delete event button on the bbar
`cancelButton`	Button	300	Cancel event editing button on the bbar

Removing a built-in item

To remove a built-in widget, specify its ref as null in the items config:

const scheduler = new Scheduler({
    features : {
        eventEdit : {
            items : {
                // Remove the start time field
                startTimeField : null
            }
        }
    }
})

Bottom buttons may be hidden using the bbar config passed to editorConfig:

const scheduler = new Scheduler({
    features : {
        eventEdit : {
            editorConfig : {
                bbar : {
                    items : {
                        deleteButton : null
                    }
                }
            }
        }
    }
})

To remove fields related to recurring events configuration (such as recurrenceCombo), set showRecurringUI config to false.

Customizing a built-in widget

To customize a built-in widget, use its ref as the key in the items config and specify the configs you want to change (they will merge with the widgets default configs):

const scheduler = new Scheduler({
    features : {
        eventEdit : {
            items : {
                // ref for an existing field
                nameField : {
                    // Change its label
                    label : 'Description'
                }
            }
        }
    }
})

Adding custom widgets

To add a custom widget, add an entry to the items config. The name property links the input field to a field in the loaded event record:

const scheduler = new Scheduler({
    features : {
        eventEdit : {
            items : {
                // Key to use as fields ref (for easier retrieval later)
                color : {
                    type  : 'combo',
                    label : 'Color',
                    items : ['red', 'green', 'blue'],
                    // name will be used to link to a field in the event record when loading and saving in the editor
                    name  : 'eventColor'
                }
            }
        }
    }
})

Video guides

@youtube

For more info on customizing the event editor, please see "Customize event editor" guide.

This feature is enabled by default.

Useful configs and functions

Member	Description
beforeEventEditShow	Fires before the editor is shown
beforeEventEdit	Fires before editing starts
beforeEventSave	Fires before save, return `false` to prevent
afterEventSave	Fires after event is saved
eventEditBeforeSetRecord	Fires before editor binds to a record

Configs

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

eventRecord : EventModel

The current EventModel record, which is being edited by the event editor.

Has a corresponding runtime eventRecord property.
minEditSize : Number

How much of a long event bar which is clipped by scrolling must be brought into view to facilitate editing.

In a horizontal Scheduler, this will bring 100 pixels of width into view.

In a vertical Scheduler, this will bring 100 pixels of height into view.

Has a corresponding runtime minEditSize property.
readOnly : Booleanfalse

Specify true to put the editor in read only mode.

It will also be in read only mode if the Scheduler / Calendar is so, or if the event record is read only.

Has a corresponding runtime readOnly property.

editorConfig : EventEditorConfig

The configuration for the internal editor widget. With this config you can control the type of editor (defaults to Popup) and which widgets to show, change the items in the bbar, or change whether the popup should be modal etc.

const scheduler = new Scheduler({
    features : {
        eventEdit  : {
            editorConfig : {
                modal  : true,
                cls    : 'my-editor' // A CSS class,
                items  : {
                    owner : {
                        weight : -100, // Will sort above system-supplied fields which are weight 100 to 800
                        type   : 'usercombo',
                        name   : 'owner',
                        label  : 'Owner'
                    },
                    agreement : {
                        weight : 1000, // Will sort below system-supplied fields which are weight 100 to 800
                        type   : 'checkbox',
                        name   : 'agreement',
                        label  : 'Agree to terms'
                    },
                    resourceField : {
                        // Apply a special filter to limit the Combo's access
                        // to resources.
                        store  {
                            filters : [{
                                filterBy(resource) {
                                    return shouldShowResource(record);
                                }
                            }]
                        }
                    }
                },
                bbar : {
                    items : {
                        deleteButton : {
                            hidden : true
                        }
                    }
                }
            }
        }
    }
});

Or to use your own custom editor:

const scheduler = new Scheduler({
    features : {
        eventEdit  : {
            editorConfig : {
                type : 'myCustomEditorType'
            }
        }
    }
});

ignoreSelector : String

A CSS selector targeting elements that should not trigger the editor when clicked.
triggerEvent : Stringeventdblclick

The event that shall trigger showing the editor. Defaults to eventdblclick, set to '' or null to disable editing of existing events.

typeField : StringeventType

The data field in the model that defines the eventType. Applied as class (b-event-type-xx) to the editors element, to allow showing/hiding fields depending on eventType. Dynamic toggling of fields in the editor is activated by adding an eventTypeField field to your widget:

const scheduler = new Scheduler({
   features : {
      eventEdit : {
          items : {
              eventTypeField : {
                 type  : 'combo',
                 name  : 'eventType',
                 label : 'Type',
                 items : ['Appointment', 'Internal', 'Meeting']
              }
          }
       }
    }
});

Note, your event model class also must declare this field:

 class MyEvent extends EventModel {
     static get fields() {
         return [
             { name : 'eventType' }
         ];
     }
 }

Properties

Properties are getters/setters or publicly accessible variables on this class

isEventEdit : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of EventEdit class, or subclass thereof.

cancelButton : Button

READONLY

Reference to the cancel button, if used
deleteButton : Button

READONLY

Reference to the delete button, if used
editor : Popup

Returns the editor widget representing this feature
endDateField : DateField

READONLY

Reference to the end date field, if used
endTimeField : TimeField

READONLY

Reference to the end time field, if used
eventRecord : EventModel

READONLY

The current EventModel record, which is being edited by the event editor.

Has a corresponding eventRecord config.
isEditing : Boolean

READONLY

Returns true if the editor is currently active
minEditSize : Number

How much of a long event bar which is clipped by scrolling must be brought into view to facilitate editing.

In a horizontal Scheduler, this will bring 100 pixels of width into view.

In a vertical Scheduler, this will bring 100 pixels of height into view.

Has a corresponding minEditSize config.
nameField : TextField

READONLY

Reference to the name field, if used
readOnly : Booleanfalse

Specify true to put the editor in read only mode.

It will also be in read only mode if the Scheduler / Calendar is so, or if the event record is read only.

Has a corresponding readOnly config.
resourceField : Combo

READONLY

Reference to the resource field, if used
saveButton : Button

READONLY

Reference to the save button, if used
startDateField : DateField

READONLY

Reference to the start date field, if used
startTimeField : TimeField

READONLY

Reference to the start time field, if used
isEventEdit : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of EventEdit class, or subclass thereof.

Functions

Functions are methods available for calling on the class

deleteEvent( )
: Promise

private

ASYNC

Delete event being edited

Triggers: beforeEventDelete
editEvent( eventRecord, resourceRecord, element )

ON-OWNER

Opens an editor for the passed event. This function is exposed on Scheduler and can be called as scheduler.editEvent().
loadRecord( )

private

Sets fields values from record being edited
save( )
: Promise

private

ASYNC

Saves the changes (applies them to record if valid, if invalid editor stays open)

Triggers: beforeEventSave, beforeEventAdd, afterEventSave

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

afterEventSave

ON-OWNER

Fires on the owning Scheduler after an event is successfully saved

Note that this event is triggered on the owning widget:
beforeEventEdit

PREVENTABLE

ON-OWNER

Fires on the owning Scheduler before an event is displayed in an editor. This may be listened for to allow an application to take over event editing duties. Returning false stops the default editing UI from being shown.

Be aware of that when returning false, your app must take care of the eventRecord lifecycle - for example by committing it or removing it from the store.

Note that this event is triggered on the owning widget:
beforeEventEditShow

ON-OWNER

Fires on the owning Scheduler when the editor for an event is available but before it is populated with data and shown. Allows manipulating fields etc.

Note that this event is triggered on the owning widget:

beforeEventSave

ASYNC

PREVENTABLE

ON-OWNER

Fires on the owning Scheduler before an event is saved. Return false to immediately prevent saving

 scheduler.on({
     beforeEventSave() {
         // prevent saving if some custom variable hasn't 123 value
         return myCustomValue === 123;
     }
 });

or a Promise yielding true or false for async vetoing.

 scheduler.on({
     beforeEventSave() {
         const
             // send ajax request
             response = await fetch('http://my-server/check-parameters.php'),
             data     = await response.json();

         // decide whether it's ok to save based on response "okToSave" property
         return data.okToSave;
     }
 });

Note that this event is triggered on the owning widget:

eventEditBeforeSetRecord

ON-OWNER

Fired before the editor will load the event record data into its input fields. This is useful if you want to modify the fields before data is loaded (e.g. set some input field to be readonly)

Note that this event is triggered on the owning widget:

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onAfterEventSave

ON-OWNER

Called on the owning Scheduler after an event is successfully saved

Note that this handler is called on the owning widget:
onBeforeEventEdit

PREVENTABLE

ON-OWNER

Called on the owning Scheduler before an event is displayed in an editor. This may be listened for to allow an application to take over event editing duties. Returning false stops the default editing UI from being shown.

Be aware of that when returning false, your app must take care of the eventRecord lifecycle - for example by committing it or removing it from the store.

Note that this handler is called on the owning widget:
onBeforeEventEditShow

ON-OWNER

Called on the owning Scheduler when the editor for an event is available but before it is populated with data and shown. Allows manipulating fields etc.

Note that this handler is called on the owning widget:

onBeforeEventSave

ASYNC

PREVENTABLE

ON-OWNER

Called on the owning Scheduler before an event is saved. Return false to immediately prevent saving

 scheduler.on({
     beforeEventSave() {
         // prevent saving if some custom variable hasn't 123 value
         return myCustomValue === 123;
     }
 });

or a Promise yielding true or false for async vetoing.

 scheduler.on({
     beforeEventSave() {
         const
             // send ajax request
             response = await fetch('http://my-server/check-parameters.php'),
             data     = await response.json();

         // decide whether it's ok to save based on response "okToSave" property
         return data.okToSave;
     }
 });

Note that this handler is called on the owning widget:

onEventEditBeforeSetRecord

ON-OWNER

Called before the editor will load the event record data into its input fields. This is useful if you want to modify the fields before data is loaded (e.g. set some input field to be readonly)

Note that this handler is called on the owning widget:

id: eventEdit

Source path

Scheduler/feature/EventEdit.js

Demo

examples/eventeditor

EventEdit
Feature

Built-in widgets

Date and time fields

Removing a built-in item

Customizing a built-in widget

Adding custom widgets

Video guides

Useful configs and functions

See also

Configs

Properties

Functions

Events

Event handlers

Source path

Demo

Inheritance tree4

Mixins3

Contents

EventEdit Feature

Built-in widgets

Date and time fields

Removing a built-in item

Customizing a built-in widget

Adding custom widgets

Video guides

Useful configs and functions

See also

Configs

Properties

Functions

Events

Event handlers

Source path

Demo

Inheritance tree4

Mixins3

Contents

EventEdit
Feature