@syncfusion/ej2-angular-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. for Angular
1 lines • 91.9 kB
Source Map (JSON)
{"version":3,"file":"syncfusion-ej2-angular-schedule.mjs","sources":["../../src/schedule/views.directive.ts","../../src/schedule/resources.directive.ts","../../src/schedule/headerrows.directive.ts","../../src/schedule/toolbaritems.directive.ts","../../src/schedule/schedule.component.ts","../../src/schedule/schedule.module.ts","../../src/schedule/schedule-all.module.ts","../../src/recurrence-editor/recurrenceeditor.component.ts","../../src/recurrence-editor/recurrenceeditor.module.ts","../../src/recurrence-editor/recurrenceeditor-all.module.ts","../../syncfusion-ej2-angular-schedule.ts"],"sourcesContent":["import { Directive, ViewContainerRef, ContentChildren, ContentChild } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\nimport { Template } from '@syncfusion/ej2-angular-base';\n\n\nlet input: string[] = ['allowOverlap', 'allowVirtualScrolling', 'cellHeaderTemplate', 'cellTemplate', 'dateFormat', 'dateHeaderTemplate', 'dateRangeTemplate', 'dayHeaderTemplate', 'displayDate', 'displayName', 'enableLazyLoading', 'endHour', 'eventTemplate', 'firstDayOfWeek', 'firstMonthOfYear', 'group', 'headerIndentTemplate', 'headerRows', 'interval', 'isSelected', 'maxEventsPerRow', 'monthHeaderTemplate', 'monthsCount', 'numberOfWeeks', 'option', 'orientation', 'overscanCount', 'readonly', 'resourceHeaderTemplate', 'showWeekNumber', 'showWeekend', 'startHour', 'timeFormat', 'timeScale', 'workDays'];\nlet outputs: string[] = [];\n/**\n * `e-views` directive represent a view of the Angular Schedule. \n * It must be contained in a Schedule component(`ejs-schedule`). \n * ```html\n * <ejs-schedule>\n * <e-views>\n * <e-view option='day' dateFormat='dd MMM'></e-view>\n * <e-view option='week'></e-view>\n * </e-views>\n * </ejs-schedule>\n * ```\n */\n@Directive({\n selector: 'e-views>e-view',\n inputs: input,\n outputs: outputs, \n queries: {\n\n }\n})\nexport class ViewDirective extends ComplexBase<ViewDirective> {\n public directivePropList: any;\n\t\n\n\n /** \n * Specifies whether overlapping appointments are allowed within the same time slot in the Scheduler.\n * @remarks When set to `false`, the Scheduler enforces restrictions to prevent creating or displaying overlapping appointments within the same time duration.\nThis setting includes the following limitations:\n\n- **Initial Loading**: The alert for overlapping appointments will not display during the initial load. Overlapping events will be ignored in rendering, including occurrences.\n\n- **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.\n\nFor 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.\n\n- **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.\n\n * @default true\n */\n public allowOverlap: any;\n /** \n * It is used to allow or disallow the virtual scrolling functionality.\n * @default false\n */\n public allowVirtualScrolling: any;\n /** \n * By default, Schedule follows the date-format as per the default culture assigned to it. It is also possible to manually set \n * specific date format by using the `dateFormat` property. The format of the date range label in the header bar depends on \n * the `dateFormat` value or else based on the locale assigned to the Schedule. \n * It gets applied only to the view objects on which it is defined.\n * @default null\n */\n public dateFormat: any;\n /** \n * Specifies the starting week date at an initial rendering of month view. This property is only applicable for month view. \n * If this property value is not set, then the month view will be rendered from the first week of the month. \n * {% codeBlock src='schedule/displayDate/index.md' %}{% endcodeBlock %}\n * @default null\n */\n public displayDate: any;\n /** \n * When the same view is customized with different intervals, this property allows the user to set different display name \n * for those views.\n * @default null\n */\n public displayName: any;\n /** \n * Enables the lazy loading of events for scrolling actions only when the resources grouping property is enabled. \n * Lazy loading allows the scheduler to fetch the appointments dynamically during scroll actions for the currently rendered resource collection. \n * New event data is fetched on-demand as the user scrolls through the schedule content.\n * @default false\n */\n public enableLazyLoading: any;\n /** \n * It is used to specify the end hour, at which the Schedule ends. It too accepts the time string in a short skeleton format.\n * @default '24:00'\n */\n public endHour: any;\n /** \n * 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 \n * defines its own first day of week values. If needed, the user can set it manually on his own by defining the value through \n * this property. It usually accepts the integer values, whereby 0 is always denoted as Sunday, 1 as Monday and so on.\n * @default 0\n */\n public firstDayOfWeek: any;\n /** \n * This property helps render the year view customized months. \n * By default, it is set to `0`.\n * @default 0\n */\n public firstMonthOfYear: any;\n /** \n * Allows to set different resource grouping options on all available schedule view modes.\n * @default { byDate: false, byGroupID: true, allowGroupEdit: false, resources:[], hideNonWorkingDays: false }\n */\n public group: any;\n /** \n * Allows defining the collection of custom header rows to display the year, month, week, date and hour label as an individual row \n * on the timeline view of the scheduler.\n * @default []\n */\n public headerRows: any;\n /** \n * It accepts the number value denoting to include the number of days, weeks, workweeks or months on the defined view type.\n * @default 1\n */\n public interval: any;\n /** \n * To denote whether the view name given on the `option` is active or not. \n * It acts similar to the [`currentView`](../../schedule/#current-view/) \n * property and defines the active view of Schedule.\n * @default false\n */\n public isSelected: any;\n /** \n * Specifies the maximum number of events to be displayed in a single row. \n * This property is applicable when the 'rowAutoHeight' property is disabled. \n * This property is only applicable for the month view, timeline views, and timeline year view.\n * @default null\n */\n public maxEventsPerRow: any;\n /** \n * This option allows the user to set the number of months count to be displayed on the Schedule. \n * {% codeBlock src='schedule/monthsCount/index.md' %}{% endcodeBlock %}\n * @default 12\n * @asptype int\n */\n public monthsCount: any;\n /** \n * This property customizes the number of weeks that are shown in month view. By default, it shows all weeks in the current month. \n * Use displayDate property to customize the starting week of month. \n * {% codeBlock src='schedule/numberOfWeeks/index.md' %}{% endcodeBlock %}\n * @default 0\n * @asptype int\n */\n public numberOfWeeks: any;\n /** \n * It accepts the schedule view name, based on which we can define with its related properties in a single object. \n * The applicable view names are, \n * * Day - Denotes Day view of the scheduler. \n * * Week - Denotes Week view of the scheduler. \n * * WorkWeek - Denotes Work Week view of the scheduler. \n * * Month - Denotes Month view of the scheduler. \n * * Year - Denotes Year view of the scheduler. \n * * Agenda - Denotes Agenda view of the scheduler. \n * * MonthAgenda - Denotes Month Agenda view of the scheduler. \n * * TimelineDay - Denotes Timeline Day view of the scheduler. \n * * TimelineWeek - Denotes Timeline Week view of the scheduler. \n * * TimelineWorkWeek - Denotes Timeline Work Week view of the scheduler. \n * * TimelineMonth - Denotes Timeline Month view of the scheduler. \n * * TimelineYear - Denotes Timeline Year view of the scheduler.\n * @default null\n */\n public option: any;\n /** \n * It is used to specify the year view rendering orientation on the schedule. \n * The applicable orientation values are, \n * * Horizontal - Denotes the horizontal orientation of Timeline Year view. \n * * Vertical - Denotes the vertical orientation of Timeline Year view.\n * @default 'Horizontal'\n */\n public orientation: any;\n /** \n * Specifies the number of additional rows or columns to render outside the visible area during virtual scrolling. \n * This property helps in achieving smoother scrolling by pre-loading data just outside the visible region.\n * @remarks The default value is 3. Increasing this value can result in smoother scrolling but may impact performance\nwith larger datasets. Decreasing it can improve performance but may cause more frequent data fetches during scrolling.\nThis property only takes effect when `allowVirtualScrolling` is enabled for the current view.\n\n * @default 3\n */\n public overscanCount: any;\n /** \n * When set to `true`, displays a quick popup with cell or event details on single clicking over the cells or on events. \n * By default, it is set to `true`. It gets applied only to the view objects on which it is defined.\n * @default false\n */\n public readonly: any;\n /** \n * When set to `true`, displays the week number of the current view date range.\n * @default false\n */\n public showWeekNumber: any;\n /** \n * When set to `false`, it hides the weekend days of a week from the Schedule. \n * The days which are not defined in the working days collection are usually treated as weekend days. \n * Note: By default, this option is not applicable on `Work Week` view. \n * 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 \n * weekend days and will be hidden on all the views.\n * @default true\n */\n public showWeekend: any;\n /** \n * It is used to specify the starting hour, from which the Schedule starts to display. \n * It accepts the time string in a short skeleton format and also, hides the time beyond the specified start time.\n * @default '00:00'\n */\n public startHour: any;\n /** \n * By default, Schedule follows the time-format as per the default culture assigned to it. \n * It is also possible to manually set specific time format by using the `timeFormat` property. \n * {% codeBlock src='schedule/timeFormat/index.md' %}{% endcodeBlock %}\n * @default null\n */\n public timeFormat: any;\n /** \n * Allows to set different timescale configuration on each applicable view modes such as day, week and work week.\n * @default { enable: true, interval: 60, slotCount: 2, majorSlotTemplate: null, minorSlotTemplate: null }\n */\n public timeScale: any;\n /** \n * It is used to set the working days on schedule. The only days that are defined in this collection will be rendered on the \n * `workWeek` view whereas on other views, it will display all the usual days and simply highlights the working days with different \n * shade.\n * @default '[1, 2, 3, 4, 5]'\n * @asptype int[]\n */\n public workDays: any;\n /** \n * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the \n * date header cells. The field that can be accessed via this template is `date`. \n * It gets applied only to the view objects on which it is defined.\n * @default null\n * @asptype string\n */\n @ContentChild('dateHeaderTemplate')\n @Template()\n public dateHeaderTemplate: any;\n /** \n * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the header date range.\n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('dateRangeTemplate')\n @Template()\n public dateRangeTemplate: any;\n /** \n * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the \n * Year view day cell header. \n * This template is only applicable for year view header cells.\n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('dayHeaderTemplate')\n @Template()\n public dayHeaderTemplate: any;\n /** \n * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the \n * month date cells. \n * This template is only applicable for month view day cells.\n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('cellHeaderTemplate')\n @Template()\n public cellHeaderTemplate: any;\n /** \n * The template option which is used to render the customized work cells on the Schedule. Here, the \n * template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the work cells. \n * The field accessible via template is `date`. It gets applied only to the view objects on which it is defined.\n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('cellTemplate')\n @Template()\n public cellTemplate: any;\n /** \n * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto \n * the event background. All the event fields mapped to Schedule from dataSource can be accessed within this template code. \n * It is similar to that of the `template` option available within the `eventSettings` property, \n * whereas it will get applied only on the events of the view to which it is currently being defined.\n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('eventTemplate')\n @Template()\n public eventTemplate: any;\n /** \n * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the \n * Year view day cell header. \n * This template is only applicable for year view header cells.\n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('monthHeaderTemplate')\n @Template()\n public monthHeaderTemplate: any;\n /** \n * The template option which is used to render the customized header cells on the schedule. Here, the \n * template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the header cells. \n * All the resource fields mapped within resources can be accessed within this template code. \n * It gets applied only to the view objects on which it is defined.\n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('resourceHeaderTemplate')\n @Template()\n public resourceHeaderTemplate: any;\n /** \n * The template option which is used to render the customized header indent cell on the schedule. Here, the \n * template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the header indent cell. \n * It gets applied only to the view objects on which it is defined.\n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('headerIndentTemplate')\n @Template()\n public headerIndentTemplate: any;\n @ContentChild('timeScaleMinorSlotTemplate')\n @Template()\n public timeScale_minorSlotTemplate: any;\n @ContentChild('timeScaleMajorSlotTemplate')\n @Template()\n public timeScale_majorSlotTemplate: any;\n @ContentChild('groupHeaderTooltipTemplate')\n @Template()\n public group_headerTooltipTemplate: any;\n\n constructor(private viewContainerRef:ViewContainerRef) {\n super();\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs);\n this.directivePropList = input;\n }\n}\n\n/**\n * View Array Directive\n * @private\n */\n@Directive({\n selector: 'ejs-schedule>e-views',\n queries: {\n children: new ContentChildren(ViewDirective)\n },\n})\nexport class ViewsDirective extends ArrayBase<ViewsDirective> {\n constructor() {\n super('views');\n }\n}","import { Directive, ViewContainerRef, ContentChildren } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\n\n\n\nlet input: string[] = ['allowMultiple', 'colorField', 'cssClassField', 'dataSource', 'endHourField', 'expandedField', 'field', 'groupIDField', 'idField', 'name', 'query', 'startHourField', 'textField', 'title', 'workDaysField'];\nlet outputs: string[] = [];\n/**\n * `e-resources` directive represent a resources of the Angular Schedule. \n * It must be contained in a Schedule component(`ejs-schedule`). \n * ```html\n * <ejs-schedule>\n * <e-resources>\n * <e-resource field='RoomId' name='Rooms'></e-resource>\n * <e-resource field='OwnerId' name='Owners'></e-resource>\n * </e-resources>\n * </ejs-schedule>\n * ```\n */\n@Directive({\n selector: 'e-resources>e-resource',\n inputs: input,\n outputs: outputs, \n queries: {\n\n }\n})\nexport class ResourceDirective extends ComplexBase<ResourceDirective> {\n public directivePropList: any;\n\t\n\n\n /** \n * When set to true, allows multiple selection of resource names, thus creating multiple instances of same appointment for the \n * selected resources.\n * @default false\n */\n public allowMultiple: any;\n /** \n * It maps the `color` field from the dataSource, which is used to specify colors for the resources.\n * @default 'Color'\n */\n public colorField: any;\n /** \n * It maps the `cssClass` field from the dataSource, which is used to specify different styles to each resource appointments.\n * @default 'CssClass'\n */\n public cssClassField: any;\n /** \n * Assigns the resource dataSource \n * The data can be passed either as an array of JavaScript objects, \n * or else can create an instance of [`DataManager`](http://ej2.syncfusion.com/documentation/data/api-dataManager.html) \n * in case of processing remote data and can be assigned to the `dataSource` property. \n * With the remote data assigned to dataSource, check the available \n * [adaptors](http://ej2.syncfusion.com/documentation/data/adaptors.html) to customize the data processing.\n * @default []\n */\n public dataSource: any;\n /** \n * It maps the `endHour` field from the dataSource, which is used to specify different work end hour for each resources.\n * @default 'EndHour'\n */\n public endHourField: any;\n /** \n * It maps the `expanded` field from the dataSource, which is used to specify whether each resource levels \n * in timeline view needs to be maintained in an expanded or collapsed state by default.\n * @default 'Expanded'\n */\n public expandedField: any;\n /** \n * A value that binds to the resource field of event object.\n * @default null\n */\n public field: any;\n /** \n * It maps the `groupID` field from the dataSource, which is used to specify under which parent resource, \n * the child should be grouped.\n * @default 'GroupID'\n */\n public groupIDField: any;\n /** \n * It maps the `id` field from the dataSource and is used to uniquely identify the resources.\n * @default 'Id'\n */\n public idField: any;\n /** \n * It represents a unique resource name for differentiating various resource objects while grouping.\n * @default null\n */\n public name: any;\n /** \n * Defines the external [`query`](http://ej2.syncfusion.com/documentation/data/api-query.html) \n * that will be executed along with the data processing.\n * @default null\n */\n public query: any;\n /** \n * It maps the `startHour` field from the dataSource, which is used to specify different work start hour for each resources.\n * @default 'StartHour'\n */\n public startHourField: any;\n /** \n * It maps the `text` field from the dataSource, which is used to specify the resource names.\n * @default 'Text'\n */\n public textField: any;\n /** \n * It holds the title of the resource field to be displayed on the schedule event editor window.\n * @default null\n */\n public title: any;\n /** \n * It maps the working days field from the dataSource, which is used to specify different working days for each resources.\n * @default 'WorkDays'\n */\n public workDaysField: any;\n\n constructor(private viewContainerRef:ViewContainerRef) {\n super();\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs);\n this.directivePropList = input;\n }\n}\n\n/**\n * Resource Array Directive\n * @private\n */\n@Directive({\n selector: 'ejs-schedule>e-resources',\n queries: {\n children: new ContentChildren(ResourceDirective)\n },\n})\nexport class ResourcesDirective extends ArrayBase<ResourcesDirective> {\n constructor() {\n super('resources');\n }\n}","import { Directive, ViewContainerRef, ContentChildren, ContentChild } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\nimport { Template } from '@syncfusion/ej2-angular-base';\n\n\nlet input: string[] = ['option', 'template'];\nlet outputs: string[] = [];\n/**\n * `e-header-rows` directive represent a header rows of the Schedule. \n * It must be contained in a Schedule component(`ejs-schedule`). \n * ```html\n * <ejs-schedule>\n * <e-header-rows>\n * <e-header-row option='Week'></e-header-row>\n * <e-header-row option='Date'></e-header-row>\n * </e-header-rows>\n * </ejs-schedule>\n * ```\n */\n@Directive({\n selector: 'e-header-rows>e-header-row',\n inputs: input,\n outputs: outputs, \n queries: {\n\n }\n})\nexport class HeaderRowDirective extends ComplexBase<HeaderRowDirective> {\n public directivePropList: any;\n\t\n\n\n /** \n * It defines the header row type, which accepts either of the following values. \n * * `Year`: Denotes the year row in the header bar. \n * * `Month`: Denotes the month row in the header bar. \n * * `Week`: Denotes the week row in the header bar. \n * * `Date`: Denotes the date row in the header bar. \n * * `Hour`: Denotes the hour row in the header bar.\n * @default null\n */\n public option: any;\n /** \n * Template option to customize the individual header rows. It accepts either the string or HTMLElement as template design \n * content and parse it appropriately before displaying it onto the header cells. The field that \n * can be accessed via this template is `date`.\n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('template')\n @Template()\n public template: any;\n\n constructor(private viewContainerRef:ViewContainerRef) {\n super();\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs);\n this.directivePropList = input;\n }\n}\n\n/**\n * HeaderRow Array Directive\n * @private\n */\n@Directive({\n selector: 'ejs-schedule>e-header-rows',\n queries: {\n children: new ContentChildren(HeaderRowDirective)\n },\n})\nexport class HeaderRowsDirective extends ArrayBase<HeaderRowsDirective> {\n constructor() {\n super('headerrows');\n }\n}","import { Directive, ViewContainerRef, ContentChildren, ContentChild } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\nimport { Template } from '@syncfusion/ej2-angular-base';\n\n\nlet input: string[] = ['align', 'cssClass', 'disabled', 'htmlAttributes', 'id', 'name', 'overflow', 'prefixIcon', 'showAlwaysInPopup', 'showTextOn', 'suffixIcon', 'tabIndex', 'template', 'text', 'tooltipText', 'type', 'visible', 'width'];\nlet outputs: string[] = ['click'];\n/**\n * `e-toolbaritems` directive represent a custom toolbar items of the Schedule. \n * It must be contained in a Schedule component(`ejs-schedule`). \n * ```html\n * <ejs-schedule>\n * <e-toolbaritems>\n * <e-toolbaritem name='Today'></<e-toolbaritem>\n * <e-toolbaritem name='DateRangeText'></e-toolbaritem>\n * <e-toolbaritem prefixIcon='e-icons e-cut' text='Cut'></e-toolbaritem>\n * <e-toolbaritems>\n * </ejs-schedule>\n * ```\n */\n@Directive({\n selector: 'e-toolbaritems>e-toolbaritem',\n inputs: input,\n outputs: outputs, \n queries: {\n\n }\n})\nexport class ToolbarItemDirective extends ComplexBase<ToolbarItemDirective> {\n public directivePropList: any;\n\tpublic click: any;\n\n\n /** \n * Specifies the types of command to be rendered in the Toolbar. \n * Supported types are: \n * * `Button`: Creates the Button control with its given properties like text, prefixIcon, etc. \n * * `Separator`: Adds a horizontal line that separates the Toolbar commands. \n * * `Input`: Creates an input element that is applicable to template rendering with Syncfusion controls like DropDownList, \n * AutoComplete, etc.\n * @default 'Button'\n * @aspdefaultvalue Syncfusion.EJ2.Navigations.ItemType.Button\n * @isenumeration true\n * @asptype Syncfusion.EJ2.Navigations.ItemType\n */\n public type: any;\n /** \n * Specifies the location for aligning Toolbar items on the Toolbar. Each command will be aligned according to the `align` property. \n * The possible values for this property as follows \n * * `Left`: To align commands to the left side of the Toolbar. \n * * `Center`: To align commands at the center of the Toolbar. \n * * `Right`: To align commands to the right side of the Toolbar.\n * @default 'Left'\n * @aspdefaultvalue Syncfusion.EJ2.Navigations.ItemAlign.Left\n * @isenumeration true\n * @asptype Syncfusion.EJ2.Navigations.ItemAlign\n */\n public align: any;\n /** \n * Defines single/multiple classes (separated by space) to be used for customization of commands.\n * @default \"\"\n */\n public cssClass: any;\n /** \n * Specifies whether an item should be disabled or not.\n * @default false\n */\n public disabled: any;\n /** \n * Defines htmlAttributes used to add custom attributes to Toolbar command. \n * Supports HTML attributes such as style, class, etc.\n * @default null\n */\n public htmlAttributes: any;\n /** \n * Specifies the unique ID to be used with button or input element of Toolbar items.\n * @default \"\"\n */\n public id: any;\n /** \n * Specifies the unique name for each toolbar item rendered in Schedule. This name is used to map the toolbar items in the Schedule component.\n * \n * To access the default toolbar items, provide the name below,\n *\n ** `Custom`: Schedule component render the custom toolbar item.\n ** `Previous`: Schedule component navigates to the previous date from the current date.\n ** `Next`: Schedule component navigates to the next date from the current date.\n ** `Today`: Schedule component navigates to the current date from any date.\n ** `Views`: Schedule component render the defined view options in the toolbar. If view option is not defined, then it will render default view options in the Schedule.\n ** `DateRangeText`: Schedule component displays the current date text range.\n ** `NewEvent`: Schedule component render the icon to add a new event.\n * \n * @default 'Custom'\n * @aspdefaultvalue Custom\n * @isenumeration true\n * @asptype ToolbarName\n */\n public name: any;\n /** \n * Specifies the Toolbar command display area when an element's content is too large to fit available space. \n * This is applicable only to `popup` mode. The possible values for this property as follows \n * * `Show`: Always shows the item as the primary priority on the *Toolbar*. \n * * `Hide`: Always shows the item as the secondary priority on the *popup*. \n * * `None`: No priority for display, and as per normal order moves to popup when content exceeds.\n * @default 'None'\n * @aspdefaultvalue Syncfusion.EJ2.Navigations.OverflowOption.None\n * @isenumeration true\n * @asptype Syncfusion.EJ2.Navigations.OverflowOption\n */\n public overflow: any;\n /** \n * Defines single/multiple classes separated by space used to specify an icon for the button. \n * The icon will be positioned before the text content if text is available, otherwise the icon alone will be rendered.\n * @default \"\"\n */\n public prefixIcon: any;\n /** \n * Defines the priority of items to display it in popup always. \n * It allows to maintain toolbar item on popup always but it does not work for toolbar priority items.\n * @default false\n */\n public showAlwaysInPopup: any;\n /** \n * Specifies where the button text will be displayed on *popup mode* of the Toolbar. \n * The possible values for this property as follows \n * * `Toolbar`: Text will be displayed on *Toolbar* only. \n * * `Overflow`: Text will be displayed only when content overflows to *popup*. \n * * `Both`: Text will be displayed on *popup* and *Toolbar*.\n * @default 'Both'\n * @aspdefaultvalue Syncfusion.EJ2.Navigations.DisplayMode.Both\n * @isenumeration true\n * @asptype Syncfusion.EJ2.Navigations.DisplayMode\n */\n public showTextOn: any;\n /** \n * Defines single/multiple classes separated by space used to specify an icon for the button. \n * The icon will be positioned after the text content if text is available.\n * @default \"\"\n */\n public suffixIcon: any;\n /** \n * Specifies the tab order of the Toolbar items. When positive values assigned, it allows to switch focus to the next/previous toolbar items with Tab/ShiftTab keys. \n * By default, user can able to switch between items only via arrow keys. \n * If the value is set to 0 for all tool bar items, then tab switches based on element order.\n * @default -1\n */\n public tabIndex: any;\n /** \n * Specifies the text to be displayed on the Toolbar button.\n * @default \"\"\n */\n public text: any;\n /** \n * Specifies the text to be displayed on hovering the Toolbar button.\n * @default \"\"\n */\n public tooltipText: any;\n /** \n * Specifies whether an item should be hidden or not.\n * @default true\n */\n public visible: any;\n /** \n * Specifies the width of the Toolbar button commands.\n * @default 'auto'\n */\n public width: any;\n /** \n * Specifies the HTML element/element ID as a string that can be added as a Toolbar command. \n * \n * @default \"\"\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('template')\n @Template()\n public template: any;\n\n constructor(private viewContainerRef:ViewContainerRef) {\n super();\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs);\n this.directivePropList = input;\n }\n}\n\n/**\n * ToolbarItem Array Directive\n * @private\n */\n@Directive({\n selector: 'ejs-schedule>e-toolbaritems',\n queries: {\n children: new ContentChildren(ToolbarItemDirective)\n },\n})\nexport class ToolbarItemsDirective extends ArrayBase<ToolbarItemsDirective> {\n constructor() {\n super('toolbaritems');\n }\n}","import { Component, ElementRef, ViewContainerRef, ChangeDetectionStrategy, QueryList, Renderer2, Injector, ValueProvider, ContentChild } from '@angular/core';\nimport { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, setValue } from '@syncfusion/ej2-angular-base';\nimport { Schedule } from '@syncfusion/ej2-schedule';\nimport { Template } from '@syncfusion/ej2-angular-base';\nimport { ViewsDirective } from './views.directive';\nimport { ResourcesDirective } from './resources.directive';\nimport { HeaderRowsDirective } from './headerrows.directive';\nimport { ToolbarItemsDirective } from './toolbaritems.directive';\n\nexport const inputs: string[] = ['agendaDaysCount','allowClipboard','allowDragAndDrop','allowInline','allowKeyboardInteraction','allowMultiCellSelection','allowMultiDrag','allowMultiRowSelection','allowOverlap','allowResizing','allowSwiping','calendarMode','cellHeaderTemplate','cellTemplate','cssClass','currentView','dateFormat','dateHeaderTemplate','dateRangeTemplate','dayHeaderTemplate','editorFooterTemplate','editorHeaderTemplate','editorTemplate','enableAdaptiveUI','enableAllDayScroll','enableHtmlSanitizer','enablePersistence','enableRecurrenceValidation','enableRtl','endHour','eventDragArea','eventSettings','firstDayOfWeek','firstMonthOfYear','group','headerIndentTemplate','headerRows','height','hideEmptyAgendaDays','locale','maxDate','minDate','monthHeaderTemplate','monthsCount','overscanCount','quickInfoOnSelectionEnd','quickInfoTemplates','readonly','resourceHeaderTemplate','resources','rowAutoHeight','selectedDate','showHeaderBar','showQuickInfo','showTimeIndicator','showWeekNumber','showWeekend','startHour','timeFormat','timeScale','timezone','timezoneDataSource','toolbarItems','views','weekRule','width','workDays','workHours'];\nexport const outputs: string[] = ['actionBegin','actionComplete','actionFailure','beforePaste','beforePrint','cellClick','cellDoubleClick','created','dataBinding','dataBound','destroyed','drag','dragStart','dragStop','eventClick','eventDoubleClick','eventRendered','excelExport','hover','moreEventsClick','navigating','popupClose','popupOpen','renderCell','resizeStart','resizeStop','resizing','select','tooltipOpen','virtualScrollStart','virtualScrollStop','currentViewChange','selectedDateChange'];\nexport const twoWays: string[] = ['currentView', 'selectedDate'];\n\n/**\n * `ej-schedule` represents the Angular Schedule Component.\n * ```html\n * <ejs-schedule></ejs-schedule>\n * ```\n */\n@Component({\n selector: 'ejs-schedule',\n inputs: inputs,\n outputs: outputs,\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n queries: {\n childViews: new ContentChild(ViewsDirective), \n childResources: new ContentChild(ResourcesDirective), \n childHeaderRows: new ContentChild(HeaderRowsDirective), \n childToolbarItems: new ContentChild(ToolbarItemsDirective)\n }\n})\n@ComponentMixins([ComponentBase])\nexport class ScheduleComponent extends Schedule implements IComponentBase {\n public context : any;\n public tagObjects: any;\n\tactionBegin: any;\n\tactionComplete: any;\n\tactionFailure: any;\n\tbeforePaste: any;\n\tbeforePrint: any;\n\tcellClick: any;\n\tcellDoubleClick: any;\n\tcreated: any;\n\tdataBinding: any;\n\tdataBound: any;\n\tdestroyed: any;\n\tdrag: any;\n\tdragStart: any;\n\tdragStop: any;\n\teventClick: any;\n\teventDoubleClick: any;\n\teventRendered: any;\n\texcelExport: any;\n\thover: any;\n\tmoreEventsClick: any;\n\tnavigating: any;\n\tpopupClose: any;\n\tpopupOpen: any;\n\trenderCell: any;\n\tresizeStart: any;\n\tresizeStop: any;\n\tresizing: any;\n\tselect: any;\n\ttooltipOpen: any;\n\tvirtualScrollStart: any;\n\tvirtualScrollStop: any;\n\tcurrentViewChange: any;\n\tpublic selectedDateChange: any;\n public childViews: QueryList<ViewsDirective>;\n public childResources: QueryList<ResourcesDirective>;\n public childHeaderRows: QueryList<HeaderRowsDirective>;\n public childToolbarItems: QueryList<ToolbarItemsDirective>;\n public tags: string[] = ['views', 'resources', 'headerRows', 'toolbarItems'];\n /** \n * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto \n * the date header cells. The field that can be accessed via this template is `date`.\n * \n * {% codeBlock src='schedule/dateHeaderTemplate/index.md' %}{% endcodeBlock %}\n * \n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('dateHeaderTemplate')\n @Template()\n public dateHeaderTemplate: any;\n /** \n * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the header date range.\n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('dateRangeTemplate')\n @Template()\n public dateRangeTemplate: any;\n /** \n * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto \n * the day header cells. This template is only applicable for year view header cells.\n * \n * {% codeBlock src='schedule/dayHeaderTemplate/index.md' %}{% endcodeBlock %}\n * \n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('dayHeaderTemplate')\n @Template()\n public dayHeaderTemplate: any;\n /** \n * The template option which is used to render the customized work cells on the Schedule. Here, the template accepts either \n * the string or HTMLElement as template design and then the parsed design is displayed onto the work cells. \n * The fields accessible via template are as follows. \n * * `date`: Returns the date of the cell. \n * * `groupIndex`: Returns the group index of the cell. \n * * `type`: Returns the type of the work cell.\n * \n * Refer to the below code snippet.\n *\n *{% codeBlock src='schedule/cellTemplate/index.md' %}{% endcodeBlock %}\n * \n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('cellTemplate')\n @Template()\n public cellTemplate: any;\n /** \n * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto \n * the month date cells. This template is only applicable for month view day cells.\n * \n * {% codeBlock src='schedule/cellHeaderTemplate/index.md' %}{% endcodeBlock %}\n * \n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('cellHeaderTemplate')\n @Template()\n public cellHeaderTemplate: any;\n @ContentChild('eventSettingsTooltipTemplate')\n @Template()\n public eventSettings_tooltipTemplate: any;\n @ContentChild('eventSettingsTemplate')\n @Template()\n public eventSettings_template: any;\n /** \n * The template option to render the customized editor window. The form elements defined within this template should be accompanied \n * with `e-field` class, so as to fetch and process it from internally.\n * \n * {% codeBlock src='schedule/editorTemplate/index.md' %}{% endcodeBlock %}\n * \n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('editorTemplate')\n @Template()\n public editorTemplate: any;\n /** \n * The template option to render the customized header of the editor window.\n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('editorHeaderTemplate')\n @Template()\n public editorHeaderTemplate: any;\n /** \n * The template option to render the customized footer of the editor window.\n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('editorFooterTemplate')\n @Template()\n public editorFooterTemplate: any;\n /** \n * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto \n * the month header cells. This template is only applicable for year view header cells.\n * \n * {% codeBlock src='schedule/monthHeaderTemplate/index.md' %}{% endcodeBlock %}\n * \n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('monthHeaderTemplate')\n @Template()\n public monthHeaderTemplate: any;\n @ContentChild('timeScaleMinorSlotTemplate')\n @Template()\n public timeScale_minorSlotTemplate: any;\n @ContentChild('timeScaleMajorSlotTemplate')\n @Template()\n public timeScale_majorSlotTemplate: any;\n /** \n * Template option to customize the resource header bar. Here, the template accepts either \n * the string or HTMLElement as template design and then the parsed design is displayed onto the resource header cells. \n * The following can be accessible via template. \n * * `resource` - All the resource fields. \n * * `resourceData` - Object collection of current resource.\n * \n * Refer to the below code snippet.\n *\n *{% codeBlock src='schedule/resourceHeaderTemplate/index.md' %}{% endcodeBlock %}\n * \n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('resourceHeaderTemplate')\n @Template()\n public resourceHeaderTemplate: any;\n /** \n * Template option to customize the header indent bar. Here, the template accepts either \n * the string or HTMLElement as template design and then the parsed design is displayed onto the header indent cell.\n * \n * Refer to the below code snippet.\n *\n *{% codeBlock src='schedule/headerIndentTemplate/index.md' %}{% endcodeBlock %}\n * \n * @default null\n * @angulartype string | object\n * @reacttype string | function | JSX.Element\n * @vuetype string | function\n * @asptype string\n */\n @ContentChild('headerIndentTemplate')\n @Template()\n public headerIndentTemplate: any;\n @ContentChild('quickInfoTemplatesHeader')\n @Template()\n public quickInfoTemplates_header: any;\n @ContentChild('quickInfoTemplatesContent')\n @Template()\n public quickInfoTemplates_content: any;\n @ContentChild('quickInfoTemplatesFooter')\n @Template()\n public quickInfoTemplates_footer: any;\n @ContentChild('groupHeaderTooltipTemplate')\n @Template()\n public group_headerTooltipTemplate: any;\n\n constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector) {\n super();\n this.element = this.ngEle.nativeElement;\n this.injectedModules = this.injectedModules || [];\n try {\n let mod = this.injector.get('ScheduleDay');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('ScheduleWeek');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('ScheduleWorkWeek');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('ScheduleMonth');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('ScheduleYear');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('ScheduleAgenda');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('ScheduleMonthAgenda');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('ScheduleTimelineViews');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('ScheduleTimelineMonth');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('ScheduleTimelineYear');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('ScheduleResize');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('ScheduleDragAndDrop');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('ScheduleExcelExport');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('ScheduleICalendarExport');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('ScheduleICalendarImport');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n