CalendarMixin

A key to use to activate this view.

This is optional and defaults to the first letter of the title property.

The title defaults to the mode name, so by default, the activation key is the first letter of the mode name.

Configure this as false to disable drag-creating events in this view.

Configure this as false to disable drag-moving events in this view.

Configure this as false to disable drag-resizing events in this view.

By default, when navigating through time, the next time block will be animated in from the appropriate direction.

Configure this as false to disable this.

If this config is set, then the gesture configured (which defaults to dblclick) creates a new event at the mouse or touch event's time point.

The exact time is rounded to the closest specified step value. This value is also used for the step value in the EventEdit's time input field.

The duration of the created event is the specified duration value.

If this is specified as true, the gesture becomes dblclick, and the other properties are the default values listed below.

If this is specified as a string, the string becomes the gesture, and the other properties are the default values listed below.

Options to add into scroll options when the scrollTo method is called.

By defult, scrolling is animated.

To make the scrolling animate with easing and highlight the target element, configure the view with

{
    defaultScrollOptions : {
        highlight : true,
        animate   : {
            duration : 750,
            easing   : 'bounce'
        }
    }
}

A function that provides the textual description for this view. If provided, this function overrides the descriptionFormat.

 descriptionRenderer() {
     const
         {
             startDate,
             endDate
         }         = this,
         sameMonth = startDate.getMonth() === endDate.getMonth(),
         sd        = DateHelper.format(startDate, sameMonth ? 'DD{->}' : 'DD/MM/YYY{ -> }'),
         ed        = DateHelper.format(endDate, 'DD/MM/YYY');

    return `${sd}${ed}, ${this.L('L{eventCount}', this.eventCount)}`
}

The durationUnit to use when drag-creating events in this view.

For DayViews, this is normally 'hour', for views with a granularity level of one day, the default is 'day'.

Configure this as null to have drag-create use the unit of the duration property of the autoCreate config as the duration unit when drag-creating events.

The height of event bars if this view creates event bars.

MonthView, CalendarRow (the all day row in a WeekView) and AgendaView use this config.

In DayView and WeekView, the event element's height is part of the widget's layout and signifies the event's duration, so these use a default value of 'auto'.

A function which compares events which some views use to decide upon rendering order.

Default sorter function are provided from the EventSorter class.

A custom sort function may be configured.

Note that the two objects to compare may either be EventModels or EventBars which contain an eventRecord property which is the EventModel.

By default, the end date of an all day event is displayed in the UI as the last calendar date on which the event falls. For most end users, this is the expected value.

Technically, the endDate is a timestamp which represents the exact point in time at which an event ends. To use this instead, configure extendAllDayEndDay as true.

To be clear, this would mean that an allDay event starting and ending on the 7th of February 2020, would show the end date in the tooltip as 8th of February 2020.

Configure as true to hide nonWorkingDays

The maximum date to which the endDate of this view may be navigated.

The minimum date to which the startDate of this view may be navigated.

Non-working days as an object where keys are day indices, 0-6 (Sunday-Saturday), and the value is true. Defaults to nonWorkingDays.

The class name to add to events which have an end date in the past. Defaults to 'b-past-event'.

There are no CSS rules attached to this class. You may use it to style past events.

Configure as true to make the view read-only, by disabling any UIs for modifying data.

For example, the event editor will be set to read-only and will not allow changes to be made. And the EventMenu will not show options which can mutate the events.

Note that checks MUST always also be applied at the server side.

Path to load resource images from. Used by the showResourceAvatars config to create URLs using the resource's image or imageUrl fields:

• image represents image name inside the specified resourceImagePath,
• imageUrl represents fully qualified image URL.

NOTE: The path should end with a /:

new Calendar({
    modeDefaults : {
        showResourceAvatars : true,
        resourceImagePath   : 'images/resources/'
    }
});

A button configuration object to use for the automatically created mode selector button for this mode.

A menu item configuration object to use for the automatically created mode selector menu item for this mode.

A DateHelper format string/function to use to create date output for abbreviated view descriptions.

A DateHelper format string/function to use to create date and time output for abbreviated view descriptions.

The class name to add to events which have duration less than or equal to shortEventDuration.

The duration at which below and equal to this value, an event's encapsulating element gets the shortEventCls added to it so that small event bars can have style rearrangements.

In DayViews, short events have compressed layout so that the event name is visible on the top line next to the start time.

This may be a string in the format required by parseDuration.

It may also be configured as a millisecond value.

Not applicable in a DayView

This specifies whether to show a circular "bullet" icon if there is no iconCls defined for an event.

By default, events which are rendered as solid blocks of colour (such as all day events) do not show the bullet icon.

By default, events which do not show as a colour block show the bullet icon as a means of showing the event's defined eventColor.

This property may contain two properties which define whether to show the bullet icon for both event types.

If configured as true, all event bars will show a bullet icon if they do not have an iconCls

Configure as true to show avatars of the assigned resources (calendars) at the start of the event bar.

Configure as 'last' to show avatars of the assigned resources (calendars) at the end of the event bar.

Note that the avatars are 2.22em diameter circles, and this may not be suitable for rendering in short events inside a DayView.

