Search results

Editor Window Customization in Angular Schedule component

07 Dec 2021 / 33 minutes to read

Scheduler makes use of popups and dialog to display the required notifications, as well as includes an editor window with event fields for making the appointment creation and editing process easier. You can also easily customize the editor window and the fields present in it, and can also apply validations on those fields.

Event editor

The editor window usually opens on the Scheduler, when a cell or event is double clicked. When a cell is double clicked, the detailed editor window opens in “Add new” mode, whereas when an event is double clicked, the same is opened in an “Edit” mode.

In mobile devices, you can open the detailed editor window in edit mode by clicking the edit icon on the popup, that opens on single tapping an event. You can also open it in add mode by single tapping a cell, which will display a + indication, clicking on it again will open the editor window.

You can also prevent the editor window from opening, by rendering Scheduler in a readonly mode or by doing code customization within the popupOpen event.

You can change the header title and the text of buttons displayed at the footer of the editor window by changing the appropriate localized word collection used in the Scheduler.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
import { L10n } from '@syncfusion/ej2-base';
import { Component } from '@angular/core';
import { EventSettingsModel, DayService, WeekService, TimelineViewsService, MonthService, AgendaService } from '@syncfusion/ej2-angular-schedule';
import { scheduleData} from './datasource.ts';

L10n.load({
  'en-US': {
      'schedule': {
          'saveButton': 'Add',
          'cancelButton': 'Close',
          'deleteButton': 'Remove',
          'newEvent': 'Add Event',
      },
  }
});
@Component({
  selector: 'app-root',
  providers: [DayService, WeekService, TimelineViewsService, MonthService, AgendaService],
  // specifies the template string for the Schedule component
  template: `<ejs-schedule width='100%' height='550px' [selectedDate]='selectedDate' [views]='views' [eventSettings]='eventSettings'></ejs-schedule>`
})


export class AppComponent {
    public selectedDate: Date = new Date(2018, 1, 15);
    public views: Array<string> = ['TimelineDay', 'Day', 'Week', 'Month', 'Agenda'];
    public eventSettings: EventSettingsModel = {
        dataSource: scheduleData
    };
 }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule,
        TimePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService]
})
export class AppModule { }
Copied to clipboard
export let scheduleData: Object[] = [
    {
        Id: 1,
        Subject: 'Explosion of Betelgeuse Star',
        StartTime: new Date(2018, 1, 11, 9, 30),
        EndTime: new Date(2018, 1, 11, 11, 0),
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Thule Air Crash Report',
        StartTime: new Date(2018, 1, 12, 12, 0),
        EndTime: new Date(2018, 1, 12, 14, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Blue Moon Eclipse',
        StartTime: new Date(2018, 1, 13, 9, 30),
        EndTime: new Date(2018, 1, 13, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'Meteor Showers in 2018',
        StartTime: new Date(2018, 1, 14, 13, 0),
        EndTime: new Date(2018, 1, 14, 14, 30),
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'Milky Way as Melting pot',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Mysteries of Bermuda Triangle',
        StartTime: new Date(2018, 1, 15, 9, 30),
        EndTime: new Date(2018, 1, 15, 11, 0),
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Glaciers and Snowflakes',
        StartTime: new Date(2018, 1, 16, 11, 0),
        EndTime: new Date(2018, 1, 16, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Life on Mars',
        StartTime: new Date(2018, 1, 17, 9, 0),
        EndTime: new Date(2018, 1, 17, 10, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Alien Civilization',
        StartTime: new Date(2018, 1, 19, 11, 0),
        EndTime: new Date(2018, 1, 19, 13, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Wildlife Galleries',
        StartTime: new Date(2018, 1, 21, 11, 0),
        EndTime: new Date(2018, 1, 21, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'Best Photography 2018',
        StartTime: new Date(2018, 1, 22, 9, 30),
        EndTime: new Date(2018, 1, 22, 11, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'Smarter Puppies',
        StartTime: new Date(2018, 1, 9, 10, 0),
        EndTime: new Date(2018, 1, 9, 11, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Myths of Andromeda Galaxy',
        StartTime: new Date(2018, 1, 7, 10, 30),
        EndTime: new Date(2018, 1, 7, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Aliens vs Humans',
        StartTime: new Date(2018, 1, 5, 10, 0),
        EndTime: new Date(2018, 1, 5, 11, 30),
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Facts of Humming Birds',
        StartTime: new Date(2018, 1, 20, 9, 30),
        EndTime: new Date(2018, 1, 20, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 23, 11, 0),
        EndTime: new Date(2018, 1, 23, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 17,
        Subject: 'The Cycle of Seasons',
        StartTime: new Date(2018, 1, 12, 5, 30),
        EndTime: new Date(2018, 1, 12, 7, 30),
        CategoryColor: '#00bdae'
    }, {
        Id: 18,
        Subject: 'Space Galaxies and Planets',
        StartTime: new Date(2018, 1, 12, 17, 0),
        EndTime: new Date(2018, 1, 12, 18, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 19,
        Subject: 'Lifecycle of Bumblebee',
        StartTime: new Date(2018, 1, 15, 6, 0),
        EndTime: new Date(2018, 1, 15, 7, 30),
        CategoryColor: '#7fa900'
    }, {
        Id: 20,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 15, 16, 0),
        EndTime: new Date(2018, 1, 15, 18, 0),
        CategoryColor: '#ea7a57'
    }
];
export let eventsData: Object[] = [
    {
        Id: 1,
        Subject: 'Server Maintenance',
        StartTime: new Date(2018, 1, 11, 10, 0),
        EndTime: new Date(2018, 1, 11, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Art & Painting Gallery',
        StartTime: new Date(2018, 1, 12, 12, 0),
        EndTime: new Date(2018, 1, 12, 14, 0),
        EventType: 'public-event',
        City: 'Costa Rica',
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Dany Birthday Celebration',
        StartTime: new Date(2018, 1, 13, 10, 0),
        EndTime: new Date(2018, 1, 13, 11, 30),
        EventType: 'family-event',
        City: 'Kirkland',
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'John Wedding Anniversary',
        StartTime: new Date(2018, 1, 14, 9, 0),
        EndTime: new Date(2018, 1, 14, 10, 0),
        EventType: 'family-event',
        City: 'Redmond',
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'ISA Annual Conference',
        StartTime: new Date(2018, 1, 15, 10, 0),
        EndTime: new Date(2018, 1, 15, 11, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Equipment Maintenance',
        StartTime: new Date(2018, 1, 16, 12, 0),
        EndTime: new Date(2018, 1, 16, 14, 0),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Aircraft Maintenance',
        StartTime: new Date(2018, 1, 17, 10, 0),
        EndTime: new Date(2018, 1, 17, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Facilities Maintenance',
        StartTime: new Date(2018, 1, 19, 9, 30),
        EndTime: new Date(2018, 1, 19, 11, 0),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Britto Birthday Celebration',
        StartTime: new Date(2018, 1, 21, 11, 0),
        EndTime: new Date(2018, 1, 21, 13, 0),
        EventType: 'family-event',
        City: 'Greenland',
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Justin Wedding Anniversary',
        StartTime: new Date(2018, 1, 22, 9, 30),
        EndTime: new Date(2018, 1, 22, 11, 0),
        EventType: 'family-event',
        City: 'Finland',
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'AIEA Annual Meet',
        StartTime: new Date(2018, 1, 9, 10, 0),
        EndTime: new Date(2018, 1, 9, 11, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'AAN Conference',
        StartTime: new Date(2018, 1, 7, 10, 30),
        EndTime: new Date(2018, 1, 7, 12, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Photography Gallery',
        StartTime: new Date(2018, 1, 5, 10, 0),
        EndTime: new Date(2018, 1, 5, 11, 30),
        EventType: 'public-event',
        City: 'Chennai',
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Beach Clean-up',
        StartTime: new Date(2018, 1, 14, 12, 0),
        EndTime: new Date(2018, 1, 14, 2, 0),
        EventType: 'public-event',
        City: 'Mumbai',
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Turtle Walk',
        StartTime: new Date(2018, 1, 19, 13, 0),
        EndTime: new Date(2018, 1, 19, 14, 30),
        EventType: 'public-event',
        City: 'Costa Rica',
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Silent Walk for Cancer day',
        StartTime: new Date(2018, 1, 22, 13, 0),
        EndTime: new Date(2018, 1, 22, 14, 30),
        EventType: 'public-event',
        City: 'Chennai',
        CategoryColor: '#ea7a57'
}];
export let eventData: Object[] = [
    {
        Id: 1,
        Subject: 'Surgery - Andrew',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 9, 0),
        EndTime: new Date(2018, 1, 12, 10, 0)
    }, {
        Id: 2,
        Subject: 'Consulting - John',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 10, 0),
        EndTime: new Date(2018, 1, 12, 11, 30)
    }, {
        Id: 3,
        Subject: 'Therapy - Robert',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 12, 11, 30),
        EndTime: new Date(2018, 1, 12, 12, 30)
    }, {
        Id: 4,
        Subject: 'Observation - Steven',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 12, 30),
        EndTime: new Date(2018, 1, 12, 13, 30)
    }, {
        Id: 5,
        Subject: 'Extraction - Nancy',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 13, 30),
        EndTime: new Date(2018, 1, 12, 15, 0)
    }, {
        Id: 6,
        Subject: 'Surgery - Paul',
        EventType: 'New',
        StartTime: new Date(2018, 1, 13, 9, 0),
        EndTime: new Date(2018, 1, 13, 10, 0)
    }, {
        Id: 7,
        Subject: 'Extraction - Josephs',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 10, 0),
        EndTime: new Date(2018, 1, 13, 11, 0)
    }, {
        Id: 8,
        Subject: 'Consulting - Mario',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 11, 0),
        EndTime: new Date(2018, 1, 13, 12, 0)
    }, {
        Id: 9,
        Subject: 'Therapy - Saveley',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 13, 12, 0),
        EndTime: new Date(2018, 1, 13, 13, 30)
    }, {
        Id: 10,
        Subject: 'Observation - Cartrain',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 13, 30),
        EndTime: new Date(2018, 1, 13, 15, 30)
    }, {
        Id: 11,
        Subject: 'Consulting - Yang',
        EventType: 'New',
        StartTime: new Date(2018, 1, 14, 9, 0),
        EndTime: new Date(2018, 1, 14, 10, 0)
    }, {
        Id: 12,
        Subject: 'Observation - Michael',
        EventType: 'New',
        StartTime: new Date(2018, 1, 14, 10, 0),
        EndTime: new Date(2018, 1, 14, 11, 30)
    }, {
        Id: 13,
        Subject: 'Surgery - Roland',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 14, 11, 30),
        EndTime: new Date(2018, 1, 14, 12, 30)
    }, {
        Id: 14,
        Subject: 'Extraction - Francisco',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 14, 12, 30),
        EndTime: new Date(2018, 1, 14, 13, 30)
    }, {
        Id: 15,
        Subject: 'Therapy - Henriette',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 14, 13, 30),
        EndTime: new Date(2018, 1, 14, 15, 0)
    }, {
        Id: 16,
        Subject: 'Observation - Bernardo',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 9, 0),
        EndTime: new Date(2018, 1, 15, 10, 0)
    }, {
        Id: 17,
        Subject: 'Therapy - Wilson',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 10, 0),
        EndTime: new Date(2018, 1, 15, 11, 0)
    }, {
        Id: 18,
        Subject: 'Consulting - Horst',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 11, 0),
        EndTime: new Date(2018, 1, 15, 12, 0)
    }, {
        Id: 19,
        Subject: 'Surgery - Limeira',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 13, 30)
    }, {
        Id: 20,
        Subject: 'Observation - Victoria',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 15, 13, 30),
        EndTime: new Date(2018, 1, 15, 15, 30)
    }, {
        Id: 21,
        Subject: 'Extraction - Afonso',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 16, 9, 0),
        EndTime: new Date(2018, 1, 16, 10, 0)
    }, {
        Id: 22,
        Subject: 'Extraction - Paula',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 10, 0),
        EndTime: new Date(2018, 1, 16, 11, 0)
    }, {
        Id: 23,
        Subject: 'Observation - George',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 16, 11, 0),
        EndTime: new Date(2018, 1, 16, 12, 0)
    }, {
        Id: 24,
        Subject: 'Therapy - Smith',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 12, 0),
        EndTime: new Date(2018, 1, 16, 13, 30)
    }, {
        Id: 25,
        Subject: 'Surgery - Jennifer',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 13, 30),
        EndTime: new Date(2018, 1, 16, 15, 30)
    }
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

