Custom Edit Form
The Scheduler enables you to use templates and customize its built-in edit dialog using Reactive Forms.
Setup
The following example demonstrates how to use the EditDialogTemplateDirective to customize the look of the edit dialog.
import { Component } from '@angular/core';
import { SchedulerEvent, EditMode, CreateFormGroupArgs } from '@progress/kendo-angular-scheduler';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import '@progress/kendo-date-math/tz/regions/Europe';
import '@progress/kendo-date-math/tz/regions/NorthAmerica';
@Component({
selector: 'my-app',
template: `
<kendo-scheduler
[kendoSchedulerBinding]="events"
[kendoSchedulerReactiveEditing]="createFormGroup"
[selectedDate]="selectedDate"
style="height: 600px;"
>
<kendo-scheduler-week-view startTime="07:00">
</kendo-scheduler-week-view>
<ng-template kendoSchedulerEditDialogTemplate
autoFocusedElement=".title-input"
let-formGroup="formGroup" let-isNew="isNew" let-editMode="editMode">
<div class="k-form-inline">
<div class="k-form-field">
<span>Title</span>
<input class="k-textbox title-input" placeholder="Title" [formControl]="formGroup.get('title')" />
</div>
<div class="k-form-field k-datetime-picker-wrapper">
<span>Start</span>
<kendo-datepicker [formControl]="formGroup.get('start')">
</kendo-datepicker>
<kendo-timepicker [formControl]="formGroup.get('start')" *ngIf='!formGroup.controls.isAllDay.value'>
</kendo-timepicker>
</div>
<div class="k-form-field k-datetime-picker-wrapper">
<span>End</span>
<kendo-datepicker [formControl]="formGroup.get('end')">
</kendo-datepicker>
<kendo-timepicker [formControl]="formGroup.get('end')" *ngIf='!formGroup.controls.isAllDay.value'>
</kendo-timepicker>
</div>
<div class="k-form-field">
<input type='checkbox' id='k-is-allday-chkbox' class='k-checkbox' [formControl]="formGroup.get('isAllDay')" />
<label class='k-checkbox-label' for='k-is-allday-chkbox'>All Day Event</label>
</div>
<div class="k-form-field" *ngIf="isEditingSeries(editMode)">
<kendo-recurrence-editor [formControl]="formGroup.get('recurrenceRule')">
</kendo-recurrence-editor>
</div>
</div>
</ng-template>
</kendo-scheduler>
`
})
export class AppComponent {
public selectedDate: Date = new Date('2018-10-22T00:00:00');
public formGroup: FormGroup;
public events: SchedulerEvent[] = [{
id: 1,
title: 'Breakfast',
start: new Date('2018-10-22T09:00:00'),
end: new Date('2018-10-22T09:30:00'),
recurrenceRule: 'FREQ=DAILY;COUNT=5;'
}];
constructor(private formBuilder: FormBuilder) {
this.createFormGroup = this.createFormGroup.bind(this);
}
public createFormGroup(args: CreateFormGroupArgs): FormGroup {
const dataItem = args.dataItem;
this.formGroup = this.formBuilder.group({
'id': args.isNew ? this.getNextId() : dataItem.id,
'start': [dataItem.start, Validators.required],
'end': [dataItem.end, Validators.required],
'startTimezone': [dataItem.startTimezone],
'endTimezone': [dataItem.endTimezone],
'isAllDay': dataItem.isAllDay,
'title': dataItem.title,
'description': dataItem.description,
'recurrenceRule': dataItem.recurrenceRule,
'recurrenceId': dataItem.recurrenceId
});
return this.formGroup;
}
public isEditingSeries(editMode: EditMode): boolean {
return editMode === EditMode.Series;
}
public getNextId(): number {
const len = this.events.length;
return (len === 0) ? 1 : this.events[this.events.length - 1].id + 1;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { SchedulerModule } from '@progress/kendo-angular-scheduler';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule,
SchedulerModule,
ButtonsModule,
DateInputsModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { Component, Output, EventEmitter, Input, ViewEncapsulation } from '@angular/core';
import { Validators, FormControl, FormGroup, FormBuilder } from '@angular/forms';
import { EditMode } from '@progress/kendo-angular-scheduler';
@Component({
selector: 'scheduler-edit-form',
encapsulation: ViewEncapsulation.None,
styles: [`
#eventForm {
max-width: 600px;
}
#eventForm .k-datetime-picker-wrapper .k-widget {
display: inline-block;
width: 150px;
margin-right: 15px;
}
#eventForm .k-edit-label { width: 17%; }
#eventForm .k-edit-field { width: 77%; }
`],
template: `
<div *ngIf="active" class="card">
<form novalidate [formGroup]="editForm" class="k-form-inline" id="eventForm">
<fieldset>
<legend>{{ isNew ? 'Add New Event' : 'Edit Event' }}</legend>
<div class="k-form-field">
<span>Title</span>
<input class="k-textbox" placeholder="Title" formControlName="Title" />
</div>
<div class="k-form-field k-datetime-picker-wrapper">
<span>Start</span>
<kendo-datepicker formControlName="Start">
</kendo-datepicker>
<kendo-timepicker formControlName="Start" *ngIf='!editForm.controls.IsAllDay.value'>
</kendo-timepicker>
</div>
<div class="k-form-field k-datetime-picker-wrapper">
<span>End</span>
<kendo-datepicker formControlName="End">
</kendo-datepicker>
<kendo-timepicker formControlName="End" *ngIf='!editForm.controls.IsAllDay.value'>
</kendo-timepicker>
</div>
<div class="k-form-field">
<input type='checkbox' id='k-is-allday-chkbox' class='k-checkbox' formControlName='IsAllDay' />
<label class='k-checkbox-label' for='k-is-allday-chkbox'>All Day Event</label>
</div>
<div>
<kendo-recurrence-editor *ngIf="isEditingSeries" formControlName='RecurrenceRule'>
</kendo-recurrence-editor>
</div>
</fieldset>
<div class="text-right">
<button kendoButton (click)="onCancel($event)">Cancel</button>
<button kendoButton (click)="onSave($event)" [disabled]="!editForm.valid" [primary]="true">Save</button>
</div>
</form>
</div>
`
})
export class SchedulerEditFormComponent {
@Input()
public isNew = false;
@Input()
public editMode: EditMode;
@Input()
public set event(ev: any) {
if (ev !== undefined) {
this.editForm.reset(ev);
this.active = true;
}
}
@Output()
public cancel: EventEmitter<any> = new EventEmitter();
@Output()
public save: EventEmitter<any> = new EventEmitter();
public active = false;
public editForm = new FormGroup({
'Title': new FormControl('', Validators.required),
'Start': new FormControl('', Validators.required),
'End': new FormControl('', Validators.required),
'IsAllDay': new FormControl(false),
'RecurrenceRule': new FormControl(),
'RecurrenceID': new FormControl()
});
public get isEditingSeries(): boolean {
return this.editMode === EditMode.Series;
}
constructor(public formBuilder: FormBuilder) {}
public onSave(e: MouseEvent): void {
e.preventDefault();
this.active = false;
this.save.emit(this.editForm.value);
}
public onCancel(e: MouseEvent): void {
e.preventDefault();
this.active = false;
this.cancel.emit();
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
import { SchedulerEvent } from '@progress/kendo-angular-scheduler';
/* tslint:disable */
const baseData: any[] = [
{
"TaskID": 4,
"OwnerID": 2,
"Title": "Bowling tournament",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-09T21:00:00.000Z",
"End": "2013-06-10T00:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 5,
"OwnerID": 2,
"Title": "Take the dog to the vet",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-10T07:00:00.000Z",
"End": "2013-06-10T08:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 6,
"OwnerID": 2,
"Title": "Call Charlie about the project",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-11T11:30:00.000Z",
"End": "2013-06-11T13:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 7,
"OwnerID": 3,
"Title": "Meeting with Alex",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-12T11:00:00.000Z",
"End": "2013-06-12T12:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 9,
"OwnerID": 2,
"Title": "Alex's Birthday",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-14T02:00:00.000Z",
"End": "2013-06-14T02:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": true
},
{
"TaskID": 12,
"OwnerID": 2,
"Title": "Car Service",
"Description": "Might come to work later!",
"StartTimezone": null,
"Start": "2013-06-24T08:30:00.000Z",
"End": "2013-06-24T09:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 14,
"OwnerID": 3,
"RoomID": 2,
"Title": "Replace the printer on the 1st floor",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-24T10:00:00.000Z",
"End": "2013-06-24T11:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 15,
"OwnerID": 1,
"Title": "Attending HR Conference",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-25T00:00:00.000Z",
"End": "2013-06-26T00:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": true
},
{
"TaskID": 16,
"OwnerID": 1,
"Title": "Business Lunch with Gregory Watkins",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-25T12:00:00.000Z",
"End": "2013-06-25T13:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 17,
"OwnerID": 1,
"Title": "Breakfast with CFO and COO",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-27T08:30:00.000Z",
"End": "2013-06-27T09:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 18,
"OwnerID": 1,
"Title": "Job Interview - Mathew Stevens",
"Description": "Junior Researcher",
"StartTimezone": null,
"Start": "2013-06-27T10:00:00.000Z",
"End": "2013-06-27T11:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 19,
"OwnerID": 1,
"Title": "Review CVs with Tim",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-27T11:00:00.000Z",
"End": "2013-06-27T11:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 20,
"OwnerID": 1,
"Title": "Lunch with Monica",
"Description": "Discuss the Employee handbook",
"StartTimezone": null,
"Start": "2013-06-27T12:00:00.000Z",
"End": "2013-06-27T13:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 21,
"OwnerID": 1,
"Title": "Job Interview - John Stewart",
"Description": "Accountant",
"StartTimezone": null,
"Start": "2013-06-27T14:00:00.000Z",
"End": "2013-06-27T15:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 22,
"OwnerID": 1,
"Title": "Job Interview - Mary Smith",
"Description": "Accountant",
"StartTimezone": null,
"Start": "2013-06-27T15:30:00.000Z",
"End": "2013-06-27T16:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 24,
"OwnerID": 3,
"Title": "Register new Access Cards",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-24T12:00:00.000Z",
"End": "2013-06-24T12:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 25,
"OwnerID": 1,
"Title": "HR Lecture",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-04T19:00:00.000Z",
"End": "2013-06-04T21:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 26,
"OwnerID": 1,
"Title": "Dentist",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-28T08:00:00.000Z",
"End": "2013-06-28T09:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 27,
"OwnerID": 1,
"Title": "Job Interview - Laura Bailey",
"Description": "Helpdesk",
"StartTimezone": null,
"Start": "2013-06-28T09:30:00.000Z",
"End": "2013-06-28T10:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 28,
"OwnerID": 1,
"Title": "Job Interview - Jenny Baxter",
"Description": "Helpdesk",
"StartTimezone": null,
"Start": "2013-06-28T11:00:00.000Z",
"End": "2013-06-28T12:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 31,
"OwnerID": 1,
"Title": "Team building prep tasks",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-28T14:00:00.000Z",
"End": "2013-06-28T17:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 32,
"OwnerID": 1,
"Title": "Job Interview - Bernard Atkins",
"Description": "Helpdesk",
"StartTimezone": null,
"Start": "2013-06-24T13:30:00.000Z",
"End": "2013-06-24T14:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 34,
"OwnerID": 1,
"Title": "Review Job Applications",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-24T15:00:00.000Z",
"End": "2013-06-24T17:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 35,
"OwnerID": 1,
"Title": "Grand Canyon tour",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-23T00:00:00.000Z",
"End": "2013-06-23T00:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": true
},
{
"TaskID": 40,
"OwnerID": 3,
"Title": "Install new laptops in conference rooms",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-24T13:30:00.000Z",
"End": "2013-06-24T18:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 66,
"OwnerID": 3,
"Title": "Bob's Birthday",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-29T08:00:00.000Z",
"End": "2013-06-29T06:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": true
},
{
"TaskID": 68,
"OwnerID": 1,
"RoomID": 2,
"Title": "Breakfast with Tom",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-24T08:30:00.000Z",
"End": "2013-06-24T09:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 69,
"OwnerID": 2,
"Title": "Team planning meeting",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-24T10:00:00.000Z",
"End": "2013-06-24T12:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 70,
"OwnerID": 2,
"Title": "Support Phone Call",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-24T16:00:00.000Z",
"End": "2013-06-24T16:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 71,
"OwnerID": 2,
"Title": "Business breakfast with Caroline",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-25T09:00:00.000Z",
"End": "2013-06-25T10:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 72,
"OwnerID": 2,
"Title": "Discuss preojects' deadlines",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-25T11:00:00.000Z",
"End": "2013-06-25T11:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 73,
"OwnerID": 2,
"Title": "Support Meeting",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-25T15:00:00.000Z",
"End": "2013-06-25T16:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 74,
"OwnerID": 2,
"Title": "Dine with Mathew",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-25T18:30:00.000Z",
"End": "2013-06-25T20:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 79,
"OwnerID": 2,
"Title": "Banking",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-26T09:00:00.000Z",
"End": "2013-06-26T10:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 80,
"OwnerID": 3,
"Title": "Software updates",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-25T10:00:00.000Z",
"End": "2013-06-25T12:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 81,
"OwnerID": 3,
"Title": "UPS maintenance",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-25T16:30:00.000Z",
"End": "2013-06-25T18:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 82,
"OwnerID": 2,
"Title": "Support Call",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-26T11:30:00.000Z",
"End": "2013-06-26T12:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 83,
"OwnerID": 3,
"Title": "Phone Sync with NY office ",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-26T13:30:00.000Z",
"End": "2013-06-26T14:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 84,
"OwnerID": 3,
"Title": "Phone Sync with Boston Office",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-26T15:00:00.000Z",
"End": "2013-06-26T16:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 85,
"OwnerID": 3,
"Title": "Server maintenance",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-26T18:30:00.000Z",
"End": "2013-06-26T21:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 86,
"OwnerID": 2,
"Title": "Status meeting",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-28T13:30:00.000Z",
"End": "2013-06-28T15:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 87,
"OwnerID": 3,
"Title": "Helpdesk status meeting",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-27T10:30:00.000Z",
"End": "2013-06-27T11:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 88,
"OwnerID": 2,
"Title": "Business Lunch",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-27T12:00:00.000Z",
"End": "2013-06-27T13:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 89,
"OwnerID": 3,
"Title": "Employee database update",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-27T14:00:00.000Z",
"End": "2013-06-27T15:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 90,
"OwnerID": 3,
"Title": "Website upload",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-27T07:30:00.000Z",
"End": "2013-06-27T08:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 91,
"OwnerID": 2,
"Title": "Meeting with marketing guys",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-27T17:00:00.000Z",
"End": "2013-06-27T18:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 92,
"OwnerID": 3,
"Title": "Meeting with Internet provider",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-28T10:30:00.000Z",
"End": "2013-06-28T11:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 93,
"OwnerID": 3,
"Title": "Bob's Birthday Party",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-29T20:00:00.000Z",
"End": "2013-06-29T23:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": null,
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 95,
"OwnerID": 2,
"Title": "Dance Practice",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-03T18:30:00.000Z",
"End": "2013-06-03T20:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 114,
"OwnerID": 3,
"Title": "Software updates",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-04T09:00:00.000Z",
"End": "2013-06-04T12:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": "",
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 115,
"OwnerID": 1,
"Title": "Breakfast at Starbucks",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-04T08:00:00.000Z",
"End": "2013-06-04T09:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": "",
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 116,
"OwnerID": 2,
"Title": "Performance review",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-04T14:00:00.000Z",
"End": "2013-06-04T17:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": "",
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 118,
"OwnerID": 1,
"Title": "HR seminar preparation",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-05T10:00:00.000Z",
"End": "2013-06-05T12:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": "",
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 119,
"OwnerID": 3,
"Title": "Helpdesk weekly meeting",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-05T15:00:00.000Z",
"End": "2013-06-05T16:00:00.000Z",
"EndTimezone": null,
"RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
},
{
"TaskID": 120,
"OwnerID": 3,
"Title": "Website upload",
"Description": "",
"StartTimezone": null,
"Start": "2013-06-07T07:00:00.000Z",
"End": "2013-06-07T08:30:00.000Z",
"EndTimezone": null,
"RecurrenceRule": "",
"RecurrenceID": null,
"RecurrenceException": null,
"IsAllDay": false
}
];
const currentYear = new Date().getFullYear();
const parseAdjust = (eventDate: string): Date => {
const date = new Date(eventDate);
date.setFullYear(currentYear);
return date;
};
const randomInt = (min, max): number => {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
export const displayDate = new Date(currentYear, 5, 24);
export const sampleData = baseData.map(dataItem => (
<SchedulerEvent> {
id: dataItem.TaskID,
start: parseAdjust(dataItem.Start),
startTimezone: dataItem.startTimezone,
end: parseAdjust(dataItem.End),
endTimezone: dataItem.endTimezone,
isAllDay: dataItem.IsAllDay,
title: dataItem.Title,
description: dataItem.Description,
recurrenceRule: dataItem.RecurrenceRule,
recurrenceId: dataItem.RecurrenceID,
recurrenceException: dataItem.RecurrenceException,
roomId: dataItem.RoomID,
ownerID: dataItem.OwnerID
}
));
export const sampleDataWithResources = baseData.map(dataItem => (
<SchedulerEvent> {
id: dataItem.TaskID,
start: parseAdjust(dataItem.Start),
startTimezone: dataItem.startTimezone,
end: parseAdjust(dataItem.End),
endTimezone: dataItem.endTimezone,
isAllDay: dataItem.IsAllDay,
title: dataItem.Title,
description: dataItem.Description,
recurrenceRule: dataItem.RecurrenceRule,
recurrenceId: dataItem.RecurrenceID,
recurrenceException: dataItem.RecurrenceException,
roomId: randomInt(1, 2),
attendees: [randomInt(1, 3)]
}
));
export const sampleDataWithCustomSchema = baseData.map(dataItem => (
{
...dataItem,
Start: parseAdjust(dataItem.Start),
End: parseAdjust(dataItem.End)
}
));