In a view which renders event bars, the eventHeight should be increased from the default to accommodate the extra information.

Note that you must set resourceImagePath in order that the system knows where to access the resource's image file from.

If no image is set, or the image is not found, the resource's initials are shown instead.

By default it is inherited from the owning Calendar:

new Calendar({
    resourceImagePath   : 'images/resources/'
    modes : {
        month : {
            showResourceAvatars : true,
        },
        week : {
            // Images go at the end of the body with name first
            showResourceAvatars : 'last,
        }
    }
});

The converse of syncViewDate

When a date, or an event is clicked in a calendar view, the Calendar's date is set to the clicked date to indicate that the user has expressed interest in that date.

This is for convenience, so that when switching modes, by default, the time span encapsulating the last date of interest is always shown.

To disable syncing the calendar's date with this view's date, configure this property as false.

This also prevents this view from being updated to the Calendar's date when this view becomes active.

When this is false, the only way views will navigate in time is when the user clicks the "Next" or "Previous" buttons in the Calendar's toolbar, or when the user selects a new date in the datePicker in the Calendar's toolbar.

The converse of syncCalendarDate

When used as a mode of a Calendar, this view's date will automatically be kept synced with the Calendar's date. So this view will move to encapsulate the Calendar's date.

Configure this as false to opt out of this.

Note that this places the onus on the application developer to control the viewed date range in this widget.

A DateHelper format string/function used to format the time displayed in events

A title text used by the Calendar's mode selector button. If not specified, the mode name is used.

The week start day, 0 meaning Sunday, 6 meaning Saturday. Defaults to weekStartDay.

Determines what is under the cursor of the specified event or what is described by the given element.

Creates an event on the specified date which conforms to this view's autoCreate setting.

This method may be called programmatically by application code if the autoCreate setting is false, in which case the default values for autoCreate will be used.

If the EventEdit feature is active, the new event will be displayed in the event editor.

Returns the cell associated with the passed date.

In certain views, the strict definition if whether the view owns the date may be optionally enforced.

For example, in a YearView or MonthView, dates outside the configured year or month may be displayed.

To exclude these, pass the strict parameter as true

Returns the outermost element which represents the first block of the passed event in the view. If the event is represented within the view.

Note if the event covers multiple weeks, this will only return the first element.

To return all elements use getEventElements.

To return an event element at a particular date, pass the date as the second parameter.

Returns all outermost elements which represents the passed event in the view. If the event is represented within the view

Returns the event record for a DOM element or DOM event.

Returns the resource record for a DOM element or DOM event if the element is inside a view which displays events for one resource such as a ResourceView or a DayResourceView.

This is normally used by the TimeRanges feature to gather TimeRanges to render into the DayView or DayResourceView UI.

This returns an array of TimeRangeModels and/or ResourceTimeRangeModels to be rendered in the passed date range.

If this view has a resourceId, then by default only ResourceTimeRangeModels for that resource are returned. If a resourceId is passed, then only ResourceTimeRangeModels for that resource are returned unless you explicitly pass the last parameter (includeTimeRanges) as true.

If the includeTimeRanges is set on the owning view, then time ranges will always be included even though the view is a resource-based view.

This may be used by application code to check for time ranges in a certain date range for a view.

Returns true if the given date is today in the current time zone.

Moves this view forwards in time by its configured (or intrinsic if it's a WeekView or a YearView) duration.

Called when new event is created. Сan be overridden to supply default record values etc.

Moves this view backwards in time by its configured (or intrinsic if it's a WeekView or a YearView) duration.

Refreshes the UI after a change to the EventStore, or to a configuration that requires the UI to change.

Only updates the UI if this widget is visible. If it is not visible, the refresh is deferred until it next becomes visible.

Schedules a refresh of the UI for the next animation frame. This is a useful method to call when making multiple data changes, so that each change merely schedules a refresh for the next AF and DOM churn is kept to a minimum.

Calling refresh directly cancels any scheduled refresh operation and updates the UI immediately

Returns the event record for a DOM element or DOM event.

Brings an event or a time into view. Optionally visually highlights the target.

This may change the date range encompassed by this view to bring the date or event into its ownership.

Scrolling may or may not be required, depending on the type and size constraints of the view.

Base scrolling options are added from the defaultScrollOptions config.

This event fires whenever the autoCreate gesture is detected and also when a drag-create gesture is detected.

This event is preventable and may be used to validate UI-initiated event creation.

Triggered before a view's orientating date changes.

return false from an event handler to veto the temporal navigation.

Fired when an autoCreate gesture has created a new event and added it to the event store.

If the EventEdit feature is present, it listens for this event and initiates an edit operation. Adding a high prio listener which returns false can prevent this event from reaching the eventEdit processing.

This event called whenever the autoCreate gesture is detected and also when a drag-create gesture is detected.

This event is preventable and may be used to validate UI-initiated event creation.

Called before a view's orientating date changes.

return false from an event handler to veto the temporal navigation.

Called when an autoCreate gesture has created a new event and added it to the event store.

If the EventEdit feature is present, it listens for this event and initiates an edit operation. Adding a high prio listener which returns false can prevent this event from reaching the eventEdit processing.