How to change the label text of default editor fields

To change the default labels such as Subject, Location and other field names in the editor window, make use of the title property available within the field option of eventSettings.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';
import { EventSettingsModel, DayService, WeekService, TimelineViewsService, MonthService, AgendaService } from '@syncfusion/ej2-angular-schedule';
import { scheduleData} from './datasource.ts';
@Component({
  selector: 'app-root',
  providers: [DayService, WeekService, TimelineViewsService, MonthService, AgendaService],
  // specifies the template string for the Schedule component
  template: `<ejs-schedule width='100%' height='550px' [selectedDate]='selectedDate' [views]='views' [eventSettings]='eventSettings'></ejs-schedule>`
})


export class AppComponent {
    public selectedDate: Date = new Date(2018, 1, 15);
    public views: Array<string> = ['Day', 'Week', 'TimelineWeek', 'Month', 'Agenda'];
    public eventSettings: EventSettingsModel = {
        dataSource: scheduleData,
        fields: {
            id: 'Id',
            subject: { name: 'Subject', title: 'Event Name' },
            location: { name: 'Location', title: 'Event Location'},
            description: { name: 'Description', title: 'Event Description' },
            startTime: { name: 'StartTime', title: 'Start Duration' },
            endTime: { name: 'EndTime', title: 'End Duration'  }
        }
    };
 }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule,
        TimePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService]
})
export class AppModule { }
Copied to clipboard
export let scheduleData: Object[] = [
    {
        Id: 1,
        Subject: 'Explosion of Betelgeuse Star',
        StartTime: new Date(2018, 1, 11, 9, 30),
        EndTime: new Date(2018, 1, 11, 11, 0),
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Thule Air Crash Report',
        StartTime: new Date(2018, 1, 12, 12, 0),
        EndTime: new Date(2018, 1, 12, 14, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Blue Moon Eclipse',
        StartTime: new Date(2018, 1, 13, 9, 30),
        EndTime: new Date(2018, 1, 13, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'Meteor Showers in 2018',
        StartTime: new Date(2018, 1, 14, 13, 0),
        EndTime: new Date(2018, 1, 14, 14, 30),
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'Milky Way as Melting pot',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Mysteries of Bermuda Triangle',
        StartTime: new Date(2018, 1, 15, 9, 30),
        EndTime: new Date(2018, 1, 15, 11, 0),
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Glaciers and Snowflakes',
        StartTime: new Date(2018, 1, 16, 11, 0),
        EndTime: new Date(2018, 1, 16, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Life on Mars',
        StartTime: new Date(2018, 1, 17, 9, 0),
        EndTime: new Date(2018, 1, 17, 10, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Alien Civilization',
        StartTime: new Date(2018, 1, 19, 11, 0),
        EndTime: new Date(2018, 1, 19, 13, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Wildlife Galleries',
        StartTime: new Date(2018, 1, 21, 11, 0),
        EndTime: new Date(2018, 1, 21, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'Best Photography 2018',
        StartTime: new Date(2018, 1, 22, 9, 30),
        EndTime: new Date(2018, 1, 22, 11, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'Smarter Puppies',
        StartTime: new Date(2018, 1, 9, 10, 0),
        EndTime: new Date(2018, 1, 9, 11, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Myths of Andromeda Galaxy',
        StartTime: new Date(2018, 1, 7, 10, 30),
        EndTime: new Date(2018, 1, 7, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Aliens vs Humans',
        StartTime: new Date(2018, 1, 5, 10, 0),
        EndTime: new Date(2018, 1, 5, 11, 30),
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Facts of Humming Birds',
        StartTime: new Date(2018, 1, 20, 9, 30),
        EndTime: new Date(2018, 1, 20, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 23, 11, 0),
        EndTime: new Date(2018, 1, 23, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 17,
        Subject: 'The Cycle of Seasons',
        StartTime: new Date(2018, 1, 12, 5, 30),
        EndTime: new Date(2018, 1, 12, 7, 30),
        CategoryColor: '#00bdae'
    }, {
        Id: 18,
        Subject: 'Space Galaxies and Planets',
        StartTime: new Date(2018, 1, 12, 17, 0),
        EndTime: new Date(2018, 1, 12, 18, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 19,
        Subject: 'Lifecycle of Bumblebee',
        StartTime: new Date(2018, 1, 15, 6, 0),
        EndTime: new Date(2018, 1, 15, 7, 30),
        CategoryColor: '#7fa900'
    }, {
        Id: 20,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 15, 16, 0),
        EndTime: new Date(2018, 1, 15, 18, 0),
        CategoryColor: '#ea7a57'
    }
];
export let eventsData: Object[] = [
    {
        Id: 1,
        Subject: 'Server Maintenance',
        StartTime: new Date(2018, 1, 11, 10, 0),
        EndTime: new Date(2018, 1, 11, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Art & Painting Gallery',
        StartTime: new Date(2018, 1, 12, 12, 0),
        EndTime: new Date(2018, 1, 12, 14, 0),
        EventType: 'public-event',
        City: 'Costa Rica',
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Dany Birthday Celebration',
        StartTime: new Date(2018, 1, 13, 10, 0),
        EndTime: new Date(2018, 1, 13, 11, 30),
        EventType: 'family-event',
        City: 'Kirkland',
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'John Wedding Anniversary',
        StartTime: new Date(2018, 1, 14, 9, 0),
        EndTime: new Date(2018, 1, 14, 10, 0),
        EventType: 'family-event',
        City: 'Redmond',
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'ISA Annual Conference',
        StartTime: new Date(2018, 1, 15, 10, 0),
        EndTime: new Date(2018, 1, 15, 11, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Equipment Maintenance',
        StartTime: new Date(2018, 1, 16, 12, 0),
        EndTime: new Date(2018, 1, 16, 14, 0),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Aircraft Maintenance',
        StartTime: new Date(2018, 1, 17, 10, 0),
        EndTime: new Date(2018, 1, 17, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Facilities Maintenance',
        StartTime: new Date(2018, 1, 19, 9, 30),
        EndTime: new Date(2018, 1, 19, 11, 0),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Britto Birthday Celebration',
        StartTime: new Date(2018, 1, 21, 11, 0),
        EndTime: new Date(2018, 1, 21, 13, 0),
        EventType: 'family-event',
        City: 'Greenland',
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Justin Wedding Anniversary',
        StartTime: new Date(2018, 1, 22, 9, 30),
        EndTime: new Date(2018, 1, 22, 11, 0),
        EventType: 'family-event',
        City: 'Finland',
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'AIEA Annual Meet',
        StartTime: new Date(2018, 1, 9, 10, 0),
        EndTime: new Date(2018, 1, 9, 11, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'AAN Conference',
        StartTime: new Date(2018, 1, 7, 10, 30),
        EndTime: new Date(2018, 1, 7, 12, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Photography Gallery',
        StartTime: new Date(2018, 1, 5, 10, 0),
        EndTime: new Date(2018, 1, 5, 11, 30),
        EventType: 'public-event',
        City: 'Chennai',
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Beach Clean-up',
        StartTime: new Date(2018, 1, 14, 12, 0),
        EndTime: new Date(2018, 1, 14, 2, 0),
        EventType: 'public-event',
        City: 'Mumbai',
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Turtle Walk',
        StartTime: new Date(2018, 1, 19, 13, 0),
        EndTime: new Date(2018, 1, 19, 14, 30),
        EventType: 'public-event',
        City: 'Costa Rica',
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Silent Walk for Cancer day',
        StartTime: new Date(2018, 1, 22, 13, 0),
        EndTime: new Date(2018, 1, 22, 14, 30),
        EventType: 'public-event',
        City: 'Chennai',
        CategoryColor: '#ea7a57'
}];
export let eventData: Object[] = [
    {
        Id: 1,
        Subject: 'Surgery - Andrew',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 9, 0),
        EndTime: new Date(2018, 1, 12, 10, 0)
    }, {
        Id: 2,
        Subject: 'Consulting - John',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 10, 0),
        EndTime: new Date(2018, 1, 12, 11, 30)
    }, {
        Id: 3,
        Subject: 'Therapy - Robert',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 12, 11, 30),
        EndTime: new Date(2018, 1, 12, 12, 30)
    }, {
        Id: 4,
        Subject: 'Observation - Steven',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 12, 30),
        EndTime: new Date(2018, 1, 12, 13, 30)
    }, {
        Id: 5,
        Subject: 'Extraction - Nancy',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 13, 30),
        EndTime: new Date(2018, 1, 12, 15, 0)
    }, {
        Id: 6,
        Subject: 'Surgery - Paul',
        EventType: 'New',
        StartTime: new Date(2018, 1, 13, 9, 0),
        EndTime: new Date(2018, 1, 13, 10, 0)
    }, {
        Id: 7,
        Subject: 'Extraction - Josephs',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 10, 0),
        EndTime: new Date(2018, 1, 13, 11, 0)
    }, {
        Id: 8,
        Subject: 'Consulting - Mario',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 11, 0),
        EndTime: new Date(2018, 1, 13, 12, 0)
    }, {
        Id: 9,
        Subject: 'Therapy - Saveley',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 13, 12, 0),
        EndTime: new Date(2018, 1, 13, 13, 30)
    }, {
        Id: 10,
        Subject: 'Observation - Cartrain',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 13, 30),
        EndTime: new Date(2018, 1, 13, 15, 30)
    }, {
        Id: 11,
        Subject: 'Consulting - Yang',
        EventType: 'New',
        StartTime: new Date(2018, 1, 14, 9, 0),
        EndTime: new Date(2018, 1, 14, 10, 0)
    }, {
        Id: 12,
        Subject: 'Observation - Michael',
        EventType: 'New',
        StartTime: new Date(2018, 1, 14, 10, 0),
        EndTime: new Date(2018, 1, 14, 11, 30)
    }, {
        Id: 13,
        Subject: 'Surgery - Roland',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 14, 11, 30),
        EndTime: new Date(2018, 1, 14, 12, 30)
    }, {
        Id: 14,
        Subject: 'Extraction - Francisco',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 14, 12, 30),
        EndTime: new Date(2018, 1, 14, 13, 30)
    }, {
        Id: 15,
        Subject: 'Therapy - Henriette',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 14, 13, 30),
        EndTime: new Date(2018, 1, 14, 15, 0)
    }, {
        Id: 16,
        Subject: 'Observation - Bernardo',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 9, 0),
        EndTime: new Date(2018, 1, 15, 10, 0)
    }, {
        Id: 17,
        Subject: 'Therapy - Wilson',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 10, 0),
        EndTime: new Date(2018, 1, 15, 11, 0)
    }, {
        Id: 18,
        Subject: 'Consulting - Horst',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 11, 0),
        EndTime: new Date(2018, 1, 15, 12, 0)
    }, {
        Id: 19,
        Subject: 'Surgery - Limeira',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 13, 30)
    }, {
        Id: 20,
        Subject: 'Observation - Victoria',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 15, 13, 30),
        EndTime: new Date(2018, 1, 15, 15, 30)
    }, {
        Id: 21,
        Subject: 'Extraction - Afonso',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 16, 9, 0),
        EndTime: new Date(2018, 1, 16, 10, 0)
    }, {
        Id: 22,
        Subject: 'Extraction - Paula',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 10, 0),
        EndTime: new Date(2018, 1, 16, 11, 0)
    }, {
        Id: 23,
        Subject: 'Observation - George',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 16, 11, 0),
        EndTime: new Date(2018, 1, 16, 12, 0)
    }, {
        Id: 24,
        Subject: 'Therapy - Smith',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 12, 0),
        EndTime: new Date(2018, 1, 16, 13, 30)
    }, {
        Id: 25,
        Subject: 'Surgery - Jennifer',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 13, 30),
        EndTime: new Date(2018, 1, 16, 15, 30)
    }
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Field validation

