EventEdit

Feature

The plugin/feature disabled state.

For a feature that is off by default that you want to enable later during runtime, configure it with disabled : true.

const grid = new Grid({
     features : {
         featureName : {
             disabled : true // on and disabled, can be enabled later
         }
     }
});

// enable the feature
grid.features.featureName.disabled = false;

If the feature is disabled by default, and you want to include and enable the feature, configure it as true:

const grid = new Grid({
     features : {
         featureName : true // on and enabled, can be disabled later
     }
});

// disable the feature
grid.features.featureName.disabled = true;

If the feature is on by default, but you want to turn it off, configure it as false:

const grid = new Grid({
     features : {
         featureName : false // turned off, not included at all
     }
});

If the feature is enabled by default and you have no need of reconfiguring it, you can omit the feature configuration.

Has a corresponding runtime disabled property.

The listener set for this object.

An object whose property names are the names of events to handle, or options which modifiy how the handlers are called.

See addListener for details about the options.

Listeners can be specified in target class config and they will be merged with any listeners specified in the instantiation config. Class listeners will be fired first:

class MyStore extends Store({
    static configurable = {
        listeners : {
            myCustomEvent() {
            },
            load : {
                prio : 10000,
                fn() { // this load listener handles things first }
            }
        }
    };
});

let store = new MyStore({
  listeners: {
    load: () => { // This load listener runs after the class's },
    ...
  }
});

Handlers as function name

Object event handlers may be specified as a function name. If a string is specified, it is the name of the function in the thisObj object.

If the string begins with up., this object's ownership hierarchy (if present) is scanned for an object which implements that function name:

new Popup({
    tbar : {
        items : {
            myCombo : {
                type      : 'combo',
                editable  : false,
                label     : 'Type',
                listeners : {
                    // Look in owner chain for this function name
                    change : 'up.onFilterChange'
                },
                items     : [
                    'Event',
                    'Task',
                    'Appointment'
                ]
            }
        }
    },
    items : {
        ...
    },
    onFilterChange({ value }) {
        // Handle event type selection here
    }
});

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.

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.

By default, while editing, all clicks outside the editor will cancel the edit.

Set to true to begin editing a new event when an event bar is clicked.

This is normally used in combination with a docked editor, allowing interaction with the scheduler/calendar while editing.

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'
            }
        }
    }
});

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' }
         ];
     }
 }

An object to merge with the provided items config of the editor to override the configuration of provided fields, or add new fields.

To remove existing items, set corresponding keys to null:

const scheduler = new Scheduler({
    features : {
        eventEdit  : {
            items : {
                // Merged with provided config of the resource field
                resourceField : {
                    label : 'Calendar'
                },
                recurrenceCombo : null,
                owner : {
                    weight : -100, // Will sort above system-supplied fields which are weight 0
                    type   : 'usercombo',
                    name   : 'owner',
                    label  : 'Owner'
                }
            }
        }
    }
});

The provided fields are called

• nameField
• resourceField
• startDateField
• startTimeField
• endDateField
• endTimeField
• recurrenceCombo
• editRecurrenceButton

By default, if an event handler throws an exception, the error propagates up the stack and the application state is undefined. Code which follows the event handler will not be executed.

Set this to true to catch exceptions thrown by this object's event handlers and continue processing the event. The exception will be rethrown on a zero millisecond timeout, so it will not destroy the stack.

Has a corresponding runtime catchEventHandlerExceptions property.

An object where property names with a truthy value indicate which events should bubble up the ownership hierarchy when triggered.

const container = new Container({
    items : [
       { type : 'text', bubbleEvents : { change : true }}
    ],

    listeners : {
        change() {
            // Will catch change event from the text field
        }
    }
});

Set to true to call onXXX method names (e.g. onShow, onClick), as an easy way to listen for events.

const container = new Container({
    callOnFunctions : true

    onHide() {
         // Do something when the 'hide' event is fired
    }
});

Has a corresponding runtime callOnFunctions property.

A class translations of which are used for translating this entity. This is often used when translations of an item are defined on its container class. For example:

// Toolbar class that has some predefined items
class MyToolbar extends Toolbar {

    static $name = 'MyToolbar';

    static configurable = {
        // this specifies default configs for the items
        defaults : {
            // will tell items to use the toolbar locale
            localeClass : this
        },

        items : {
            // The toolbar has 2 buttons and translation for their texts will be searched in
            // the toolbar locales
            agree :{ text : 'Agree' },
            disagree :{ text : 'Disagree' }
        }
    };

   ...
}

So if one makes a locale for the MyToolbar class that will include Agree and Disagree string translations:

    ...
    MyToolbar : {
        Agree    : 'Yes, I agree',
        Disagree : 'No, I do not agree'
    }

They will be used for the toolbar buttons and the button captions will say Yes, I agree and No, I do not agree.

List of properties which values should be translated automatically upon a locale applying. In case there is a need to localize not typical value (not a String value or a field with re-defined setter/getter), you could use 'localeKey' meta configuration. Example:

 static configurable = {
      localizableProperties : ['width'],

      width : {
          value   : '54em', // default value here
          $config : {
              localeKey : 'L{editorWidth}' // name of the property that will be used in localization file
          }
      }
  };

By default, the day of week and week of month of the event's start date are used to create helpful contextual recurrence types when editing a non-recurring event record and choosing an initial recurrence type.

Set this to false to disable this and always show unconfigured WEEKLY, MONTHLY and YEARLY options.

Has a corresponding runtime useContextualRecurrenceRules property.