SchedulerComponent
Represents the Kendo UI Scheduler component for Angular.
@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 number
Specifies the columns width. Applicable for the Timeline views.
currentTimeMarker boolean | CurrentTimeSettings
Specifies the Scheduler current time marker settings.
editable boolean | EditableSettings
Specifies if the Scheduler is editable.
endTime string
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 (args: EventStyleArgs) => any
Defines a function that is executed for every event in the view.
The function returns a value which is supported by ngClass.
import { 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 number
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 (args: EventStyleArgs) => any
Defines a function that is executed for every event in the view.
The function returns a value which is supported by ngStyle.
import { 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 Group
Specifies the groups of the Scheduler.
loading boolean
Specifies if the Scheduler will display a loading indicator.
max Date
The maximum date that can be selected by using the navigation of the Scheduler.
min Date
The minimum date that can be selected by using the navigation of the Scheduler.
resources Resource[]
Specifies the resources of the Scheduler.
scrollTime string | Date
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 boolean
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 (args: SlotClassArgs) => any
Defines a function that is executed for every slot in the view.
The function returns a value which is supported by ngClass.
import { Component, ViewEncapsulation } from '@angular/core';
import { SlotClassArgs } from '@progress/kendo-angular-scheduler';
@Component({
selector: 'my-app',
encapsulation: ViewEncapsulation.None,
styles: [`
.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 number
The number of divisions of the time slots. Applicable for the Day, Week, and Timeline views.
slotDuration number
The duration (in minutes) of the time slots. Applicable for the day, week and timeline views.
slotFill number
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 string
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 string
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 string
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 Day
The end of the work week. Applicable for the Day, Week, and Timeline views.
workWeekStart Day
The start of the work week. Applicable for the Day, Week, and Timeline views.
events any[]
An array of event instances which will be shown by the Scheduler.
modelFields SchedulerModelFields
The names of the model fields from which the Scheduler will read its data
(see example).
selectedDate Date
The currently selected date of the Scheduler.
Determines the period which is displayed.
selectedViewIndex number
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 string
Specifies the id of the timezone that will be displayed in the Scheduler.
For example, Europe/Sofia.
Defaults to Etc/UTC.
Fields
selectedView SchedulerView
The currently selected view.
activeEvent SchedulerEvent
Gets the currently active event, if any.
The active event is the event that can currently receive focus.
Events
cancel EventEmitter<CancelEvent>
Fires when the user cancels the editing by clicking the Cancel command button.
create EventEmitter<CreateEvent>
Fires when the user creates a new event using the 'c' key.
(see example).
dateChange EventEmitter<DateChangeEvent>
Fires when the date range that is displayed in the Scheduler changes.
drag EventEmitter<DragEvent>
Fires when 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>
Fires when a key is pressed on a focused Scheduler event.
navigate EventEmitter<NavigateEvent>
Fires when the Scheduler is about to execute a navigation action
(a view, date, or focus change).
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>
Fires when 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.
slotClick EventEmitter<SlotClickEvent>
Fires when a Scheduler view slot is clicked.
slotDblClick EventEmitter<SlotClickEvent>
Fires when a Scheduler view slot is double-clicked.
Methods
addEvent
Creates a popup editor for the new event.
Parameters
group FormGroup | 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 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.
scheduler.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? 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.
A nowrap flag toggles the wrapping to the first or to the last item.
scheduler.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 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>
openRemoveConfirmationDialog
Opens the built-in removal confirmation dialog.
Returns
Observable<boolean>
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.
import { Component, ViewChild } from '@angular/core';
import { SchedulerEvent, SchedulerComponent } from '@progress/kendo-angular-scheduler';
import { sampleData, displayDate } from './events-utc';
@Component({
selector: 'my-app',
template: `
Schedule Tasks:
<div draggable (drop)="onDrop($event)">
<div *ngFor="let item of tasks; let index = index" class="draggable-item"
[ngStyle]="{ background: item.color }" [attr.data-index]="index">
{{ item.title }}: {{ item.duration }}
</div>
</div>
<kendo-scheduler #scheduler
[kendoSchedulerBinding]="events"
[selectedDate]="selectedDate"
[eventStyles]="getEventStyles"
scrollTime="08:00"
style="height: 600px;">
<kendo-scheduler-week-view>
</kendo-scheduler-week-view>
</kendo-scheduler>
`,
styles: [`
.draggable-item {
width: 200px;
padding: 5px;
display: inline-block;
}
`]
})
export class AppComponent {
@ViewChild('scheduler')
public scheduler: SchedulerComponent;
public selectedDate: Date = new Date();
public events: SchedulerEvent[] = [];
public tasks: any[] = [{
title: 'Meeting with customers',
color: '#78d237',
duration: 60
}, {
title: 'Car Service',
color: '#28b4c8',
duration: 30
}, {
title: 'Review Job Applications',
color: '#ff6358',
duration: 90
}];
public onDrop(e: any): void {
const slot = this.scheduler.slotByPosition(e.originalEvent.pageX, e.originalEvent.pageY);
if (slot) {
const index = parseInt(e.target.getAttribute('data-index'), 10);
const item = this.tasks[index];
this.tasks.splice(index, 1);
this.events = this.events.concat({
title: item.title,
color: item.color,
start: slot.start,
end: new Date(slot.start.getFullYear(), slot.start.getMonth(), slot.start.getDate(),
slot.start.getHours(), slot.start.getMinutes() + item.duration)
});
}
}
public getEventStyles(args: any): any {
return {
backgroundColor: args.event.dataItem.color
};
}
}
import { NgZone, Directive, Output, EventEmitter, ElementRef, OnInit, OnDestroy } from '@angular/core';
import Draggable from '@telerik/kendo-draggable';
@Directive({
selector: '[draggable]'
})
export class DraggableDirective implements OnInit, OnDestroy {
@Output()
public drop: EventEmitter<any> = new EventEmitter<any>();
private draggable: any;
private hint: any;
private target: any;
constructor(private ngZone: NgZone, private element: ElementRef) {
}
public ngOnInit(): void {
const draggable = this.draggable = new Draggable({
press: this.onPress.bind(this),
drag: this.onDrag.bind(this),
release: this.onRelease.bind(this)
});
this.ngZone.runOutsideAngular(() => {
draggable.bindTo(this.element.nativeElement);
});
}
public ngOnDestroy(): void {
this.draggable.destroy();
}
private onPress(e: any): void {
e.originalEvent.preventDefault();
this.target = e.originalEvent.target;
const hint = this.hint = this.target.cloneNode(true);
hint.className += ' k-event-drag-hint';
hint.style.position = 'absolute';
document.body.appendChild(hint);
}
private onDrag(e: any): void {
if (this.hint) {
this.hint.style.top = `${ e.pageY }px`;
this.hint.style.left = `${ e.pageX }px`;
}
}
private onRelease(e): void {
if (!this.hint) {
return;
}
this.ngZone.run(() => {
this.drop.emit({
target: this.target,
originalEvent: e
});
});
document.body.removeChild(this.hint);
this.hint = null;
this.target = null;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SchedulerModule } from '@progress/kendo-angular-scheduler';
import { AppComponent } from './app.component';
import { DraggableDirective } from './draggable.directive';
@NgModule({
imports: [ BrowserModule, BrowserAnimationsModule, SchedulerModule ],
declarations: [ AppComponent, DraggableDirective ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);