SchedulerComponent

Specifies the columns width. Applicable for the Timeline views.

Specifies the Scheduler current time marker settings.

Specifies if the Scheduler is editable.

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.

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

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.

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

Specifies the groups of the Scheduler.

Specifies the settings for the ongoing events highlight of the Scheduler.

A callback that executes for each slot of the Scheduler view. If it returns true, the k-state-selected CSS class will be added to the cell, making it visibly selected.

Specifies if the Scheduler will display a loading indicator.

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

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

Specifies the resources of the Scheduler.

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.

Specifies if the Scheduler's day or time slots are selectable (see example).

When this input is set to true, the Scheduler component will emit slotDragStart, slotDrag, and slotDragEnd events upon user interaction.

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.

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)
    };
  }
}

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

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

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).

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.

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.

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.

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

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

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

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

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

The index of the currently selected view.

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

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

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