It is possible to validate the required fields of the editor window from client-side before submitting it, by adding appropriate validation rules to each field. The appointment fields have been extended to accept both string and object type values. To perform validations, it is necessary to specify object values for the event fields.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';
import { EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, AgendaService } from '@syncfusion/ej2-angular-schedule';
import { scheduleData} from './datasource.ts';
@Component({
  selector: 'app-root',
  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],
  // specifies the template string for the Schedule component
  template: `<ejs-schedule width='100%' height='550px' [selectedDate]='selectedDate' [views]='views' [eventSettings]='eventSettings'></ejs-schedule>`
})


export class AppComponent {
    minValidation: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
        return args['value'].length >= 5;
    };
    public selectedDate: Date = new Date(2018, 1, 15);
    public views: Array<string> = ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'];
    public eventSettings: EventSettingsModel = {
        dataSource: scheduleData,
        fields: {
            id: 'Id',
            subject: { name: 'Subject', validation: { required: true } },
            location: { name: 'Location', validation: { required: true } },
            description: {
                name: 'Description', validation: {
                    required: true, minLength: [this.minValidation, 'Need atleast 5 letters to be entered']
                }
            },
            startTime: { name: 'StartTime', validation: { required: true } },
            endTime: { name: 'EndTime', validation: { required: true } }
        }
    };
 }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule,
        TimePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService]
})
export class AppModule { }
Copied to clipboard
export let scheduleData: Object[] = [
    {
        Id: 1,
        Subject: 'Explosion of Betelgeuse Star',
        StartTime: new Date(2018, 1, 11, 9, 30),
        EndTime: new Date(2018, 1, 11, 11, 0),
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Thule Air Crash Report',
        StartTime: new Date(2018, 1, 12, 12, 0),
        EndTime: new Date(2018, 1, 12, 14, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Blue Moon Eclipse',
        StartTime: new Date(2018, 1, 13, 9, 30),
        EndTime: new Date(2018, 1, 13, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'Meteor Showers in 2018',
        StartTime: new Date(2018, 1, 14, 13, 0),
        EndTime: new Date(2018, 1, 14, 14, 30),
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'Milky Way as Melting pot',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Mysteries of Bermuda Triangle',
        StartTime: new Date(2018, 1, 15, 9, 30),
        EndTime: new Date(2018, 1, 15, 11, 0),
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Glaciers and Snowflakes',
        StartTime: new Date(2018, 1, 16, 11, 0),
        EndTime: new Date(2018, 1, 16, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Life on Mars',
        StartTime: new Date(2018, 1, 17, 9, 0),
        EndTime: new Date(2018, 1, 17, 10, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Alien Civilization',
        StartTime: new Date(2018, 1, 19, 11, 0),
        EndTime: new Date(2018, 1, 19, 13, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Wildlife Galleries',
        StartTime: new Date(2018, 1, 21, 11, 0),
        EndTime: new Date(2018, 1, 21, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'Best Photography 2018',
        StartTime: new Date(2018, 1, 22, 9, 30),
        EndTime: new Date(2018, 1, 22, 11, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'Smarter Puppies',
        StartTime: new Date(2018, 1, 9, 10, 0),
        EndTime: new Date(2018, 1, 9, 11, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Myths of Andromeda Galaxy',
        StartTime: new Date(2018, 1, 7, 10, 30),
        EndTime: new Date(2018, 1, 7, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Aliens vs Humans',
        StartTime: new Date(2018, 1, 5, 10, 0),
        EndTime: new Date(2018, 1, 5, 11, 30),
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Facts of Humming Birds',
        StartTime: new Date(2018, 1, 20, 9, 30),
        EndTime: new Date(2018, 1, 20, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 23, 11, 0),
        EndTime: new Date(2018, 1, 23, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 17,
        Subject: 'The Cycle of Seasons',
        StartTime: new Date(2018, 1, 12, 5, 30),
        EndTime: new Date(2018, 1, 12, 7, 30),
        CategoryColor: '#00bdae'
    }, {
        Id: 18,
        Subject: 'Space Galaxies and Planets',
        StartTime: new Date(2018, 1, 12, 17, 0),
        EndTime: new Date(2018, 1, 12, 18, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 19,
        Subject: 'Lifecycle of Bumblebee',
        StartTime: new Date(2018, 1, 15, 6, 0),
        EndTime: new Date(2018, 1, 15, 7, 30),
        CategoryColor: '#7fa900'
    }, {
        Id: 20,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 15, 16, 0),
        EndTime: new Date(2018, 1, 15, 18, 0),
        CategoryColor: '#ea7a57'
    }
];
export let eventsData: Object[] = [
    {
        Id: 1,
        Subject: 'Server Maintenance',
        StartTime: new Date(2018, 1, 11, 10, 0),
        EndTime: new Date(2018, 1, 11, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Art & Painting Gallery',
        StartTime: new Date(2018, 1, 12, 12, 0),
        EndTime: new Date(2018, 1, 12, 14, 0),
        EventType: 'public-event',
        City: 'Costa Rica',
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Dany Birthday Celebration',
        StartTime: new Date(2018, 1, 13, 10, 0),
        EndTime: new Date(2018, 1, 13, 11, 30),
        EventType: 'family-event',
        City: 'Kirkland',
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'John Wedding Anniversary',
        StartTime: new Date(2018, 1, 14, 9, 0),
        EndTime: new Date(2018, 1, 14, 10, 0),
        EventType: 'family-event',
        City: 'Redmond',
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'ISA Annual Conference',
        StartTime: new Date(2018, 1, 15, 10, 0),
        EndTime: new Date(2018, 1, 15, 11, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Equipment Maintenance',
        StartTime: new Date(2018, 1, 16, 12, 0),
        EndTime: new Date(2018, 1, 16, 14, 0),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Aircraft Maintenance',
        StartTime: new Date(2018, 1, 17, 10, 0),
        EndTime: new Date(2018, 1, 17, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Facilities Maintenance',
        StartTime: new Date(2018, 1, 19, 9, 30),
        EndTime: new Date(2018, 1, 19, 11, 0),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Britto Birthday Celebration',
        StartTime: new Date(2018, 1, 21, 11, 0),
        EndTime: new Date(2018, 1, 21, 13, 0),
        EventType: 'family-event',
        City: 'Greenland',
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Justin Wedding Anniversary',
        StartTime: new Date(2018, 1, 22, 9, 30),
        EndTime: new Date(2018, 1, 22, 11, 0),
        EventType: 'family-event',
        City: 'Finland',
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'AIEA Annual Meet',
        StartTime: new Date(2018, 1, 9, 10, 0),
        EndTime: new Date(2018, 1, 9, 11, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'AAN Conference',
        StartTime: new Date(2018, 1, 7, 10, 30),
        EndTime: new Date(2018, 1, 7, 12, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Photography Gallery',
        StartTime: new Date(2018, 1, 5, 10, 0),
        EndTime: new Date(2018, 1, 5, 11, 30),
        EventType: 'public-event',
        City: 'Chennai',
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Beach Clean-up',
        StartTime: new Date(2018, 1, 14, 12, 0),
        EndTime: new Date(2018, 1, 14, 2, 0),
        EventType: 'public-event',
        City: 'Mumbai',
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Turtle Walk',
        StartTime: new Date(2018, 1, 19, 13, 0),
        EndTime: new Date(2018, 1, 19, 14, 30),
        EventType: 'public-event',
        City: 'Costa Rica',
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Silent Walk for Cancer day',
        StartTime: new Date(2018, 1, 22, 13, 0),
        EndTime: new Date(2018, 1, 22, 14, 30),
        EventType: 'public-event',
        City: 'Chennai',
        CategoryColor: '#ea7a57'
}];
export let eventData: Object[] = [
    {
        Id: 1,
        Subject: 'Surgery - Andrew',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 9, 0),
        EndTime: new Date(2018, 1, 12, 10, 0)
    }, {
        Id: 2,
        Subject: 'Consulting - John',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 10, 0),
        EndTime: new Date(2018, 1, 12, 11, 30)
    }, {
        Id: 3,
        Subject: 'Therapy - Robert',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 12, 11, 30),
        EndTime: new Date(2018, 1, 12, 12, 30)
    }, {
        Id: 4,
        Subject: 'Observation - Steven',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 12, 30),
        EndTime: new Date(2018, 1, 12, 13, 30)
    }, {
        Id: 5,
        Subject: 'Extraction - Nancy',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 13, 30),
        EndTime: new Date(2018, 1, 12, 15, 0)
    }, {
        Id: 6,
        Subject: 'Surgery - Paul',
        EventType: 'New',
        StartTime: new Date(2018, 1, 13, 9, 0),
        EndTime: new Date(2018, 1, 13, 10, 0)
    }, {
        Id: 7,
        Subject: 'Extraction - Josephs',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 10, 0),
        EndTime: new Date(2018, 1, 13, 11, 0)
    }, {
        Id: 8,
        Subject: 'Consulting - Mario',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 11, 0),
        EndTime: new Date(2018, 1, 13, 12, 0)
    }, {
        Id: 9,
        Subject: 'Therapy - Saveley',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 13, 12, 0),
        EndTime: new Date(2018, 1, 13, 13, 30)
    }, {
        Id: 10,
        Subject: 'Observation - Cartrain',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 13, 30),
        EndTime: new Date(2018, 1, 13, 15, 30)
    }, {
        Id: 11,
        Subject: 'Consulting - Yang',
        EventType: 'New',
        StartTime: new Date(2018, 1, 14, 9, 0),
        EndTime: new Date(2018, 1, 14, 10, 0)
    }, {
        Id: 12,
        Subject: 'Observation - Michael',
        EventType: 'New',
        StartTime: new Date(2018, 1, 14, 10, 0),
        EndTime: new Date(2018, 1, 14, 11, 30)
    }, {
        Id: 13,
        Subject: 'Surgery - Roland',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 14, 11, 30),
        EndTime: new Date(2018, 1, 14, 12, 30)
    }, {
        Id: 14,
        Subject: 'Extraction - Francisco',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 14, 12, 30),
        EndTime: new Date(2018, 1, 14, 13, 30)
    }, {
        Id: 15,
        Subject: 'Therapy - Henriette',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 14, 13, 30),
        EndTime: new Date(2018, 1, 14, 15, 0)
    }, {
        Id: 16,
        Subject: 'Observation - Bernardo',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 9, 0),
        EndTime: new Date(2018, 1, 15, 10, 0)
    }, {
        Id: 17,
        Subject: 'Therapy - Wilson',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 10, 0),
        EndTime: new Date(2018, 1, 15, 11, 0)
    }, {
        Id: 18,
        Subject: 'Consulting - Horst',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 11, 0),
        EndTime: new Date(2018, 1, 15, 12, 0)
    }, {
        Id: 19,
        Subject: 'Surgery - Limeira',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 13, 30)
    }, {
        Id: 20,
        Subject: 'Observation - Victoria',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 15, 13, 30),
        EndTime: new Date(2018, 1, 15, 15, 30)
    }, {
        Id: 21,
        Subject: 'Extraction - Afonso',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 16, 9, 0),
        EndTime: new Date(2018, 1, 16, 10, 0)
    }, {
        Id: 22,
        Subject: 'Extraction - Paula',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 10, 0),
        EndTime: new Date(2018, 1, 16, 11, 0)
    }, {
        Id: 23,
        Subject: 'Observation - George',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 16, 11, 0),
        EndTime: new Date(2018, 1, 16, 12, 0)
    }, {
        Id: 24,
        Subject: 'Therapy - Smith',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 12, 0),
        EndTime: new Date(2018, 1, 16, 13, 30)
    }, {
        Id: 25,
        Subject: 'Surgery - Jennifer',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 13, 30),
        EndTime: new Date(2018, 1, 16, 15, 30)
    }
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Applicable validation rules can be referred from form validation documentation.

