SchedulerComponent

Represents the Kendo UI Scheduler component for Angular.

Copy Code@Component({
   selector: 'my-app',
   template: `
       <kendo-scheduler style="height: 600px">
           <kendo-scheduler-day-view>
           </kendo-scheduler-day-view>
           <kendo-scheduler-week-view>
           </kendo-scheduler-week-view>
       </kendo-scheduler>
   `
})
class AppComponent {}

Selector

kendo-scheduler

Inputs

columnWidth

Specifies the columns width. Applicable for the Timeline views.

currentTimeMarker

Specifies the Scheduler current time marker settings.

editable

Specifies if the Scheduler is editable.

endTime

The end time of the view. The Scheduler displays events which end before the end time. Accepts string values in the HH:mm format. Applicable for the Day, Week, and Timeline views.

eventClass

Defines a function that is executed for every event in the view. The function returns a value which is supported by ngClass.

Copy Codeimport { Component, ViewEncapsulation } from '@angular/core';
import { EventStyleArgs, SchedulerEvent } from '@progress/kendo-angular-scheduler';

@Component({
   selector: 'my-app',
   encapsulation: ViewEncapsulation.None,
   styles: [`
     .morning.k-event {
       background-color: steelblue;
     }
   `],
   template: `
       <kendo-scheduler [selectedDate]="selectedDate"
                        [kendoSchedulerBinding]="events"
                        [eventClass]="getEventClass"
                        style="height: 600px">
           <kendo-scheduler-day-view>
           </kendo-scheduler-day-view>
           <kendo-scheduler-week-view>
           </kendo-scheduler-week-view>
       </kendo-scheduler>
   `
})
export class AppComponent {
  public selectedDate: Date = new Date('2018-10-22T00:00:00');
  public events: SchedulerEvent[] = [{
      id: 1,
      title: 'Breakfast',
      start: new Date('2018-10-22T09:00:00'),
      end: new Date('2018-10-22T09:30:00'),
      type: 'morning'
  }];
  // Use an arrow function to capture the 'this' execution context of the class.
  public getEventClass = (args: EventStyleArgs) => {
    return args.event.dataItem.type;
  }
}

eventHeight

The height of the events in the Month and Timeline views, and the height of the All day events in the Day and Week views.

eventStyles

Defines a function that is executed for every event in the view. The function returns a value which is supported by ngStyle.

Copy Codeimport { Component } from '@angular/core';
import { EventStyleArgs, SchedulerEvent } from '@progress/kendo-angular-scheduler';

@Component({
   selector: 'my-app',
   template: `
       <kendo-scheduler [selectedDate]="selectedDate"
                        [kendoSchedulerBinding]="events"
                        [eventStyles]="getEventStyles"
                        style="height: 600px">
           <kendo-scheduler-day-view>
           </kendo-scheduler-day-view>
           <kendo-scheduler-week-view>
           </kendo-scheduler-week-view>
       </kendo-scheduler>
   `
})
export class AppComponent {
  public selectedDate: Date = new Date('2018-10-22T00:00:00');
  public events: SchedulerEvent[] = [{
      id: 1,
      title: 'Breakfast',
      start: new Date('2018-10-22T09:00:00'),
      end: new Date('2018-10-22T09:30:00'),
      color: 'steelblue'
  }];
  // Use an arrow function to capture the 'this' execution context of the class.
  public getEventStyles = (args: EventStyleArgs) => {
    return { backgroundColor: args.event.dataItem.color };
  }
}

group

Specifies the groups of the Scheduler.

loading

Specifies if the Scheduler will display a loading indicator.

max

The maximum date that can be selected by using the navigation of the Scheduler.

min

The minimum date that can be selected by using the navigation of the Scheduler.

resources

Specifies the resources of the Scheduler.

scrollTime

The time to which the view will initially be scrolled. Accepts string values in the HH:mm format or a JavaScript Date. Applicable for the Day, Week, and Timeline views.

showWorkHours

If set to true, the view will be initially shown in the business-hours mode. By default, the view is displayed in the full-day mode. Applicable for the Day, Week, and Timeline views.

slotClass

Defines a function that is executed for every slot in the view. The function returns a value which is supported by ngClass.

Copy Codeimport { Component, ViewEncapsulation } from '@angular/core';
import { SlotClassArgs } from '@progress/kendo-angular-scheduler';

@Component({
   selector: 'my-app',
   encapsulation: ViewEncapsulation.None,
   styles: [`
     .k-scheduler .evening {
       background-color: steelblue;
     }
   `],
   template: `
       <kendo-scheduler [slotClass]="getSlotClass"
                        style="height: 600px">
           <kendo-scheduler-day-view>
           </kendo-scheduler-day-view>
           <kendo-scheduler-week-view>
           </kendo-scheduler-week-view>
       </kendo-scheduler>
   `
})
export class AppComponent {
  // Use an arrow function to capture the 'this' execution context of the class.
  public getSlotClass = (args: SlotClassArgs) => {
    const hour = args.start.getHours();

    return {
      evening: !args.isAllDay && (hour < 6 || hour > 19)
    };
  }
}

