@syncfusion/ej2-schedule
Version:
Flexible scheduling library with more built-in features and enhanced customization options similar to outlook and google calendar, allowing the users to plan and manage their appointments with efficient data-binding support.
370 lines (333 loc) • 15.6 kB
TypeScript
import { Property, ChildProperty, Complex, Collection } from '@syncfusion/ej2-base';import { View, Orientation } from '../base/type';import { TimeScale } from '../models/time-scale';import { TimeScaleModel, GroupModel, HeaderRowsModel } from '../models/models';import { Group } from '../models/group';import { HeaderRows } from './header-rows';
/**
* Interface for a class Views
*/
export interface ViewsModel {
/**
* It accepts the schedule view name, based on which we can define with its related properties in a single object.
* The applicable view names are,
* * Day - Denotes Day view of the scheduler.
* * Week - Denotes Week view of the scheduler.
* * WorkWeek - Denotes Work Week view of the scheduler.
* * Month - Denotes Month view of the scheduler.
* * Year - Denotes Year view of the scheduler.
* * Agenda - Denotes Agenda view of the scheduler.
* * MonthAgenda - Denotes Month Agenda view of the scheduler.
* * TimelineDay - Denotes Timeline Day view of the scheduler.
* * TimelineWeek - Denotes Timeline Week view of the scheduler.
* * TimelineWorkWeek - Denotes Timeline Work Week view of the scheduler.
* * TimelineMonth - Denotes Timeline Month view of the scheduler.
* * TimelineYear - Denotes Timeline Year view of the scheduler.
*
* @default null
*/
option?: View;
/**
* To denote whether the view name given on the `option` is active or not.
* It acts similar to the [`currentView`](../../schedule/#current-view/)
* property and defines the active view of Schedule.
*
* @default false
*/
isSelected?: boolean;
/**
* By default, Schedule follows the date-format as per the default culture assigned to it. It is also possible to manually set
* specific date format by using the `dateFormat` property. The format of the date range label in the header bar depends on
* the `dateFormat` value or else based on the locale assigned to the Schedule.
* It gets applied only to the view objects on which it is defined.
*
* @default null
*/
dateFormat?: string;
/**
* When set to `true`, displays a quick popup with cell or event details on single clicking over the cells or on events.
* By default, it is set to `true`. It gets applied only to the view objects on which it is defined.
*
* @default false
*/
readonly?: boolean;
/**
* It is used to specify the starting hour, from which the Schedule starts to display.
* It accepts the time string in a short skeleton format and also, hides the time beyond the specified start time.
*
* @default '00:00'
*/
startHour?: string;
/**
* It is used to specify the end hour, at which the Schedule ends. It too accepts the time string in a short skeleton format.
*
* @default '24:00'
*/
endHour?: string;
/**
* It is used to allow or disallow the virtual scrolling functionality.
*
* @default false
*/
allowVirtualScrolling?: boolean;
/**
* Specifies whether overlapping appointments are allowed within the same time slot in the Scheduler.
*
* @remarks
* When set to `false`, the Scheduler enforces restrictions to prevent creating or displaying overlapping appointments within the same time duration.
* This setting includes the following limitations:
*
* - **Initial Loading**: The alert for overlapping appointments will not display during the initial load. Overlapping events will be ignored in rendering, including occurrences.
*
* - **Dynamic Add/Edit**: When adding or editing events dynamically, overlapping validation is performed. If an overlap is detected for a single event, an alert will be shown, and the event will not be saved.
*
* For recurring events, an alert will be displayed, and the event will not be saved. To save recurring events while ignoring overlapping occurrences, trigger the `PopupOpen` event. The `Data` field will contain the parent recurrence data, and the `overlapEvents` field will contain the overlap events. Using these details, users can include exceptions in the recurrence events and save them with the `addEvent` method.
*
* - **Out-of-Date-Range Events**: The `allowOverlap` setting only prevents overlaps for events within the current view date range. To validate overlap events outside the current date range, use the `actionBegin` event to send a request to the server for validation and return a promise-based response. Assign this promise response to the `promise` field in `ActionEventArgs` to handle asynchronous server validation.
*
* @default true
*/
allowOverlap?: boolean;
/**
* Specifies the number of additional rows or columns to render outside the visible area during virtual scrolling.
* This property helps in achieving smoother scrolling by pre-loading data just outside the visible region.
*
* @remarks
* The default value is 3. Increasing this value can result in smoother scrolling but may impact performance
* with larger datasets. Decreasing it can improve performance but may cause more frequent data fetches during scrolling.
* This property only takes effect when `allowVirtualScrolling` is enabled for the current view.
*
* @default 3
*/
overscanCount?: number;
/**
* Specifies the maximum number of events to be displayed in a single row.
* This property is applicable when the 'rowAutoHeight' property is disabled.
* This property is only applicable for the month view, timeline views, and timeline year view.
*
* @default null
*/
maxEventsPerRow?: number;
/**
* It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the
* month date cells.
* This template is only applicable for month view day cells.
*
* @default null
* @angularType string | object
* @reactType string | function | JSX.Element
* @vueType string | function
* @aspType string
*/
cellHeaderTemplate?: string | Function;
/**
* It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the
* date header cells. The field that can be accessed via this template is `date`.
* It gets applied only to the view objects on which it is defined.
*
* @default null
* @aspType string
*/
dateHeaderTemplate?: string | Function;
/**
* It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the header date range.
*
* @default null
* @angularType string | object
* @reactType string | function | JSX.Element
* @vueType string | function
* @aspType string
*/
dateRangeTemplate?: string | Function;
/**
* The template option which is used to render the customized work cells on the Schedule. Here, the
* template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the work cells.
* The field accessible via template is `date`. It gets applied only to the view objects on which it is defined.
*
* @default null
* @angularType string | object
* @reactType string | function | JSX.Element
* @vueType string | function
* @aspType string
*/
cellTemplate?: string | Function;
/**
* It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the
* Year view day cell header.
* This template is only applicable for year view header cells.
*
* @default null
* @angularType string | object
* @reactType string | function | JSX.Element
* @vueType string | function
* @aspType string
*/
dayHeaderTemplate?: string | Function;
/**
* It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the
* Year view day cell header.
* This template is only applicable for year view header cells.
*
* @default null
* @angularType string | object
* @reactType string | function | JSX.Element
* @vueType string | function
* @aspType string
*/
monthHeaderTemplate?: string | Function;
/**
* It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto
* the event background. All the event fields mapped to Schedule from dataSource can be accessed within this template code.
* It is similar to that of the `template` option available within the `eventSettings` property,
* whereas it will get applied only on the events of the view to which it is currently being defined.
*
* @default null
* @angularType string | object
* @reactType string | function | JSX.Element
* @vueType string | function
* @aspType string
*/
eventTemplate?: string | Function;
/**
* When set to `false`, it hides the weekend days of a week from the Schedule.
* The days which are not defined in the working days collection are usually treated as weekend days.
* Note: By default, this option is not applicable on `Work Week` view.
* For example, if the working days are defined as [1, 2, 3, 4], then the remaining days of that week will be considered as the
* weekend days and will be hidden on all the views.
*
* @default true
*/
showWeekend?: boolean;
/**
* When set to `true`, displays the week number of the current view date range.
*
* @default false
*/
showWeekNumber?: boolean;
/**
* When the same view is customized with different intervals, this property allows the user to set different display name
* for those views.
*
* @default null
*/
displayName?: string;
/**
* It accepts the number value denoting to include the number of days, weeks, workweeks or months on the defined view type.
*
* @default 1
*/
interval?: number;
/**
* This option allows the user to set the first day of a week on Schedule. It should be based on the locale set to it and each culture
* defines its own first day of week values. If needed, the user can set it manually on his own by defining the value through
* this property. It usually accepts the integer values, whereby 0 is always denoted as Sunday, 1 as Monday and so on.
*
* @default 0
*/
firstDayOfWeek?: number;
/**
* This property helps render the year view customized months.
* By default, it is set to `0`.
*
* @default 0
*/
firstMonthOfYear?: number;
/**
* This option allows the user to set the number of months count to be displayed on the Schedule.
* {% codeBlock src='schedule/monthsCount/index.md' %}{% endcodeBlock %}
*
* @default 12
* @aspType int
*/
monthsCount?: number;
/**
* It is used to set the working days on schedule. The only days that are defined in this collection will be rendered on the
* `workWeek` view whereas on other views, it will display all the usual days and simply highlights the working days with different
* shade.
*
* @default '[1, 2, 3, 4, 5]'
* @aspType int[]
*/
workDays?: number[];
/**
* The template option which is used to render the customized header cells on the schedule. Here, the
* template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the header cells.
* All the resource fields mapped within resources can be accessed within this template code.
* It gets applied only to the view objects on which it is defined.
*
* @default null
* @angularType string | object
* @reactType string | function | JSX.Element
* @vueType string | function
* @aspType string
*/
resourceHeaderTemplate?: string | Function;
/**
* The template option which is used to render the customized header indent cell on the schedule. Here, the
* template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the header indent cell.
* It gets applied only to the view objects on which it is defined.
*
* @default null
* @angularType string | object
* @reactType string | function | JSX.Element
* @vueType string | function
* @aspType string
*/
headerIndentTemplate?: string | Function;
/**
* By default, Schedule follows the time-format as per the default culture assigned to it.
* It is also possible to manually set specific time format by using the `timeFormat` property.
* {% codeBlock src='schedule/timeFormat/index.md' %}{% endcodeBlock %}
*
* @default null
*/
timeFormat?: string;
/**
* It is used to specify the year view rendering orientation on the schedule.
* The applicable orientation values are,
* * Horizontal - Denotes the horizontal orientation of Timeline Year view.
* * Vertical - Denotes the vertical orientation of Timeline Year view.
*
* @default 'Horizontal'
*/
orientation?: Orientation;
/**
* Allows to set different timescale configuration on each applicable view modes such as day, week and work week.
*
* @default { enable: true, interval: 60, slotCount: 2, majorSlotTemplate: null, minorSlotTemplate: null }
*/
timeScale?: TimeScaleModel;
/**
* Allows to set different resource grouping options on all available schedule view modes.
*
* @default { byDate: false, byGroupID: true, allowGroupEdit: false, resources:[], hideNonWorkingDays: false }
*/
group?: GroupModel;
/**
* Allows defining the collection of custom header rows to display the year, month, week, date and hour label as an individual row
* on the timeline view of the scheduler.
*
* @default []
*/
headerRows?: HeaderRowsModel[];
/**
* This property customizes the number of weeks that are shown in month view. By default, it shows all weeks in the current month.
* Use displayDate property to customize the starting week of month.
* {% codeBlock src='schedule/numberOfWeeks/index.md' %}{% endcodeBlock %}
*
* @default 0
* @aspType int
*/
numberOfWeeks?: number;
/**
* Specifies the starting week date at an initial rendering of month view. This property is only applicable for month view.
* If this property value is not set, then the month view will be rendered from the first week of the month.
* {% codeBlock src='schedule/displayDate/index.md' %}{% endcodeBlock %}
*
* @default null
*/
displayDate?: Date;
/**
* Enables the lazy loading of events for scrolling actions only when the resources grouping property is enabled.
* Lazy loading allows the scheduler to fetch the appointments dynamically during scroll actions for the currently rendered resource collection.
* New event data is fetched on-demand as the user scrolls through the schedule content.
*
* @default false
*/
enableLazyLoading?: boolean;
}