CalendarMixin

Mixin

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.

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.

Has a corresponding runtime animateTimeShift property.

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.

Has a corresponding runtime autoCreate property.

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

Has a corresponding runtime defaultScrollOptions property.

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.

Has a corresponding runtime dragUnit property.

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.

Has a corresponding runtime extendAllDayEndDay property.

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.

Has a corresponding runtime pastEventCls property.

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.

Has a corresponding runtime readOnly property.

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 DateHelper format string/function to use to create date output for abbreviated view descriptions.

Has a corresponding runtime shortDateFormat property.

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

Has a corresponding runtime shortDateTimeFormat property.

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.

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.

Has a corresponding runtime syncCalendarDate property.

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.

Has a corresponding runtime syncViewDate property.

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