slotDivisions

The number of divisions of the time slots. Applicable for the Day, Week, and Timeline views.

slotDuration

The duration (in minutes) of the time slots. Applicable for the day, week and timeline views.

slotFill

A numeric value between 0 and 1 that specifies what percentage of the slot will be filled by the events. Applicable for the Day and Week views. Defaults to 0.9 (90% fill).

startTime

The start time of the view. The Scheduler displays events which start after the start time. Accepts string values in the HH:mm format. Applicable for the Day, Week, and Timeline views.

workDayEnd

The end time of the view when showWorkHours is set to true. Accepts string values in the HH:mm format. Applicable for the Day, Week, and Timeline views.

workDayStart

The start time of the view when showWorkHours is set to true. Accepts string values in the HH:mm format. Applicable for the Day, Week, and Timeline views.

workWeekEnd

The end of the work week. Applicable for the Day, Week, and Timeline views.

workWeekStart

The start of the work week. Applicable for the Day, Week, and Timeline views.

events

An array of event instances which will be shown by the Scheduler.

modelFields

The names of the model fields from which the Scheduler will read its data (see example).

selectedDate

The currently selected date of the Scheduler. Determines the period which is displayed.

selectedViewIndex

The index of the currently selected view.

By default, the selected view index is 0 and indicates that the first declared view is visible.

timezone

Specifies the id of the timezone that will be displayed in the Scheduler. For example, Europe/Sofia. Defaults to Etc/UTC.

weekStart

The first day of the week. Applicable to Week, Month and TimelineWeek views. Defaults to the locale settings.

Fields

selectedView

The currently selected view.

activeEvent

Gets the currently active event, if any. The active event is the event that can currently receive focus.

Events

cancel

Fires when the user cancels the editing by clicking the Cancel command button.

create

Fires when the user creates a new event using the 'c' key. (see example).

dateChange

Fires when the date range that is displayed in the Scheduler changes.

drag

Fires when the user is dragging a Scheduler event.

dragEnd

Fires when the user stops dragging a Scheduler event.

dragStart

Fires when the user starts dragging a Scheduler event.

eventClick

Fires when a Scheduler event is clicked.

eventDblClick

Fires when a Scheduler event is double-clicked.

eventKeydown

Fires when a key is pressed on a focused Scheduler event.

navigate

Fires when the Scheduler is about to execute a navigation action (a view, date, or focus change).

pdfExport

Fires when the user clicks the PDF export command button.

remove

Fires when the user clicks the Remove icon of a Scheduler event.

resize

Fires when the user is resizing a Scheduler event.

resizeEnd

Fires when the user stops resizing a Scheduler event.

resizeStart

Fires when the user starts resizing a Scheduler event.

save

Fires when the user clicks the Save command button to save the changes of the edited event.

slotClick

Fires when a Scheduler view slot is clicked.

slotDblClick

Fires when a Scheduler view slot is double-clicked.

Methods

addEvent

Creates a popup editor for the new event.

Parameters

group

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

The event that will be switched to edit mode.

options

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

The DOM element document position.

Returns

the event instance, if found.

focus

Focuses the last focused event 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. A nowrap flag toggles the wrapping to the first or to the last item.

Copy Codescheduler.focusNext(); // Focuses the next event.
scheduler.focusNext({ offset: 1 }); // Focuses the next event.
scheduler.focusNext({ offset: -1 }); // Focuses the previous event.
scheduler.focusNext({ nowrap: true }); // If the focus is on the last event, does not move the focus to the first event.

Parameters

position?

The relative position of the event to focus.

Returns

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. A nowrap flag toggles the wrapping to the first or to the last item.

Copy Codescheduler.focusPrev(); // Focuses the previous event
scheduler.focusPrev({ nowrap: true }); // Does not move the focus to the last event, if focus is on the first one.

Parameters

position

The relative position of the event to focus.

Returns

true if the focused event changed. Otherwise, returns false.

isEditing

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

Returns

• 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

The type of operation that will be confirmed. Has to be either Edit or Remove.

Returns

openRemoveConfirmationDialog

Opens the built-in removal confirmation dialog.

Returns

saveAsPDF

Saves the current view as PDF.

scrollToTime

Scrolls the view to the specified time.

Parameters

time

slotByPosition

Returns the current view slot that matches the passed document position.

Parameters

x

The x document position.

y

The y document position.

Returns

• The slot.