SchedulerComponent

Represents the Kendo UI Scheduler component for Angular.

html

<kendo-scheduler [kendoSchedulerBinding]="events" [selectedDate]="selectedDate">
  <kendo-scheduler-day-view></kendo-scheduler-day-view>
</kendo-scheduler>

Selector

kendo-scheduler

Inputs

Name	Type	Default	Description
allDaySlot	boolean	true	Toggles the visibility of the all-day slot. Applies to Day, Multi-Day, Week, and Work-Week views.
columnWidth	number	100	Sets the column width for Timeline views.
currentTimeMarker	boolean | CurrentTimeSettings	true	Sets the Scheduler current time marker settings.
editable	boolean | EditableSettings	false	Specifies whether the Scheduler is editable. Accepts a boolean or EditableSettings object.
endTime	string	'00:00'	Sets the end time of the view. Accepts a string in HH:mm format. Applies to Day, Week, and Timeline views.
eventClass	(args: EventStyleArgs) => any		Defines a function that is executed for every event in the view. The function returns a value supported by ngClass.
eventHeight	number	25	Sets the height of events in the Month and Timeline views, and the height of All day events in the Day and Week views.
events	any[]		Sets the array of event instances shown by the Scheduler.
eventStyles	(args: EventStyleArgs) => any		Defines a function that is executed for every event in the view. The function returns a value supported by ngStyle.
group	Group		Defines the Scheduler groups.
highlightOngoingEvents	boolean | OngoingEventsSettings	true	Defines the settings for highlighting ongoing events in the Scheduler.
isSlotSelected	(args: IsSlotSelectedArgs) => boolean		A callback that is executed for each slot of the Scheduler view. If it returns true, the k-selected CSS class will be added to the cell, making it visibly selected.
loading	boolean	false	Specifies whether the Scheduler displays a loading indicator.
max	Date		Sets the maximum date that you can select using the Scheduler navigation.
min	Date		Sets the minimum date that you can select using the Scheduler navigation.
modelFields	SchedulerModelFields		Sets the names of the model fields from which the Scheduler reads its data (see example.
resources	Resource[]		Specifies the resources of the Scheduler.
scrollTime	string | Date	'08:00'	Sets the time to which the view initially scrolls. Accepts a string in HH:mm format or a JavaScript Date object. Applies to Day, Week, and Timeline views.
selectable	boolean	false	Specifies whether the Scheduler's day or time slots are selectable (see example). When set to true, the Scheduler emits slotDragStart, slotDrag, and slotDragEnd events on user interaction.
selectedDate	Date		Sets the currently selected date of the Scheduler. Determines the displayed period.
selectedViewIndex	number	0	Sets the index of the currently selected view. The default value is 0, which shows the first declared view.
showFooter	boolean	true	Specifies whether to display the Scheduler footer.
showToolbar	boolean	true	Specifies whether to display the Scheduler toolbar.
showWorkHours	boolean	false	Sets whether the view shows business hours on initialization. By default, the view shows full-day hours. Applies to Day, Week, and Timeline views.
slotClass	(args: SlotClassArgs) => any		Defines a function that is executed for every slot in the view. The function returns a value supported by ngClass.
slotDivisions	number	2	Sets the number of divisions for the time slots. Applies to Day, Week, and Timeline views.
slotDuration	number	60	Sets the duration (in minutes) of the time slots. Applies to Day, Week, and Timeline views.
slotFill	number	0.9	Sets the percentage of the slot filled by events. Accepts a value between 0 and 1. Applies to Day and Week views.
startTime	string	'00:00'	Sets the start time of the view. Accepts a string in HH:mm format. Applies to Day, Week, and Timeline views.
timezone	string	'Etc/UTC'	Sets the timezone ID displayed in the Scheduler. For example, Europe/Sofia.
weekStart	Day		Sets the first day of the week. Applies to Week, Month, and TimelineWeek views. Defaults to the locale settings.
workDayEnd	string	'17:00'	Sets the end time of the view when showWorkHours is true. Accepts a string in HH:mm format. Applies to Day, Week, and Timeline views.
workDayStart	string	'08:00'	Sets the start time of the view when showWorkHours is true. Accepts a string in HH:mm format. Applies to Day, Week, and Timeline views.
workWeekEnd	Day	5	Sets the end of the work week. Applies to Day, Week, and Timeline views.
workWeekStart	Day	1	Sets the start of the work week. Applies to Day, Week, and Timeline views.

Fields

Name	Type	Default	Description
activeEvent	SchedulerEvent		Gets the currently active event, if any. The active event is the event that can currently receive focus.
selectedView	SchedulerView		The currently selected view.

Events

Name	Type	Description
cancel	EventEmitter<CancelEvent>	Fires when the user cancels the editing by clicking the Cancel command button.
create	EventEmitter<CreateEvent>	Emits when the user creates a new event using the 'c' key (see example).
dateChange	EventEmitter<DateChangeEvent>	Emits when the displayed date range in the Scheduler changes.
drag	EventEmitter<DragEvent>	Fires while the user is dragging a Scheduler event.
dragEnd	EventEmitter<DragEndEvent>	Fires when the user stops dragging a Scheduler event.
dragStart	EventEmitter<DragStartEvent>	Fires when the user starts dragging a Scheduler event.
eventClick	EventEmitter<EventClickEvent>	Fires when a Scheduler event is clicked.
eventDblClick	EventEmitter<EventClickEvent>	Fires when a Scheduler event is double-clicked.
eventKeydown	EventEmitter<EventKeydownEvent>	Emits when you press a key on a focused Scheduler event.
navigate	EventEmitter<NavigateEvent>	Emits when the Scheduler is about to perform a navigation action, such as changing the view, date, or focus.
pdfExport	EventEmitter<PDFExportEvent>	Fires when the user clicks the PDF export command button.
remove	EventEmitter<RemoveEvent>	Fires when the user clicks the Remove icon of a Scheduler event.
resize	EventEmitter<ResizeEvent>	Emits while the user is resizing a Scheduler event.
resizeEnd	EventEmitter<ResizeEndEvent>	Fires when the user stops resizing a Scheduler event.
resizeStart	EventEmitter<ResizeStartEvent>	Fires when the user starts resizing a Scheduler event.
save	EventEmitter<SaveEvent>	Fires when the user clicks the Save command button to save the changes of the edited event.
schedulerResize	EventEmitter<number>	Fires when the Scheduler is resized horizontally.
slotClick	EventEmitter<SlotClickEvent>	Emits when a Scheduler view slot is clicked.
slotDblClick	EventEmitter<SlotClickEvent>	Fires when a Scheduler view slot is double-clicked.
slotDrag	EventEmitter<SlotDragEvent>	Fires while the user is drag-selecting a Scheduler slot range.
slotDragEnd	EventEmitter<SlotDragEndEvent>	Fires when the user stops drag-selecting a Scheduler slot range.
slotDragStart	EventEmitter<SlotDragStartEvent>	Fires when the user starts drag-selecting a Scheduler slot range.

Methods

addEvent
Creates a popup editor for the new event.
Parameters group any The FormGroup that describes the edit form. If called with a data item, the parameter will build the FormGroup from the data item fields.

closeEvent
Closes the event editor, if open.

editEvent
Switches the specified event in edit mode.
Parameters dataItem any The event that will be switched to edit mode. options EditEventArgs An object which contains the form group that will be bound in the edit dialog and the current edit mode.

eventFromElement
Returns the event associated with the specified DOM element, if any.
Parameters element Element The DOM element document position.
Returns SchedulerEvent the event instance, if found.

focus
Focuses the last focused scheduler element or the Scheduler element, if no events are available.

focusNext
Focuses the next event or an event at a specified relative position. The options parameter can be used to set a positive or negative offset that is relative to the currently focused event (see example). A nowrap flag toggles the wrapping to the first or to the last item.
Parameters position? FocusPosition The relative position of the event to focus.
Returns boolean true if the focused event changed. Otherwise, returns false.

focusPrev
Focuses the previous event or an event at a specified relative position. The options parameter can be used to set a positive or negative offset that is relative to the currently focused event (see example). A nowrap flag toggles the wrapping to the first or to the last item.
Parameters position FocusPosition The relative position of the event to focus.
Returns boolean true if the focused event changed. Otherwise, returns false.

isEditing
Returns a flag which indicates if an event is currently edited.
Returns boolean A flag which indicates if an event is currently edited.

openRecurringConfirmationDialog
Opens the built-in confirmation dialog for defining the edit mode that will be used when the user edits or removes a recurring event.
Parameters operation CrudOperation The type of operation that will be confirmed. Has to be either Edit or Remove.
Returns Observable<EditMode> the result from the confirmation dialog.

openRemoveConfirmationDialog
Opens the built-in removal confirmation dialog.
Returns Observable<boolean> the result from the confirmation dialog.

saveAsPDF
Saves the current view as PDF.

scrollToTime
Scrolls the view to the specified time.
Parameters time string | Date

slotByPosition
Returns the current view slot that matches the passed document position.
Parameters x number The x document position. y number The y document position.
Returns SchedulerSlot The slot.