Add additional fields to the default editor

The additional fields can be added to the default event editor by making use of the popupOpen event which gets triggered before the event editor opens on the Scheduler. The popupOpen is a client-side event that triggers before any of the generic popups opens on the Scheduler. The additional field (any of the form elements) should be added with a common class name e-field, so as to handle and process those additional data along with the default event object. In the following example, an additional field Event Type has been added to the default event editor and its value is processed accordingly.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { createElement } from '@syncfusion/ej2-base';
import { EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, PopupOpenEventArgs } from '@syncfusion/ej2-angular-schedule';
import { eventsData} from './datasource.ts';
@Component({
  selector: 'app-root',
  providers: [DayService, WeekService, WorkWeekService, MonthService],
  // specifies the template string for the Schedule component
  template: `<ejs-schedule width='100%' height='550px' [selectedDate]='selectedDate' [views]='views' [eventSettings]='eventSettings' (popupOpen)='onPopupOpen($event)'></ejs-schedule>`
})


export class AppComponent {
    public selectedDate: Date = new Date(2018, 1, 15);
    public views: Array<string> = ['Day', 'Week', 'WorkWeek', 'Month'];
    public eventSettings: EventSettingsModel = {
        dataSource: eventsData
    };
    onPopupOpen(args: PopupOpenEventArgs): void {
        if (args.type === 'Editor') {
            // Create required custom elements in initial time
            if (!args.element.querySelector('.custom-field-row')) {
                let row: HTMLElement = createElement('div', { className: 'custom-field-row' });
                let formElement: HTMLElement = args.element.querySelector('.e-schedule-form');
                formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));
                let container: HTMLElement = createElement('div', { className: 'custom-field-container' });
                let inputEle: HTMLInputElement = createElement('input', {
                    className: 'e-field', attrs: { name: 'EventType' }
                }) as HTMLInputElement;
                container.appendChild(inputEle);
                row.appendChild(container);
                let dropDownList: DropDownList = new DropDownList({
                    dataSource: [
                        { text: 'Public Event', value: 'public-event' },
                        { text: 'Maintenance', value: 'maintenance' },
                        { text: 'Commercial Event', value: 'commercial-event' },
                        { text: 'Family Event', value: 'family-event' }
                    ],
                    fields: { text: 'text', value: 'value' },
                    value: (<{ [key: string]: Object }>(args.data)).EventType as string,
                    floatLabelType: 'Always', placeholder: 'Event Type'
                });
                dropDownList.appendTo(inputEle);
                inputEle.setAttribute('name', 'EventType');
            }
        }
    }
 }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule,
        TimePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService]
})
export class AppModule { }
Copied to clipboard
export let scheduleData: Object[] = [
    {
        Id: 1,
        Subject: 'Explosion of Betelgeuse Star',
        StartTime: new Date(2018, 1, 11, 9, 30),
        EndTime: new Date(2018, 1, 11, 11, 0),
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Thule Air Crash Report',
        StartTime: new Date(2018, 1, 12, 12, 0),
        EndTime: new Date(2018, 1, 12, 14, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Blue Moon Eclipse',
        StartTime: new Date(2018, 1, 13, 9, 30),
        EndTime: new Date(2018, 1, 13, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'Meteor Showers in 2018',
        StartTime: new Date(2018, 1, 14, 13, 0),
        EndTime: new Date(2018, 1, 14, 14, 30),
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'Milky Way as Melting pot',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Mysteries of Bermuda Triangle',
        StartTime: new Date(2018, 1, 15, 9, 30),
        EndTime: new Date(2018, 1, 15, 11, 0),
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Glaciers and Snowflakes',
        StartTime: new Date(2018, 1, 16, 11, 0),
        EndTime: new Date(2018, 1, 16, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Life on Mars',
        StartTime: new Date(2018, 1, 17, 9, 0),
        EndTime: new Date(2018, 1, 17, 10, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Alien Civilization',
        StartTime: new Date(2018, 1, 19, 11, 0),
        EndTime: new Date(2018, 1, 19, 13, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Wildlife Galleries',
        StartTime: new Date(2018, 1, 21, 11, 0),
        EndTime: new Date(2018, 1, 21, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'Best Photography 2018',
        StartTime: new Date(2018, 1, 22, 9, 30),
        EndTime: new Date(2018, 1, 22, 11, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'Smarter Puppies',
        StartTime: new Date(2018, 1, 9, 10, 0),
        EndTime: new Date(2018, 1, 9, 11, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Myths of Andromeda Galaxy',
        StartTime: new Date(2018, 1, 7, 10, 30),
        EndTime: new Date(2018, 1, 7, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Aliens vs Humans',
        StartTime: new Date(2018, 1, 5, 10, 0),
        EndTime: new Date(2018, 1, 5, 11, 30),
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Facts of Humming Birds',
        StartTime: new Date(2018, 1, 20, 9, 30),
        EndTime: new Date(2018, 1, 20, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 23, 11, 0),
        EndTime: new Date(2018, 1, 23, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 17,
        Subject: 'The Cycle of Seasons',
        StartTime: new Date(2018, 1, 12, 5, 30),
        EndTime: new Date(2018, 1, 12, 7, 30),
        CategoryColor: '#00bdae'
    }, {
        Id: 18,
        Subject: 'Space Galaxies and Planets',
        StartTime: new Date(2018, 1, 12, 17, 0),
        EndTime: new Date(2018, 1, 12, 18, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 19,
        Subject: 'Lifecycle of Bumblebee',
        StartTime: new Date(2018, 1, 15, 6, 0),
        EndTime: new Date(2018, 1, 15, 7, 30),
        CategoryColor: '#7fa900'
    }, {
        Id: 20,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 15, 16, 0),
        EndTime: new Date(2018, 1, 15, 18, 0),
        CategoryColor: '#ea7a57'
    }
];
export let eventsData: Object[] = [
    {
        Id: 1,
        Subject: 'Server Maintenance',
        StartTime: new Date(2018, 1, 11, 10, 0),
        EndTime: new Date(2018, 1, 11, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Art & Painting Gallery',
        StartTime: new Date(2018, 1, 12, 12, 0),
        EndTime: new Date(2018, 1, 12, 14, 0),
        EventType: 'public-event',
        City: 'Costa Rica',
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Dany Birthday Celebration',
        StartTime: new Date(2018, 1, 13, 10, 0),
        EndTime: new Date(2018, 1, 13, 11, 30),
        EventType: 'family-event',
        City: 'Kirkland',
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'John Wedding Anniversary',
        StartTime: new Date(2018, 1, 14, 9, 0),
        EndTime: new Date(2018, 1, 14, 10, 0),
        EventType: 'family-event',
        City: 'Redmond',
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'ISA Annual Conference',
        StartTime: new Date(2018, 1, 15, 10, 0),
        EndTime: new Date(2018, 1, 15, 11, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Equipment Maintenance',
        StartTime: new Date(2018, 1, 16, 12, 0),
        EndTime: new Date(2018, 1, 16, 14, 0),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Aircraft Maintenance',
        StartTime: new Date(2018, 1, 17, 10, 0),
        EndTime: new Date(2018, 1, 17, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Facilities Maintenance',
        StartTime: new Date(2018, 1, 19, 9, 30),
        EndTime: new Date(2018, 1, 19, 11, 0),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Britto Birthday Celebration',
        StartTime: new Date(2018, 1, 21, 11, 0),
        EndTime: new Date(2018, 1, 21, 13, 0),
        EventType: 'family-event',
        City: 'Greenland',
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Justin Wedding Anniversary',
        StartTime: new Date(2018, 1, 22, 9, 30),
        EndTime: new Date(2018, 1, 22, 11, 0),
        EventType: 'family-event',
        City: 'Finland',
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'AIEA Annual Meet',
        StartTime: new Date(2018, 1, 9, 10, 0),
        EndTime: new Date(2018, 1, 9, 11, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'AAN Conference',
        StartTime: new Date(2018, 1, 7, 10, 30),
        EndTime: new Date(2018, 1, 7, 12, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Photography Gallery',
        StartTime: new Date(2018, 1, 5, 10, 0),
        EndTime: new Date(2018, 1, 5, 11, 30),
        EventType: 'public-event',
        City: 'Chennai',
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Beach Clean-up',
        StartTime: new Date(2018, 1, 14, 12, 0),
        EndTime: new Date(2018, 1, 14, 2, 0),
        EventType: 'public-event',
        City: 'Mumbai',
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Turtle Walk',
        StartTime: new Date(2018, 1, 19, 13, 0),
        EndTime: new Date(2018, 1, 19, 14, 30),
        EventType: 'public-event',
        City: 'Costa Rica',
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Silent Walk for Cancer day',
        StartTime: new Date(2018, 1, 22, 13, 0),
        EndTime: new Date(2018, 1, 22, 14, 30),
        EventType: 'public-event',
        City: 'Chennai',
        CategoryColor: '#ea7a57'
}];
export let eventData: Object[] = [
    {
        Id: 1,
        Subject: 'Surgery - Andrew',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 9, 0),
        EndTime: new Date(2018, 1, 12, 10, 0)
    }, {
        Id: 2,
        Subject: 'Consulting - John',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 10, 0),
        EndTime: new Date(2018, 1, 12, 11, 30)
    }, {
        Id: 3,
        Subject: 'Therapy - Robert',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 12, 11, 30),
        EndTime: new Date(2018, 1, 12, 12, 30)
    }, {
        Id: 4,
        Subject: 'Observation - Steven',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 12, 30),
        EndTime: new Date(2018, 1, 12, 13, 30)
    }, {
        Id: 5,
        Subject: 'Extraction - Nancy',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 13, 30),
        EndTime: new Date(2018, 1, 12, 15, 0)
    }, {
        Id: 6,
        Subject: 'Surgery - Paul',
        EventType: 'New',
        StartTime: new Date(2018, 1, 13, 9, 0),
        EndTime: new Date(2018, 1, 13, 10, 0)
    }, {
        Id: 7,
        Subject: 'Extraction - Josephs',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 10, 0),
        EndTime: new Date(2018, 1, 13, 11, 0)
    }, {
        Id: 8,
        Subject: 'Consulting - Mario',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 11, 0),
        EndTime: new Date(2018, 1, 13, 12, 0)
    }, {
        Id: 9,
        Subject: 'Therapy - Saveley',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 13, 12, 0),
        EndTime: new Date(2018, 1, 13, 13, 30)
    }, {
        Id: 10,
        Subject: 'Observation - Cartrain',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 13, 30),
        EndTime: new Date(2018, 1, 13, 15, 30)
    }, {
        Id: 11,
        Subject: 'Consulting - Yang',
        EventType: 'New',
        StartTime: new Date(2018, 1, 14, 9, 0),
        EndTime: new Date(2018, 1, 14, 10, 0)
    }, {
        Id: 12,
        Subject: 'Observation - Michael',
        EventType: 'New',
        StartTime: new Date(2018, 1, 14, 10, 0),
        EndTime: new Date(2018, 1, 14, 11, 30)
    }, {
        Id: 13,
        Subject: 'Surgery - Roland',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 14, 11, 30),
        EndTime: new Date(2018, 1, 14, 12, 30)
    }, {
        Id: 14,
        Subject: 'Extraction - Francisco',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 14, 12, 30),
        EndTime: new Date(2018, 1, 14, 13, 30)
    }, {
        Id: 15,
        Subject: 'Therapy - Henriette',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 14, 13, 30),
        EndTime: new Date(2018, 1, 14, 15, 0)
    }, {
        Id: 16,
        Subject: 'Observation - Bernardo',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 9, 0),
        EndTime: new Date(2018, 1, 15, 10, 0)
    }, {
        Id: 17,
        Subject: 'Therapy - Wilson',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 10, 0),
        EndTime: new Date(2018, 1, 15, 11, 0)
    }, {
        Id: 18,
        Subject: 'Consulting - Horst',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 11, 0),
        EndTime: new Date(2018, 1, 15, 12, 0)
    }, {
        Id: 19,
        Subject: 'Surgery - Limeira',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 13, 30)
    }, {
        Id: 20,
        Subject: 'Observation - Victoria',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 15, 13, 30),
        EndTime: new Date(2018, 1, 15, 15, 30)
    }, {
        Id: 21,
        Subject: 'Extraction - Afonso',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 16, 9, 0),
        EndTime: new Date(2018, 1, 16, 10, 0)
    }, {
        Id: 22,
        Subject: 'Extraction - Paula',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 10, 0),
        EndTime: new Date(2018, 1, 16, 11, 0)
    }, {
        Id: 23,
        Subject: 'Observation - George',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 16, 11, 0),
        EndTime: new Date(2018, 1, 16, 12, 0)
    }, {
        Id: 24,
        Subject: 'Therapy - Smith',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 12, 0),
        EndTime: new Date(2018, 1, 16, 13, 30)
    }, {
        Id: 25,
        Subject: 'Surgery - Jennifer',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 13, 30),
        EndTime: new Date(2018, 1, 16, 15, 30)
    }
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

How to prevent the default focus of the editor widow

When we open the editor window, by default it will be focus to the Subject field. And we can able to prevent the default focusing of the editor window using the popupOpen event as shown in the following code example.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, PopupOpenEventArgs, ScheduleComponent } from '@syncfusion/ej2-angular-schedule';
import { eventsData} from './datasource.ts';
@Component({
  selector: 'app-root',
  providers: [DayService, WeekService, WorkWeekService, MonthService],
  // specifies the template string for the Schedule component
  template: `<ejs-schedule #scheduleObj width='100%' height='550px' [selectedDate]='selectedDate' [views]='views' [eventSettings]='eventSettings' (popupOpen)='onPopupOpen($event)'></ejs-schedule>`
})


export class AppComponent {
    @ViewChild("scheduleObj")
    public scheduleObj: ScheduleComponent;
    public selectedDate: Date = new Date(2018, 1, 15);
    public views: Array<string> = ['Day', 'Week', 'WorkWeek', 'Month'];
    public eventSettings: EventSettingsModel = {
        dataSource: eventsData
    };
    onPopupOpen(args: PopupOpenEventArgs): void {
        if (args.type === 'Editor') {
            let dialog = args.element.ej2_instances[0];
            dialog.open = function(args) {
                this.scheduleObj.eventBase.focusElement();
            };
        }
    }
 }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule,
        TimePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService]
})
export class AppModule { }
Copied to clipboard
export let scheduleData: Object[] = [
    {
        Id: 1,
        Subject: 'Explosion of Betelgeuse Star',
        StartTime: new Date(2018, 1, 11, 9, 30),
        EndTime: new Date(2018, 1, 11, 11, 0),
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Thule Air Crash Report',
        StartTime: new Date(2018, 1, 12, 12, 0),
        EndTime: new Date(2018, 1, 12, 14, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Blue Moon Eclipse',
        StartTime: new Date(2018, 1, 13, 9, 30),
        EndTime: new Date(2018, 1, 13, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'Meteor Showers in 2018',
        StartTime: new Date(2018, 1, 14, 13, 0),
        EndTime: new Date(2018, 1, 14, 14, 30),
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'Milky Way as Melting pot',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Mysteries of Bermuda Triangle',
        StartTime: new Date(2018, 1, 15, 9, 30),
        EndTime: new Date(2018, 1, 15, 11, 0),
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Glaciers and Snowflakes',
        StartTime: new Date(2018, 1, 16, 11, 0),
        EndTime: new Date(2018, 1, 16, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Life on Mars',
        StartTime: new Date(2018, 1, 17, 9, 0),
        EndTime: new Date(2018, 1, 17, 10, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Alien Civilization',
        StartTime: new Date(2018, 1, 19, 11, 0),
        EndTime: new Date(2018, 1, 19, 13, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Wildlife Galleries',
        StartTime: new Date(2018, 1, 21, 11, 0),
        EndTime: new Date(2018, 1, 21, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'Best Photography 2018',
        StartTime: new Date(2018, 1, 22, 9, 30),
        EndTime: new Date(2018, 1, 22, 11, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'Smarter Puppies',
        StartTime: new Date(2018, 1, 9, 10, 0),
        EndTime: new Date(2018, 1, 9, 11, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Myths of Andromeda Galaxy',
        StartTime: new Date(2018, 1, 7, 10, 30),
        EndTime: new Date(2018, 1, 7, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Aliens vs Humans',
        StartTime: new Date(2018, 1, 5, 10, 0),
        EndTime: new Date(2018, 1, 5, 11, 30),
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Facts of Humming Birds',
        StartTime: new Date(2018, 1, 20, 9, 30),
        EndTime: new Date(2018, 1, 20, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 23, 11, 0),
        EndTime: new Date(2018, 1, 23, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 17,
        Subject: 'The Cycle of Seasons',
        StartTime: new Date(2018, 1, 12, 5, 30),
        EndTime: new Date(2018, 1, 12, 7, 30),
        CategoryColor: '#00bdae'
    }, {
        Id: 18,
        Subject: 'Space Galaxies and Planets',
        StartTime: new Date(2018, 1, 12, 17, 0),
        EndTime: new Date(2018, 1, 12, 18, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 19,
        Subject: 'Lifecycle of Bumblebee',
        StartTime: new Date(2018, 1, 15, 6, 0),
        EndTime: new Date(2018, 1, 15, 7, 30),
        CategoryColor: '#7fa900'
    }, {
        Id: 20,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 15, 16, 0),
        EndTime: new Date(2018, 1, 15, 18, 0),
        CategoryColor: '#ea7a57'
    }
];
export let eventsData: Object[] = [
    {
        Id: 1,
        Subject: 'Server Maintenance',
        StartTime: new Date(2018, 1, 11, 10, 0),
        EndTime: new Date(2018, 1, 11, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Art & Painting Gallery',
        StartTime: new Date(2018, 1, 12, 12, 0),
        EndTime: new Date(2018, 1, 12, 14, 0),
        EventType: 'public-event',
        City: 'Costa Rica',
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Dany Birthday Celebration',
        StartTime: new Date(2018, 1, 13, 10, 0),
        EndTime: new Date(2018, 1, 13, 11, 30),
        EventType: 'family-event',
        City: 'Kirkland',
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'John Wedding Anniversary',
        StartTime: new Date(2018, 1, 14, 9, 0),
        EndTime: new Date(2018, 1, 14, 10, 0),
        EventType: 'family-event',
        City: 'Redmond',
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'ISA Annual Conference',
        StartTime: new Date(2018, 1, 15, 10, 0),
        EndTime: new Date(2018, 1, 15, 11, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Equipment Maintenance',
        StartTime: new Date(2018, 1, 16, 12, 0),
        EndTime: new Date(2018, 1, 16, 14, 0),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Aircraft Maintenance',
        StartTime: new Date(2018, 1, 17, 10, 0),
        EndTime: new Date(2018, 1, 17, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Facilities Maintenance',
        StartTime: new Date(2018, 1, 19, 9, 30),
        EndTime: new Date(2018, 1, 19, 11, 0),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Britto Birthday Celebration',
        StartTime: new Date(2018, 1, 21, 11, 0),
        EndTime: new Date(2018, 1, 21, 13, 0),
        EventType: 'family-event',
        City: 'Greenland',
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Justin Wedding Anniversary',
        StartTime: new Date(2018, 1, 22, 9, 30),
        EndTime: new Date(2018, 1, 22, 11, 0),
        EventType: 'family-event',
        City: 'Finland',
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'AIEA Annual Meet',
        StartTime: new Date(2018, 1, 9, 10, 0),
        EndTime: new Date(2018, 1, 9, 11, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'AAN Conference',
        StartTime: new Date(2018, 1, 7, 10, 30),
        EndTime: new Date(2018, 1, 7, 12, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Photography Gallery',
        StartTime: new Date(2018, 1, 5, 10, 0),
        EndTime: new Date(2018, 1, 5, 11, 30),
        EventType: 'public-event',
        City: 'Chennai',
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Beach Clean-up',
        StartTime: new Date(2018, 1, 14, 12, 0),
        EndTime: new Date(2018, 1, 14, 2, 0),
        EventType: 'public-event',
        City: 'Mumbai',
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Turtle Walk',
        StartTime: new Date(2018, 1, 19, 13, 0),
        EndTime: new Date(2018, 1, 19, 14, 30),
        EventType: 'public-event',
        City: 'Costa Rica',
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Silent Walk for Cancer day',
        StartTime: new Date(2018, 1, 22, 13, 0),
        EndTime: new Date(2018, 1, 22, 14, 30),
        EventType: 'public-event',
        City: 'Chennai',
        CategoryColor: '#ea7a57'
}];
export let eventData: Object[] = [
    {
        Id: 1,
        Subject: 'Surgery - Andrew',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 9, 0),
        EndTime: new Date(2018, 1, 12, 10, 0)
    }, {
        Id: 2,
        Subject: 'Consulting - John',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 10, 0),
        EndTime: new Date(2018, 1, 12, 11, 30)
    }, {
        Id: 3,
        Subject: 'Therapy - Robert',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 12, 11, 30),
        EndTime: new Date(2018, 1, 12, 12, 30)
    }, {
        Id: 4,
        Subject: 'Observation - Steven',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 12, 30),
        EndTime: new Date(2018, 1, 12, 13, 30)
    }, {
        Id: 5,
        Subject: 'Extraction - Nancy',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 13, 30),
        EndTime: new Date(2018, 1, 12, 15, 0)
    }, {
        Id: 6,
        Subject: 'Surgery - Paul',
        EventType: 'New',
        StartTime: new Date(2018, 1, 13, 9, 0),
        EndTime: new Date(2018, 1, 13, 10, 0)
    }, {
        Id: 7,
        Subject: 'Extraction - Josephs',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 10, 0),
        EndTime: new Date(2018, 1, 13, 11, 0)
    }, {
        Id: 8,
        Subject: 'Consulting - Mario',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 11, 0),
        EndTime: new Date(2018, 1, 13, 12, 0)
    }, {
        Id: 9,
        Subject: 'Therapy - Saveley',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 13, 12, 0),
        EndTime: new Date(2018, 1, 13, 13, 30)
    }, {
        Id: 10,
        Subject: 'Observation - Cartrain',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 13, 30),
        EndTime: new Date(2018, 1, 13, 15, 30)
    }, {
        Id: 11,
        Subject: 'Consulting - Yang',
        EventType: 'New',
        StartTime: new Date(2018, 1, 14, 9, 0),
        EndTime: new Date(2018, 1, 14, 10, 0)
    }, {
        Id: 12,
        Subject: 'Observation - Michael',
        EventType: 'New',
        StartTime: new Date(2018, 1, 14, 10, 0),
        EndTime: new Date(2018, 1, 14, 11, 30)
    }, {
        Id: 13,
        Subject: 'Surgery - Roland',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 14, 11, 30),
        EndTime: new Date(2018, 1, 14, 12, 30)
    }, {
        Id: 14,
        Subject: 'Extraction - Francisco',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 14, 12, 30),
        EndTime: new Date(2018, 1, 14, 13, 30)
    }, {
        Id: 15,
        Subject: 'Therapy - Henriette',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 14, 13, 30),
        EndTime: new Date(2018, 1, 14, 15, 0)
    }, {
        Id: 16,
        Subject: 'Observation - Bernardo',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 9, 0),
        EndTime: new Date(2018, 1, 15, 10, 0)
    }, {
        Id: 17,
        Subject: 'Therapy - Wilson',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 10, 0),
        EndTime: new Date(2018, 1, 15, 11, 0)
    }, {
        Id: 18,
        Subject: 'Consulting - Horst',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 11, 0),
        EndTime: new Date(2018, 1, 15, 12, 0)
    }, {
        Id: 19,
        Subject: 'Surgery - Limeira',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 13, 30)
    }, {
        Id: 20,
        Subject: 'Observation - Victoria',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 15, 13, 30),
        EndTime: new Date(2018, 1, 15, 15, 30)
    }, {
        Id: 21,
        Subject: 'Extraction - Afonso',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 16, 9, 0),
        EndTime: new Date(2018, 1, 16, 10, 0)
    }, {
        Id: 22,
        Subject: 'Extraction - Paula',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 10, 0),
        EndTime: new Date(2018, 1, 16, 11, 0)
    }, {
        Id: 23,
        Subject: 'Observation - George',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 16, 11, 0),
        EndTime: new Date(2018, 1, 16, 12, 0)
    }, {
        Id: 24,
        Subject: 'Therapy - Smith',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 12, 0),
        EndTime: new Date(2018, 1, 16, 13, 30)
    }, {
        Id: 25,
        Subject: 'Surgery - Jennifer',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 13, 30),
        EndTime: new Date(2018, 1, 16, 15, 30)
    }
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Customizing the default time duration in editor window

In default event editor window, start and end time duration are processed based on the interval value set within the timeScale property. By default, interval value is set to 30, and therefore the start/end time duration within the event editor will be in a 30 minutes time difference. You can change this duration value by changing the duration option within the popupOpen event as shown in the following code example.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';
import { EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, PopupOpenEventArgs } from '@syncfusion/ej2-angular-schedule';
import { scheduleData } from './datasource.ts';
@Component({
    selector: 'app-root',
    providers: [DayService, WeekService, WorkWeekService, MonthService],
    // specifies the template string for the Schedule component
    template: `<ejs-schedule width='100%' height='550px' [selectedDate]='selectedDate' [views]='views' [eventSettings]='eventSettings' (popupOpen)='onPopupOpen($event)'></ejs-schedule>`
})


export class AppComponent {
    public selectedDate: Date = new Date(2018, 1, 15);
    public views: Array<string> = ['Day', 'Week', 'WorkWeek', 'Month'];
    public eventSettings: EventSettingsModel = {
        dataSource: scheduleData
    };
    onPopupOpen(args: PopupOpenEventArgs): void {
        if (args.type === 'Editor') {
            args.duration = 60;
        }
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule,
        TimePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService]
})
export class AppModule { }
Copied to clipboard
export let scheduleData: Object[] = [
    {
        Id: 1,
        Subject: 'Explosion of Betelgeuse Star',
        StartTime: new Date(2018, 1, 11, 9, 30),
        EndTime: new Date(2018, 1, 11, 11, 0),
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Thule Air Crash Report',
        StartTime: new Date(2018, 1, 12, 12, 0),
        EndTime: new Date(2018, 1, 12, 14, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Blue Moon Eclipse',
        StartTime: new Date(2018, 1, 13, 9, 30),
        EndTime: new Date(2018, 1, 13, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'Meteor Showers in 2018',
        StartTime: new Date(2018, 1, 14, 13, 0),
        EndTime: new Date(2018, 1, 14, 14, 30),
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'Milky Way as Melting pot',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Mysteries of Bermuda Triangle',
        StartTime: new Date(2018, 1, 15, 9, 30),
        EndTime: new Date(2018, 1, 15, 11, 0),
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Glaciers and Snowflakes',
        StartTime: new Date(2018, 1, 16, 11, 0),
        EndTime: new Date(2018, 1, 16, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Life on Mars',
        StartTime: new Date(2018, 1, 17, 9, 0),
        EndTime: new Date(2018, 1, 17, 10, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Alien Civilization',
        StartTime: new Date(2018, 1, 19, 11, 0),
        EndTime: new Date(2018, 1, 19, 13, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Wildlife Galleries',
        StartTime: new Date(2018, 1, 21, 11, 0),
        EndTime: new Date(2018, 1, 21, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'Best Photography 2018',
        StartTime: new Date(2018, 1, 22, 9, 30),
        EndTime: new Date(2018, 1, 22, 11, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'Smarter Puppies',
        StartTime: new Date(2018, 1, 9, 10, 0),
        EndTime: new Date(2018, 1, 9, 11, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Myths of Andromeda Galaxy',
        StartTime: new Date(2018, 1, 7, 10, 30),
        EndTime: new Date(2018, 1, 7, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Aliens vs Humans',
        StartTime: new Date(2018, 1, 5, 10, 0),
        EndTime: new Date(2018, 1, 5, 11, 30),
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Facts of Humming Birds',
        StartTime: new Date(2018, 1, 20, 9, 30),
        EndTime: new Date(2018, 1, 20, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 23, 11, 0),
        EndTime: new Date(2018, 1, 23, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 17,
        Subject: 'The Cycle of Seasons',
        StartTime: new Date(2018, 1, 12, 5, 30),
        EndTime: new Date(2018, 1, 12, 7, 30),
        CategoryColor: '#00bdae'
    }, {
        Id: 18,
        Subject: 'Space Galaxies and Planets',
        StartTime: new Date(2018, 1, 12, 17, 0),
        EndTime: new Date(2018, 1, 12, 18, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 19,
        Subject: 'Lifecycle of Bumblebee',
        StartTime: new Date(2018, 1, 15, 6, 0),
        EndTime: new Date(2018, 1, 15, 7, 30),
        CategoryColor: '#7fa900'
    }, {
        Id: 20,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 15, 16, 0),
        EndTime: new Date(2018, 1, 15, 18, 0),
        CategoryColor: '#ea7a57'
    }
];
export let eventsData: Object[] = [
    {
        Id: 1,
        Subject: 'Server Maintenance',
        StartTime: new Date(2018, 1, 11, 10, 0),
        EndTime: new Date(2018, 1, 11, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Art & Painting Gallery',
        StartTime: new Date(2018, 1, 12, 12, 0),
        EndTime: new Date(2018, 1, 12, 14, 0),
        EventType: 'public-event',
        City: 'Costa Rica',
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Dany Birthday Celebration',
        StartTime: new Date(2018, 1, 13, 10, 0),
        EndTime: new Date(2018, 1, 13, 11, 30),
        EventType: 'family-event',
        City: 'Kirkland',
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'John Wedding Anniversary',
        StartTime: new Date(2018, 1, 14, 9, 0),
        EndTime: new Date(2018, 1, 14, 10, 0),
        EventType: 'family-event',
        City: 'Redmond',
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'ISA Annual Conference',
        StartTime: new Date(2018, 1, 15, 10, 0),
        EndTime: new Date(2018, 1, 15, 11, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Equipment Maintenance',
        StartTime: new Date(2018, 1, 16, 12, 0),
        EndTime: new Date(2018, 1, 16, 14, 0),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Aircraft Maintenance',
        StartTime: new Date(2018, 1, 17, 10, 0),
        EndTime: new Date(2018, 1, 17, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Facilities Maintenance',
        StartTime: new Date(2018, 1, 19, 9, 30),
        EndTime: new Date(2018, 1, 19, 11, 0),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Britto Birthday Celebration',
        StartTime: new Date(2018, 1, 21, 11, 0),
        EndTime: new Date(2018, 1, 21, 13, 0),
        EventType: 'family-event',
        City: 'Greenland',
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Justin Wedding Anniversary',
        StartTime: new Date(2018, 1, 22, 9, 30),
        EndTime: new Date(2018, 1, 22, 11, 0),
        EventType: 'family-event',
        City: 'Finland',
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'AIEA Annual Meet',
        StartTime: new Date(2018, 1, 9, 10, 0),
        EndTime: new Date(2018, 1, 9, 11, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'AAN Conference',
        StartTime: new Date(2018, 1, 7, 10, 30),
        EndTime: new Date(2018, 1, 7, 12, 30),
        EventType: 'commercial-event',
        City: 'USA',
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Photography Gallery',
        StartTime: new Date(2018, 1, 5, 10, 0),
        EndTime: new Date(2018, 1, 5, 11, 30),
        EventType: 'public-event',
        City: 'Chennai',
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Beach Clean-up',
        StartTime: new Date(2018, 1, 14, 12, 0),
        EndTime: new Date(2018, 1, 14, 2, 0),
        EventType: 'public-event',
        City: 'Mumbai',
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Turtle Walk',
        StartTime: new Date(2018, 1, 19, 13, 0),
        EndTime: new Date(2018, 1, 19, 14, 30),
        EventType: 'public-event',
        City: 'Costa Rica',
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Silent Walk for Cancer day',
        StartTime: new Date(2018, 1, 22, 13, 0),
        EndTime: new Date(2018, 1, 22, 14, 30),
        EventType: 'public-event',
        City: 'Chennai',
        CategoryColor: '#ea7a57'
}];
export let eventData: Object[] = [
    {
        Id: 1,
        Subject: 'Surgery - Andrew',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 9, 0),
        EndTime: new Date(2018, 1, 12, 10, 0)
    }, {
        Id: 2,
        Subject: 'Consulting - John',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 10, 0),
        EndTime: new Date(2018, 1, 12, 11, 30)
    }, {
        Id: 3,
        Subject: 'Therapy - Robert',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 12, 11, 30),
        EndTime: new Date(2018, 1, 12, 12, 30)
    }, {
        Id: 4,
        Subject: 'Observation - Steven',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 12, 30),
        EndTime: new Date(2018, 1, 12, 13, 30)
    }, {
        Id: 5,
        Subject: 'Extraction - Nancy',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 12, 13, 30),
        EndTime: new Date(2018, 1, 12, 15, 0)
    }, {
        Id: 6,
        Subject: 'Surgery - Paul',
        EventType: 'New',
        StartTime: new Date(2018, 1, 13, 9, 0),
        EndTime: new Date(2018, 1, 13, 10, 0)
    }, {
        Id: 7,
        Subject: 'Extraction - Josephs',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 10, 0),
        EndTime: new Date(2018, 1, 13, 11, 0)
    }, {
        Id: 8,
        Subject: 'Consulting - Mario',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 11, 0),
        EndTime: new Date(2018, 1, 13, 12, 0)
    }, {
        Id: 9,
        Subject: 'Therapy - Saveley',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 13, 12, 0),
        EndTime: new Date(2018, 1, 13, 13, 30)
    }, {
        Id: 10,
        Subject: 'Observation - Cartrain',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 13, 13, 30),
        EndTime: new Date(2018, 1, 13, 15, 30)
    }, {
        Id: 11,
        Subject: 'Consulting - Yang',
        EventType: 'New',
        StartTime: new Date(2018, 1, 14, 9, 0),
        EndTime: new Date(2018, 1, 14, 10, 0)
    }, {
        Id: 12,
        Subject: 'Observation - Michael',
        EventType: 'New',
        StartTime: new Date(2018, 1, 14, 10, 0),
        EndTime: new Date(2018, 1, 14, 11, 30)
    }, {
        Id: 13,
        Subject: 'Surgery - Roland',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 14, 11, 30),
        EndTime: new Date(2018, 1, 14, 12, 30)
    }, {
        Id: 14,
        Subject: 'Extraction - Francisco',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 14, 12, 30),
        EndTime: new Date(2018, 1, 14, 13, 30)
    }, {
        Id: 15,
        Subject: 'Therapy - Henriette',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 14, 13, 30),
        EndTime: new Date(2018, 1, 14, 15, 0)
    }, {
        Id: 16,
        Subject: 'Observation - Bernardo',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 9, 0),
        EndTime: new Date(2018, 1, 15, 10, 0)
    }, {
        Id: 17,
        Subject: 'Therapy - Wilson',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 10, 0),
        EndTime: new Date(2018, 1, 15, 11, 0)
    }, {
        Id: 18,
        Subject: 'Consulting - Horst',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 15, 11, 0),
        EndTime: new Date(2018, 1, 15, 12, 0)
    }, {
        Id: 19,
        Subject: 'Surgery - Limeira',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 13, 30)
    }, {
        Id: 20,
        Subject: 'Observation - Victoria',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 15, 13, 30),
        EndTime: new Date(2018, 1, 15, 15, 30)
    }, {
        Id: 21,
        Subject: 'Extraction - Afonso',
        EventType: 'Confirmed',
        StartTime: new Date(2018, 1, 16, 9, 0),
        EndTime: new Date(2018, 1, 16, 10, 0)
    }, {
        Id: 22,
        Subject: 'Extraction - Paula',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 10, 0),
        EndTime: new Date(2018, 1, 16, 11, 0)
    }, {
        Id: 23,
        Subject: 'Observation - George',
        EventType: 'Requested',
        StartTime: new Date(2018, 1, 16, 11, 0),
        EndTime: new Date(2018, 1, 16, 12, 0)
    }, {
        Id: 24,
        Subject: 'Therapy - Smith',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 12, 0),
        EndTime: new Date(2018, 1, 16, 13, 30)
    }, {
        Id: 25,
        Subject: 'Surgery - Jennifer',
        EventType: 'New',
        StartTime: new Date(2018, 1, 16, 13, 30),
        EndTime: new Date(2018, 1, 16, 15, 30)
    }
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

How to prevent the display of editor and quick popups

It is possible to prevent the display of editor and quick popup windows by passing the value true to cancel option within the popupOpen event.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';
import { EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, PopupOpenEventArgs } from '@syncfusion/ej2-angular-schedule';
import { scheduleData } from './datasource.ts';
@Component({
    selector: 'app-root',
    providers: [DayService, WeekService, WorkWeekService, MonthService],
    // specifies the template string for the Schedule component
    template: `<ejs-schedule width='100%' height='550px' [selectedDate]='selectedDate' [views]='views' [eventSettings]='eventSettings' (popupOpen)='onPopupOpen($event)'></ejs-schedule>`
})


export class AppComponent {
    public selectedDate: Date = new Date(2018, 1, 15);
    public views: Array<string> = ['Day', 'Week', 'WorkWeek', 'Month'];
    public eventSettings: EventSettingsModel = {
        dataSource: scheduleData
    };
    onPopupOpen(args: PopupOpenEventArgs): void {
        if (args.type === 'Editor' || args.type === 'QuickInfo')  {
            args.cancel = true;
        }
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule,
        TimePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService]
})
export class AppModule { }
Copied to clipboard
export let scheduleData: Object[] = [
    {
        Id: 1,
        Subject: 'Explosion of Betelgeuse Star',
        StartTime: new Date(2018, 1, 11, 9, 30),
        EndTime: new Date(2018, 1, 11, 11, 0),
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Thule Air Crash Report',
        StartTime: new Date(2018, 1, 12, 12, 0),
        EndTime: new Date(2018, 1, 12, 14, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Blue Moon Eclipse',
        StartTime: new Date(2018, 1, 13, 9, 30),
        EndTime: new Date(2018, 1, 13, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'Meteor Showers in 2018',
        StartTime: new Date(2018, 1, 14, 13, 0),
        EndTime: new Date(2018, 1, 14, 14, 30),
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'Milky Way as Melting pot',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Mysteries of Bermuda Triangle',
        StartTime: new Date(2018, 1, 15, 9, 30),
        EndTime: new Date(2018, 1, 15, 11, 0),
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Glaciers and Snowflakes',
        StartTime: new Date(2018, 1, 16, 11, 0),
        EndTime: new Date(2018, 1, 16, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Life on Mars',
        StartTime: new Date(2018, 1, 17, 9, 0),
        EndTime: new Date(2018, 1, 17, 10, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Alien Civilization',
        StartTime: new Date(2018, 1, 19, 11, 0),
        EndTime: new Date(2018, 1, 19, 13, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Wildlife Galleries',
        StartTime: new Date(2018, 1, 21, 11, 0),
        EndTime: new Date(2018, 1, 21, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'Best Photography 2018',
        StartTime: new Date(2018, 1, 22, 9, 30),
        EndTime: new Date(2018, 1, 22, 11, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'Smarter Puppies',
        StartTime: new Date(2018, 1, 9, 10, 0),
        EndTime: new Date(2018, 1, 9, 11, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Myths of Andromeda Galaxy',
        StartTime: new Date(2018, 1, 7, 10, 30),
        EndTime: new Date(2018, 1, 7, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Aliens vs Humans',
        StartTime: new Date(2018, 1, 5, 10, 0),
        EndTime: new Date(2018, 1, 5, 11, 30),
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Facts of Humming Birds',
        StartTime: new Date(2018, 1, 20, 9, 30),
        EndTime: new Date(2018, 1, 20, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 23, 11, 0),
        EndTime: new Date(2018, 1, 23, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 17,
        Subject: 'The Cycle of Seasons',
        StartTime: new Date(2018, 1, 12, 5, 30),
        EndTime: new Date(2018, 1, 12, 7, 30),
        CategoryColor: '#00bdae'
    }, {
        Id: 18,
        Subject: 'Space Galaxies and Planets',
        StartTime: new Date(2018, 1, 12, 17, 0),
        EndTime: new Date(2018, 1, 12, 18, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 19,
        Subject: 'Lifecycle of Bumblebee',
        StartTime: new Date(2018, 1, 15, 6, 0),
        EndTime: new Date(2018, 1, 15, 7, 30),
        CategoryColor: '#7fa900'
    }, {
        Id: 20,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 15, 16, 0),
        EndTime: new Date(2018, 1, 15, 18, 0),
        CategoryColor: '#ea7a57'
    }
];
export let eventsData: Object[] = [
    {
        Id: 1,
        Subject: 'Server Maintenance',
        StartTime: new Date(2018, 1, 11, 10, 0),
        EndTime: new Date(2018, 1, 11, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Art & Painting Gallery',
        StartTime: new Date(2018, 1, 12, 12, 0),
        EndTime: new Date(2018, 1, 12, 14, 0),
        EventType: 'public-event',
        City: 'Costa Rica',
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Dany Birthday Celebration',
        StartTime: new Date(2018, 1, 13, 10, 0),
        EndTime: new Date(2018, 1, 13, 11, 30),
        EventType: 'family-event',
        City: 'Kirkland',
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'John Wedding Anniversary',
        StartTime: new Date(2018, 1, 14, 9, 0),
        EndTime: new Date(2018, 1, 14, 10, 0),
        EventType: 'family-event',
        City: 'Redmond',
        CategoryColor: '#ea7a57'
    }