Search results

Recurrence editor

The Recurrence editor is integrated into Scheduler editor window by default, to process the recurrence rule generation for events. Apart from this, it can also be used as an individual component referring from the Scheduler repository to work with the recurrence related processes.

All the valid recurrence rule string mentioned in the iCalendar specifications are applicable to use with the recurrence editor.

Customizing the repeat type option in editor

By default, there are 5 types of repeat options available in recurrence editor such as,

  • Never
  • Daily
  • Weekly
  • Monthly
  • Yearly

It is possible to customize the recurrence editor to display only the specific repeat options such as Daily and Weekly options alone by setting the appropriate frequencies option.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
import { Component, ViewChild} from '@angular/core';
import { EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, AgendaService, PopupOpenEventArgs, ScheduleComponent } from '@syncfusion/ej2-angular-schedule';
import { scheduleData } from './datasource';

@Component({
  selector: 'app-root',
  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],
  // specifies the template string for the Schedule component
  template: `<ejs-schedule #scheduleObj width='100%' height='550px' [selectedDate]='selectedDate'
  [eventSettings]='eventSettings' (popupOpen)='onPopupOpen($event)'>
  </ejs-schedule>`
})
export class AppComponent {
  @ViewChild('scheduleObj')
  public scheduleObj: ScheduleComponent;
  public selectedDate: Date = new Date(2018, 1, 15);
  public eventSettings: EventSettingsModel = { dataSource: scheduleData };
  onPopupOpen(args: PopupOpenEventArgs): void {
    if (args.type == 'Editor') {
        (<any>this.scheduleObj.eventWindow).recurrenceEditor.frequencies = ['daily', 'weekly'];
    }
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService]
})
export class AppModule { }
export let fifaEventsData: Object[] = [
    {
        Id: 1,
        Subject: 'RUSSIA vs SAUDI ARABIA',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 14, 15, 0),
        EndTime: new Date(2018, 5, 14, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 2,
        Subject: 'EGYPT vs URUGUAY',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 15, 12, 0),
        EndTime: new Date(2018, 5, 15, 14, 0),
        StartTimezone: 'Asia/Yekaterinburg',
        EndTimezone: 'Asia/Yekaterinburg',
        City: 'Ekaterinburg',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 3,
        Subject: 'MOROCCO vs IR IRAN',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 15, 15, 0),
        EndTime: new Date(2018, 5, 15, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saint Petersburg',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 4,
        Subject: 'PORTUGAL vs SPAIN',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 15, 18, 0),
        EndTime: new Date(2018, 5, 15, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Sochi',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 5,
        Subject: 'FRANCE vs AUSTRALIA',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 16, 10, 0),
        EndTime: new Date(2018, 5, 16, 12, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Kazan',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 6,
        Subject: 'ARGENTINA vs ICELAND',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 16, 13, 0),
        EndTime: new Date(2018, 5, 16, 15, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 7,
        Subject: 'PERU vs DENMARK',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 16, 16, 0),
        EndTime: new Date(2018, 5, 16, 18, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saransk',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 8,
        Subject: 'CROATIA vs NIGERIA',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 16, 19, 0),
        EndTime: new Date(2018, 5, 16, 21, 0),
        StartTimezone: 'Europe/Kaliningrad',
        EndTimezone: 'Europe/Kaliningrad',
        City: 'Kaliningrad',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 9,
        Subject: 'COSTA RICA vs SERBIA',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 17, 12, 0),
        EndTime: new Date(2018, 5, 17, 14, 0),
        StartTimezone: 'Europe/Samara',
        EndTimezone: 'Europe/Samara',
        City: 'Samara',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 10,
        Subject: 'GERMANY vs MEXICO',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 17, 15, 0),
        EndTime: new Date(2018, 5, 17, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 11,
        Subject: 'BRAZIL vs SWITZERLAND',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 17, 18, 0),
        EndTime: new Date(2018, 5, 17, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Rostov-On-Don',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 12,
        Subject: 'SWEDEN vs KOREA REPUBLIC',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 18, 12, 0),
        EndTime: new Date(2018, 5, 18, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Nizhny Novgorod',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 13,
        Subject: 'BELGIUM vs PANAMA',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 18, 15, 0),
        EndTime: new Date(2018, 5, 18, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Sochi',
        CategoryColor: '#8e24aa',
        GroupId: 7
    }, {
        Id: 14,
        Subject: 'TUNISIA vs ENGLAND',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 18, 18, 0),
        EndTime: new Date(2018, 5, 18, 20, 0),
        StartTimezone: 'Europe/Volgograd',
        EndTimezone: 'Europe/Volgograd',
        City: 'Volgograd',
        CategoryColor: '#8e24aa',
        GroupId: 7
    }, {
        Id: 15,
        Subject: 'COLOMBIA vs JAPAN',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 19, 12, 0),
        EndTime: new Date(2018, 5, 19, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saransk',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 16,
        Subject: 'POLAND vs SENEGAL',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 19, 15, 0),
        EndTime: new Date(2018, 5, 19, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 17,
        Subject: 'RUSSIA vs EGYPT',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 19, 18, 0),
        EndTime: new Date(2018, 5, 19, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saint Petersburg',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 18,
        Subject: 'PORTUGAL vs MOROCCO',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 20, 12, 0),
        EndTime: new Date(2018, 5, 20, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Rostov-On-Don',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 19,
        Subject: 'URUGUAY vs SAUDI ARABIA',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 20, 15, 0),
        EndTime: new Date(2018, 5, 20, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 20,
        Subject: 'IR IRAN vs SPAIN',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 20, 18, 0),
        EndTime: new Date(2018, 5, 20, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Kazan',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 21,
        Subject: 'DENMARK vs AUSTRALIA',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 21, 12, 0),
        EndTime: new Date(2018, 5, 21, 14, 0),
        StartTimezone: 'Europe/Samara',
        EndTimezone: 'Europe/Samara',
        City: 'Samara',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 22,
        Subject: 'FRANCE vs PERU',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 21, 15, 0),
        EndTime: new Date(2018, 5, 21, 17, 0),
        StartTimezone: 'Asia/Yekaterinburg',
        EndTimezone: 'Asia/Yekaterinburg',
        City: 'Ekaterinburg',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 23,
        Subject: 'ARGENTINA vs CROATIA',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 21, 18, 0),
        EndTime: new Date(2018, 5, 21, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Nizhny Novgorod',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 24,
        Subject: 'BRAZIL vs COSTA RICA',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 22, 12, 0),
        EndTime: new Date(2018, 5, 22, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saint Petersburg',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 25,
        Subject: 'NIGERIA vs ICELAND',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 22, 15, 0),
        EndTime: new Date(2018, 5, 22, 17, 0),
        StartTimezone: 'Europe/Volgograd',
        EndTimezone: 'Europe/Volgograd',
        City: 'Volgograd',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 26,
        Subject: 'SERBIA vs SWITZERLAND',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 22, 18, 0),
        EndTime: new Date(2018, 5, 22, 20, 0),
        StartTimezone: 'Europe/Kaliningrad',
        EndTimezone: 'Europe/Kaliningrad',
        City: 'Kaliningrad',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 27,
        Subject: 'BELGIUM vs TUNISIA',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 23, 12, 0),
        EndTime: new Date(2018, 5, 23, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#8e24aa',
        GroupId: 7
    }, {
        Id: 28,
        Subject: 'KOREA REPUBLIC vs MEXICO',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 23, 15, 0),
        EndTime: new Date(2018, 5, 23, 17, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Rostov-On-Don',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 29,
        Subject: 'GERMANY vs SWEDEN',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 23, 18, 0),
        EndTime: new Date(2018, 5, 23, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Sochi',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 30,
        Subject: 'ENGLAND vs PANAMA',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 24, 12, 0),
        EndTime: new Date(2018, 5, 24, 14, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Nizhny Novgorod',
        CategoryColor: '#8e24aa',
        GroupId: 7
    }, {
        Id: 31,
        Subject: 'JAPAN vs SENEGAL',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 24, 15, 0),
        EndTime: new Date(2018, 5, 24, 17, 0),
        StartTimezone: 'Asia/Yekaterinburg',
        EndTimezone: 'Asia/Yekaterinburg',
        City: 'Ekaterinburg',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 32,
        Subject: 'POLAND vs COLOMBIA',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 24, 18, 0),
        EndTime: new Date(2018, 5, 24, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Kazan',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 33,
        Subject: 'URUGUAY vs RUSSIA',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 25, 14, 0),
        EndTime: new Date(2018, 5, 25, 16, 0),
        StartTimezone: 'Europe/Samara',
        EndTimezone: 'Europe/Samara',
        City: 'Samara',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 34,
        Subject: 'SAUDI ARABIA vs EGYPT',
        Description: 'Group A',
        StartTime: new Date(2018, 5, 25, 14, 0),
        EndTime: new Date(2018, 5, 25, 16, 0),
        StartTimezone: 'Europe/Volgograd',
        EndTimezone: 'Europe/Volgograd',
        City: 'Volgograd',
        CategoryColor: '#1aaa55',
        GroupId: 1
    }, {
        Id: 35,
        Subject: 'IR IRAN vs PORTUGAL',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 25, 18, 0),
        EndTime: new Date(2018, 5, 25, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saransk',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 36,
        Subject: 'SPAIN vs MOROCCO',
        Description: 'Group B',
        StartTime: new Date(2018, 5, 25, 18, 0),
        EndTime: new Date(2018, 5, 25, 20, 0),
        StartTimezone: 'Europe/Kaliningrad',
        EndTimezone: 'Europe/Kaliningrad',
        City: 'Kaliningrad',
        CategoryColor: '#357cd2',
        GroupId: 2
    }, {
        Id: 37,
        Subject: 'DENMARK vs FRANCE',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 26, 14, 0),
        EndTime: new Date(2018, 5, 26, 16, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 38,
        Subject: 'AUSTRALIA vs PERU',
        Description: 'Group C',
        StartTime: new Date(2018, 5, 26, 14, 0),
        EndTime: new Date(2018, 5, 26, 16, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Sochi',
        CategoryColor: '#7fa900',
        GroupId: 3
    }, {
        Id: 39,
        Subject: 'NIGERIA vs ARGENTINA',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 26, 18, 0),
        EndTime: new Date(2018, 5, 26, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saint Petersburg',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 40,
        Subject: 'ICELAND vs CROATIA',
        Description: 'Group D',
        StartTime: new Date(2018, 5, 26, 18, 0),
        EndTime: new Date(2018, 5, 26, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Rostov-On-Don',
        CategoryColor: '#ea7a57',
        GroupId: 4
    }, {
        Id: 41,
        Subject: 'MEXICO vs SWEDEN',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 27, 14, 0),
        EndTime: new Date(2018, 5, 27, 16, 0),
        StartTimezone: 'Asia/Yekaterinburg',
        EndTimezone: 'Asia/Yekaterinburg',
        City: 'Ekaterinburg',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 42,
        Subject: 'KOREA REPUBLIC vs GERMANY',
        Description: 'Group F',
        StartTime: new Date(2018, 5, 27, 14, 0),
        EndTime: new Date(2018, 5, 27, 16, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Kazan',
        CategoryColor: '#f57f17',
        GroupId: 6
    }, {
        Id: 43,
        Subject: 'SERBIA vs BRAZIL',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 27, 18, 0),
        EndTime: new Date(2018, 5, 27, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Moscow',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 44,
        Subject: 'SWITZERLAND vs COSTA RICA',
        Description: 'Group E',
        StartTime: new Date(2018, 5, 27, 18, 0),
        EndTime: new Date(2018, 5, 27, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Nizhny Novgorod',
        CategoryColor: '#00bdae',
        GroupId: 5
    }, {
        Id: 45,
        Subject: 'JAPAN vs POLAND',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 28, 14, 0),
        EndTime: new Date(2018, 5, 28, 16, 0),
        StartTimezone: 'Europe/Volgograd',
        EndTimezone: 'Europe/Volgograd',
        City: 'Volgograd',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 46,
        Subject: 'SENEGAL vs COLOMBIA',
        Description: 'Group H',
        StartTime: new Date(2018, 5, 28, 14, 0),
        EndTime: new Date(2018, 5, 28, 16, 0),
        StartTimezone: 'Europe/Samara',
        EndTimezone: 'Europe/Samara',
        City: 'Samara',
        CategoryColor: '#7fa900',
        GroupId: 8
    }, {
        Id: 47,
        Subject: 'PANAMA vs TUNISIA',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 28, 18, 0),
        EndTime: new Date(2018, 5, 28, 20, 0),
        StartTimezone: 'Europe/Moscow',
        EndTimezone: 'Europe/Moscow',
        City: 'Saransk',
        CategoryColor: '#8e24aa',
        GroupId: 4
    }, {
        Id: 48,
        Subject: 'ENGLAND vs BELGIUM',
        Description: 'Group G',
        StartTime: new Date(2018, 5, 28, 18, 0),
        EndTime: new Date(2018, 5, 28, 20, 0),
        StartTimezone: 'Europe/Kaliningrad',
        EndTimezone: 'Europe/Kaliningrad',
        City: 'Kaliningrad',
        CategoryColor: '#8e24aa',
        GroupId: 4
    }
];

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 timeZoneData: Object[] = [
    {
        Id: 1,
        Subject: "Explosion of Betelgeuse Star",
        StartTime: "2018-02-11T14:00:00.000Z",
        EndTime: "2018-02-11T15:30:00.000Z",
        CategoryColor: "#1aaa55"
    }, {
        Id: 2,
        Subject: "Thule Air Crash Report",
        StartTime: "2018-02-12T16:30:00.000Z",
        EndTime: "2018-02-12T18:30:00.000Z",
        CategoryColor: "#357cd2"
    }, {
        Id: 3,
        Subject: "Blue Moon Eclipse",
        StartTime: "2018-02-13T14:00:00.000Z",
        EndTime: "2018-02-13T15:30:00.000Z",
        CategoryColor: "#7fa900"
    }, {
        Id: 4,
        Subject: "Meteor Showers in 2018",
        StartTime: "2018-02-14T17:30:00.000Z",
        EndTime: "2018-02-14T19:00:00.000Z",
        CategoryColor: "#ea7a57"
    }, {
        Id: 5,
        Subject: "Milky Way as Melting pot",
        StartTime: "2018-02-15T16:30:00.000Z",
        EndTime: "2018-02-15T018:30:00.000Z",
        CategoryColor: "#00bdae"
    }, {
        Id: 6,
        Subject: "Mysteries of Bermuda Triangle",
        StartTime: "2018-02-15T14:00:00.000Z",
        EndTime: "2018-02-15T15:30:00.000Z",
        CategoryColor: "#f57f17"
    }, {
        Id: 7,
        Subject: "Glaciers and Snowflakes",
        StartTime: "2018-02-16T15:30:00.000Z",
        EndTime: "2018-02-16T017:00:00.000Z",
        CategoryColor: "#1aaa55"
    }, {
        Id: 8,
        Subject: "Life on Mars",
        StartTime: "2018-02-17T13:30:00.000Z",
        EndTime: "2018-02-17T14:30:00.000Z",
        CategoryColor: "#357cd2"
    }, {
        Id: 9,
        Subject: "Alien Civilization",
        StartTime: "2018-02-19T15:30:00.000Z",
        EndTime: "2018-02-19T17:30:00.000Z",
        CategoryColor: "#7fa900"
    }, {
        Id: 10,
        Subject: "Wildlife Galleries",
        StartTime: "2018-02-21T15:30:00.000Z",
        EndTime: "2018-02-21T17:30:00.000Z",
        CategoryColor: "#ea7a57"
    }, {
        Id: 11,
        Subject: "Best Photography 2018",
        StartTime: "2018-02-22T14:00:00.000Z",
        EndTime: "2018-02-22T15:30:00.000Z",
        CategoryColor: "#00bdae"
    }, {
        Id: 12,
        Subject: "Smarter Puppies",
        StartTime: "2018-02-09T14:30:00.000Z",
        EndTime: "2018-02-09T16:00:00.000Z",
        CategoryColor: "#f57f17"
    }, {
        Id: 13,
        Subject: "Myths of Andromeda Galaxy",
        StartTime: "2018-02-07T15:00:00.000Z",
        EndTime: "2018-02-07T17:00:00.000Z",
        CategoryColor: "#1aaa55"
    }, {
        Id: 14,
        Subject: "Aliens vs Humans",
        StartTime: "2018-02-05T14:30:00.000Z",
        EndTime: "2018-02-05T16:00:00.000Z",
        CategoryColor: "#357cd2"
    }, {
        Id: 15,
        Subject: "Facts of Humming Birds",
        StartTime: "2018-02-20T14:00:00.000Z",
        EndTime: "2018-02-20T15:30:00.000Z",
        CategoryColor: "#7fa900"
    }, {
        Id: 16,
        Subject: "Sky Gazers",
        StartTime: "2018-02-23T15:30:00.000Z",
        EndTime: "2018-02-23T17:30:00.000Z",
        CategoryColor: "#ea7a57"
    }, {
        Id: 17,
        Subject: "The Cycle of Seasons",
        StartTime: "2018-02-12T00:00:00.000Z",
        EndTime: "2018-02-12T02:00:00.000Z",
        CategoryColor: "#00bdae"
    }, {
        Id: 18,
        Subject: "Space Galaxies and Planets",
        StartTime: "2018-02-12T17:30:00.000Z",
        EndTime: "2018-02-12T18:00:00.000Z",
        CategoryColor: "#f57f17"
    }, {
        Id: 19,
        Subject: "Lifecycle of Bumblebee",
        StartTime: "2018-02-15T00:30:00.000Z",
        EndTime: "2018-02-15T02:00:00.000Z",
        CategoryColor: "#7fa900"
    }, {
        Id: 20,
        Subject: "Alien Civilization",
        StartTime: "2018-02-15T18:30:00.000Z",
        EndTime: "2018-02-15T19:30:00.000Z",
        CategoryColor: "#ea7a57"
    }, {
        Id: 21,
        Subject: "Alien Civilization",
        StartTime: "2018-02-11T18:30:00.000Z",
        EndTime: "2018-02-11T20:30:00.000Z",
        CategoryColor: "#ea7a57"
    }, {
        Id: 22,
        Subject: "The Cycle of Seasons",
        StartTime: "2018-02-13T19:00:00.000Z",
        EndTime: "2018-02-13T20:30:00.000Z",
        CategoryColor: "#00bdae"
    }, {
        Id: 23,
        Subject: "Sky Gazers",
        StartTime: "2018-02-16T19:00:00.000Z",
        EndTime: "2018-02-16T20:30:00.000Z",
        CategoryColor: "#ea7a57"
    }, {
        Id: 24,
        Subject: "Facts of Humming Birds",
        StartTime: "2018-02-17T17:00:00.000Z",
        EndTime: "2018-02-17T19:00:00.000Z",
        CategoryColor: "#7fa900"
    }
];

export let eventData: Object[] = [
    {
        Id: 1,
        Subject: 'Explosion of Betelgeuse Star',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Thule Air Crash Report',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Blue Moon Eclipse',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'Meteor Showers in 2018',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        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, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Glaciers and Snowflakes',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Life on Mars',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Alien Civilization',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Wildlife Galleries',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'Best Photography 2018',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'Smarter Puppies',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Myths of Andromeda Galaxy',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Aliens vs Humans',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Facts of Humming Birds',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 17,
        Subject: 'The Cycle of Seasons',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 18,
        Subject: 'Space Galaxies and Planets',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#f57f17'
    }, {
        Id: 19,
        Subject: 'Lifecycle of Bumblebee',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 20,
        Subject: 'Sky Gazers',
        StartTime: new Date(2018, 1, 15, 12, 0),
        EndTime: new Date(2018, 1, 15, 14, 0),
        CategoryColor: '#ea7a57'
    }
];

export let resourceData: Object[] = [
    {
        Id: 1,
        Subject: 'Workflow Analysis',
        StartTime: new Date(2018, 3, 1, 9, 30),
        EndTime: new Date(2018, 3, 1, 12, 0),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 2,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 1, 12, 30),
        EndTime: new Date(2018, 3, 1, 14, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 3,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 2, 10, 0),
        EndTime: new Date(2018, 3, 2, 12, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 4,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 2, 13, 0),
        EndTime: new Date(2018, 3, 2, 15, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 5,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 3, 9, 0),
        EndTime: new Date(2018, 3, 3, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 6,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 3, 14, 0),
        EndTime: new Date(2018, 3, 3, 16, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 7,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 4, 11, 15),
        EndTime: new Date(2018, 3, 4, 13, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 8,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 4, 9, 15),
        EndTime: new Date(2018, 3, 4, 11, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 9,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 5, 9, 30),
        EndTime: new Date(2018, 3, 5, 12, 45),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 10,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 5, 13, 45),
        EndTime: new Date(2018, 3, 5, 16, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 11,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 6, 10, 0),
        EndTime: new Date(2018, 3, 6, 12, 15),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 12,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 6, 9, 0),
        EndTime: new Date(2018, 3, 6, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 13,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 7, 13, 0),
        EndTime: new Date(2018, 3, 7, 15, 15),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 14,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 7, 9),
        EndTime: new Date(2018, 3, 7, 11),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 15,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 8, 9, 45),
        EndTime: new Date(2018, 3, 8, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 16,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 8, 10, 30),
        EndTime: new Date(2018, 3, 8, 13, 0),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 17,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 9, 12),
        EndTime: new Date(2018, 3, 9, 15, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 18,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 9, 9, 0),
        EndTime: new Date(2018, 3, 9, 11, 15),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 19,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 10, 10, 10),
        EndTime: new Date(2018, 3, 10, 13, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 20,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 10, 10, 30),
        EndTime: new Date(2018, 3, 10, 12, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 21,
        Subject: 'workflow Analysis',
        StartTime: new Date(2018, 3, 11, 9, 30),
        EndTime: new Date(2018, 3, 11, 11, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 22,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 11, 12, 30),
        EndTime: new Date(2018, 3, 11, 14, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 23,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 12, 10),
        EndTime: new Date(2018, 3, 12, 12, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 24,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 12, 13),
        EndTime: new Date(2018, 3, 12, 14, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 25,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 13, 9),
        EndTime: new Date(2018, 3, 13, 11),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 26,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 13, 14),
        EndTime: new Date(2018, 3, 13, 15, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 27,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 14, 11),
        EndTime: new Date(2018, 3, 14, 13),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 28,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 14, 9),
        EndTime: new Date(2018, 3, 14, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 29,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 15, 9, 30),
        EndTime: new Date(2018, 3, 15, 11),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 30,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 15, 14),
        EndTime: new Date(2018, 3, 15, 16, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 31,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 16, 10),
        EndTime: new Date(2018, 3, 16, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 32,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 16, 9),
        EndTime: new Date(2018, 3, 16, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 33,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 17, 14),
        EndTime: new Date(2018, 3, 17, 15),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 34,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 17, 9),
        EndTime: new Date(2018, 3, 17, 11),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 35,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 18, 10),
        EndTime: new Date(2018, 3, 18, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 36,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 18, 10),
        EndTime: new Date(2018, 3, 18, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 37,
        Subject: 'Bug fixing',
        StartTime: new Date(2018, 3, 9, 10),
        EndTime: new Date(2018, 3, 9, 10, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 38,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 19, 9),
        EndTime: new Date(2018, 3, 19, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 39,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 20, 10),
        EndTime: new Date(2018, 3, 20, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 40,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 20, 10, 30),
        EndTime: new Date(2018, 3, 20, 12, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 41,
        Subject: 'workflow Analysis',
        StartTime: new Date(2018, 3, 21, 9, 30),
        EndTime: new Date(2018, 3, 21, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 42,
        Subject: 'Requirement planning',
        StartTime: new Date(2018, 3, 21, 12, 30),
        EndTime: new Date(2018, 3, 21, 13, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 43,
        Subject: 'Quality Analysis',
        StartTime: new Date(2018, 3, 22, 10),
        EndTime: new Date(2018, 3, 22, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 44,
        Subject: 'Resource planning',
        StartTime: new Date(2018, 3, 22, 13),
        EndTime: new Date(2018, 3, 22, 14, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 45,
        Subject: 'Timeline estimation',
        StartTime: new Date(2018, 3, 23, 9),
        EndTime: new Date(2018, 3, 23, 10),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 46,
        Subject: 'Developers Meeting',
        StartTime: new Date(2018, 3, 23, 14),
        EndTime: new Date(2018, 3, 23, 15, 45),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 47,
        Subject: 'Project Review',
        StartTime: new Date(2018, 3, 24, 11),
        EndTime: new Date(2018, 3, 24, 12),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 48,
        Subject: 'Manual testing',
        StartTime: new Date(2018, 3, 24, 9),
        EndTime: new Date(2018, 3, 24, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 49,
        Subject: 'Project Preview',
        StartTime: new Date(2018, 3, 25, 9, 30),
        EndTime: new Date(2018, 3, 25, 11),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 50,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018, 3, 25, 14),
        EndTime: new Date(2018, 3, 25, 15, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 51,
        Subject: 'Bug Automation',
        StartTime: new Date(2018, 3, 26, 10),
        EndTime: new Date(2018, 3, 26, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 52,
        Subject: 'Functionality testing',
        StartTime: new Date(2018, 3, 26, 9),
        EndTime: new Date(2018, 3, 26, 11, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 53,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2018, 3, 27, 14),
        EndTime: new Date(2018, 3, 27, 15),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 54,
        Subject: 'Test report Validation',
        StartTime: new Date(2018, 3, 27, 9),
        EndTime: new Date(2018, 3, 27, 11),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 55,
        Subject: 'Test case correction',
        StartTime: new Date(2018, 3, 28, 10),
        EndTime: new Date(2018, 3, 28, 11, 30),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 56,
        Subject: 'Run test cases',
        StartTime: new Date(2018, 3, 28, 10),
        EndTime: new Date(2018, 3, 28, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 57,
        Subject: 'Bug fixing',
        StartTime: new Date(2018, 3, 29, 12),
        EndTime: new Date(2018, 3, 29, 12, 30),
        IsAllDay: false,
        OwnerId: 3,
        RoomId: 1
    }, {
        Id: 58,
        Subject: 'Debugging',
        StartTime: new Date(2018, 3, 29, 9),
        EndTime: new Date(2018, 3, 29, 10, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }, {
        Id: 59,
        Subject: 'Exception handling',
        StartTime: new Date(2018, 3, 30, 10),
        EndTime: new Date(2018, 3, 30, 11),
        IsAllDay: false,
        OwnerId: 1,
        RoomId: 1
    }, {
        Id: 60,
        Subject: 'Decoding',
        StartTime: new Date(2018, 3, 30, 10, 30),
        EndTime: new Date(2018, 3, 30, 12, 30),
        IsAllDay: false,
        OwnerId: 2,
        RoomId: 2
    }
];

export let roomData: Object[] = [
    {
        Id: 1,
        Subject: 'Board Meeting',
        Description: 'Meeting to discuss business goal of 2018.',
        StartTime: new Date(2018, 6, 30, 9, 0),
        EndTime: new Date(2018, 6, 30, 11, 0),
        RoomId: 1
    },
    {
        Id: 2,
        Subject: 'Training session on JSP',
        Description: 'Knowledge sharing on JSP topics.',
        StartTime: new Date(2018, 6, 30, 15, 0),
        EndTime: new Date(2018, 6, 30, 17, 0),
        RoomId: 5
    },
    {
        Id: 3,
        Subject: 'Sprint Planning with Team members',
        Description: 'Planning tasks for sprint.',
        StartTime: new Date(2018, 6, 30, 9, 30),
        EndTime: new Date(2018, 6, 30, 11, 0),
        RoomId: 3
    },
    {
        Id: 4,
        Subject: 'Meeting with Client',
        Description: 'Customer meeting to discuss features.',
        StartTime: new Date(2018, 6, 30, 11, 0),
        EndTime: new Date(2018, 6, 30, 13, 0),
        RoomId: 4
    },
    {
        Id: 5,
        Subject: 'Support Meeting with Managers',
        Description: 'Meeting to discuss support plan.',
        StartTime: new Date(2018, 6, 30, 16, 0),
        EndTime: new Date(2018, 6, 30, 17, 30),
        RoomId: 5
    },
    {
        Id: 6, Subject: 'Client Meeting',
        Description: 'Meeting to discuss client requirements.',
        StartTime: new Date(2018, 6, 30, 10, 30),
        EndTime: new Date(2018, 6, 30, 13, 0),
        RoomId: 6
    },
    {
        Id: 7,
        Subject: 'Appraisal Meeting',
        Description: 'Meeting to discuss employee appraisals.',
        StartTime: new Date(2018, 6, 30, 15, 0),
        EndTime: new Date(2018, 6, 30, 16, 30),
        RoomId: 7
    },
    {
        Id: 8,
        Subject: 'HR Meeting',
        Description: 'Meeting to discuss HR plans.',
        StartTime: new Date(2018, 6, 30, 8, 0),
        EndTime: new Date(2018, 6, 30, 9, 0),
        RoomId: 4
    },
    {
        Id: 9,
        Subject: 'Customer Meeting',
        Description: 'Meeting to discuss customer reported issues.',
        StartTime: new Date(2018, 6, 30, 10, 0),
        EndTime: new Date(2018, 6, 30, 12, 0),
        RoomId: 8
    },
    {
        Id: 10,
        Subject: 'Board Meeting',
        Description: 'Meeting to discuss business plans.',
        StartTime: new Date(2018, 6, 30, 14, 30),
        EndTime: new Date(2018, 6, 30, 17, 0),
        RoomId: 9
    },
    {
        Id: 11,
        Subject: 'Training session on Vue',
        Description: 'Knowledge sharing on Vue concepts.',
        StartTime: new Date(2018, 6, 30, 9, 0),
        EndTime: new Date(2018, 6, 30, 10, 30),
        RoomId: 10
    },
    {
        Id: 12,
        Subject: 'Meeting with Team members',
        Description: 'Meeting to discuss on work report.',
        StartTime: new Date(2018, 6, 30, 11, 30),
        EndTime: new Date(2018, 6, 30, 12, 0),
        RoomId: 5
    },
    {
        Id: 13,
        Subject: 'Meeting with General Manager',
        Description: 'Meeting to discuss support plan.',
        StartTime: new Date(2018, 6, 30, 14, 0),
        EndTime: new Date(2018, 6, 30, 16, 0),
        RoomId: 5
    },
    {
        Id: 14,
        Subject: 'Board Meeting',
        Description: 'Meeting to discuss business goal of 2018.',
        StartTime: new Date(2018, 6, 31, 9, 0),
        EndTime: new Date(2018, 6, 31, 11, 0),
        RoomId: 1
    },
    {
        Id: 15,
        Subject: 'Training session on JSP',
        Description: 'Knowledge sharing on JSP topics.',
        StartTime: new Date(2018, 6, 31, 14, 0),
        EndTime: new Date(2018, 6, 31, 17, 0),
        RoomId: 6
    },
    {
        Id: 16,
        Subject: 'Sprint Planning with Team members',
        Description: 'Planning tasks for sprint.',
        StartTime: new Date(2018, 6, 31, 9, 30),
        EndTime: new Date(2018, 6, 31, 11, 0),
        RoomId: 2
    },
    {
        Id: 17,
        Subject: 'Meeting with Client',
        Description: 'Customer meeting to discuss features.',
        StartTime: new Date(2018, 6, 31, 11, 0),
        EndTime: new Date(2018, 6, 31, 13, 0),
        RoomId: 7
    },
    {
        Id: 18,
        Subject: 'Support Meeting with Managers',
        Description: 'Meeting to discuss support plan.',
        StartTime: new Date(2018, 6, 31, 16, 0),
        EndTime: new Date(2018, 6, 31, 17, 30),
        RoomId: 2
    },
    {
        Id: 19,
        Subject: 'Training session on C#',
        Description: 'Training session',
        StartTime: new Date(2018, 6, 31, 14, 30),
        EndTime: new Date(2018, 6, 31, 16, 0),
        RoomId: 9
    },
    {
        Id: 20,
        Subject: 'Client Meeting',
        Description: 'Meeting to discuss client requirements.',
        StartTime: new Date(2018, 6, 31, 10, 30),
        EndTime: new Date(2018, 6, 31, 13, 0),
        RoomId: 3
    },
    {
        Id: 21,
        Subject: 'Appraisal Meeting',
        Description: 'Meeting to discuss employee appraisals.',
        StartTime: new Date(2018, 6, 31, 15, 0),
        EndTime: new Date(2018, 6, 31, 16, 30),
        RoomId: 3
    },
    {
        Id: 22,
        Subject: 'HR Meeting',
        Description: 'Meeting to discuss HR plans.',
        StartTime: new Date(2018, 6, 31, 8, 0),
        EndTime: new Date(2018, 6, 31, 9, 0),
        RoomId: 4
    },
    {
        Id: 23,
        Subject: 'Customer Meeting',
        Description: 'Meeting to discuss customer reported issues.',
        StartTime: new Date(2018, 6, 31, 10, 0),
        EndTime: new Date(2018, 6, 31, 12, 0),
        RoomId: 4
    },
    {
        Id: 24,
        Subject: 'Board Meeting',
        Description: 'Meeting to discuss business plans.',
        StartTime: new Date(2018, 7, 1, 16, 30),
        EndTime: new Date(2018, 7, 1, 18, 0),
        RoomId: 10
    },
    {
        Id: 25,
        Subject: 'Training session on Vue',
        Description: 'Knowledge sharing on Vue concepts.',
        StartTime: new Date(2018, 6, 31, 9, 0),
        EndTime: new Date(2018, 6, 31, 10, 30),
        RoomId: 5
    },
    {
        Id: 26,
        Subject: 'Meeting with Team members',
        Description: 'Meeting to discuss on work report.',
        StartTime: new Date(2018, 6, 31, 11, 30),
        EndTime: new Date(2018, 6, 31, 12, 0),
        RoomId: 5
    },
    {
        Id: 27,
        Subject: 'Meeting with General Manager',
        Description: 'Meeting to discuss support plan.',
        StartTime: new Date(2018, 6, 31, 14, 0),
        EndTime: new Date(2018, 6, 31, 16, 0),
        RoomId: 10
    },

    {
        Id: 28,
        Subject: 'Board Meeting',
        Description: 'Meeting to discuss business goal of 2018.',
        StartTime: new Date(2018, 7, 1, 9, 0),
        EndTime: new Date(2018, 7, 1, 11, 0),
        RoomId: 1
    },
    {
        Id: 29,
        Subject: 'Training session on JSP',
        Description: 'Knowledge sharing on JSP topics.',
        StartTime: new Date(2018, 7, 1, 17, 0),
        EndTime: new Date(2018, 7, 1, 20, 0),
        RoomId: 6
    },
    {
        Id: 30,
        Subject: 'Sprint Planning with Team members',
        Description: 'Planning tasks for sprint.',
        StartTime: new Date(2018, 7, 1, 10, 30),
        EndTime: new Date(2018, 7, 1, 12, 0),
        RoomId: 2
    },
    {
        Id: 31,
        Subject: 'Meeting with Client',
        Description: 'Customer meeting to discuss features.',
        StartTime: new Date(2018, 7, 1, 10, 30),
        EndTime: new Date(2018, 7, 1, 12, 0),
        RoomId: 2
    },
    {
        Id: 32,
        Subject: 'Support Meeting with Managers',
        Description: 'Meeting to discuss support plan.',
        StartTime: new Date(2018, 7, 1, 10, 30),
        EndTime: new Date(2018, 7, 1, 12, 0),
        RoomId: 2
    },
    {
        Id: 33,
        Subject: 'Training session on C#',
        Description: 'Training session',
        StartTime: new Date(2018, 7, 1, 14, 30),
        EndTime: new Date(2018, 7, 1, 16, 0),
        RoomId: 2
    },
    {
        Id: 34,
        Subject: 'Client Meeting',
        Description: 'Meeting to discuss client requirements.',
        StartTime: new Date(2018, 7, 1, 10, 30),
        EndTime: new Date(2018, 7, 1, 13, 0),
        RoomId: 3
    },
    {
        Id: 35,
        Subject: 'Appraisal Meeting',
        Description: 'Meeting to discuss employee appraisals.',
        StartTime: new Date(2018, 7, 1, 15, 0),
        EndTime: new Date(2018, 7, 1, 16, 30),
        RoomId: 8
    },
    {
        Id: 36,
        Subject: 'HR Meeting',
        Description: 'Meeting to discuss HR plans.',
        StartTime: new Date(2018, 7, 1, 9, 30),
        EndTime: new Date(2018, 7, 1, 11, 30),
        RoomId: 4
    },
    {
        Id: 37,
        Subject: 'Customer Meeting',
        Description: 'Meeting to discuss customer reported issues.',
        StartTime: new Date(2018, 7, 1, 10, 0),
        EndTime: new Date(2018, 7, 1, 12, 0),
        RoomId: 9
    },
    {
        Id: 38,
        Subject: 'Board Meeting',
        Description: 'Meeting to discuss business plans.',
        StartTime: new Date(2018, 7, 1, 15, 0),
        EndTime: new Date(2018, 7, 1, 17, 0),
        RoomId: 4
    },
    {
        Id: 39,
        Subject: 'Training session on Vue',
        Description: 'Knowledge sharing on Vue concepts.',
        StartTime: new Date(2018, 7, 1, 9, 0),
        EndTime: new Date(2018, 7, 1, 10, 30),
        RoomId: 5
    },
    {
        Id: 40,
        Subject: 'Meeting with Team members',
        Description: 'Meeting to discuss on work report.',
        StartTime: new Date(2018, 7, 1, 11, 30),
        EndTime: new Date(2018, 7, 1, 12, 30),
        RoomId: 5
    },
    {
        Id: 41,
        Subject: 'Meeting with General Manager',
        Description: 'Meeting to discuss support plan.',
        StartTime: new Date(2018, 7, 1, 14, 0),
        EndTime: new Date(2018, 7, 1, 16, 0),
        RoomId: 10
    },
    {
        Id: 43,
        Subject: 'HR Meeting',
        Description: 'Meeting to discuss HR plans.',
        StartTime: new Date(2018, 7, 1, 18, 0),
        EndTime: new Date(2018, 7, 1, 20, 0),
        RoomId: 2
    },
    {
        Id: 44,
        Subject: 'HR Meeting',
        Description: 'Meeting to discuss HR plans.',
        StartTime: new Date(2018, 7, 1, 17, 30),
        EndTime: new Date(2018, 7, 1, 20, 0),
        RoomId: 1
    },
    {
        Id: 45,
        Subject: 'Client Meeting',
        Description: 'Meeting to discuss client requirements.',
        StartTime: new Date(2018, 7, 1, 16, 30),
        EndTime: new Date(2018, 7, 1, 18, 0),
        RoomId: 3
    },
    {
        Id: 46,
        Subject: 'Board Meeting',
        Description: 'Meeting to discuss business plans.',
        StartTime: new Date(2018, 7, 1, 18, 30),
        EndTime: new Date(2018, 7, 1, 20, 0),
        RoomId: 4
    },
    {
        Id: 47,
        Subject: 'Board Meeting',
        Description: 'Meeting to discuss business plans.',
        StartTime: new Date(2018, 7, 1, 15, 30),
        EndTime: new Date(2018, 7, 1, 18, 0),
        RoomId: 5
    },
    {
        Id: 48,
        Subject: 'HR Meeting',
        Description: 'Meeting to discuss HR plans.',
        StartTime: new Date(2018, 7, 1, 18, 30),
        EndTime: new Date(2018, 7, 1, 20, 0),
        RoomId: 5
    },
    {
        Id: 49,
        Subject: 'HR Meeting',
        Description: 'Meeting to discuss HR plans.',
        StartTime: new Date(2018, 7, 1, 14, 30),
        EndTime: new Date(2018, 7, 1, 16, 0),
        RoomId: 6
    },
    {
        Id: 50,
        Subject: 'Board Meeting',
        Description: 'Meeting to discuss business plans.',
        StartTime: new Date(2018, 7, 1, 9, 30),
        EndTime: new Date(2018, 7, 1, 12, 0),
        RoomId: 6
    },
    {
        Id: 51,
        Subject: 'Client Meeting',
        Description: 'Meeting to discuss client requirements.',
        StartTime: new Date(2018, 7, 1, 10, 30),
        EndTime: new Date(2018, 7, 1, 12, 0),
        RoomId: 7
    },
    {
        Id: 52,
        Subject: 'Appraisal Meeting',
        Description: 'Meeting to discuss employee appraisals.',
        StartTime: new Date(2018, 7, 1, 18, 0),
        EndTime: new Date(2018, 7, 1, 19, 30),
        RoomId: 7
    },
    {
        Id: 53,
        Subject: 'Support Meeting with Managers',
        Description: 'Meeting to discuss support plan.',
        StartTime: new Date(2018, 7, 1, 15, 30),
        EndTime: new Date(2018, 7, 1, 17, 0),
        RoomId: 9
    },
    {
        Id: 54,
        Subject: 'Support Meeting with Managers',
        Description: 'Meeting to discuss support plan.',
        StartTime: new Date(2018, 7, 1, 11, 0),
        EndTime: new Date(2018, 7, 1, 12, 30),
        RoomId: 8
    },
    {
        Id: 55,
        Subject: 'Support Meeting with Managers',
        Description: 'Meeting to discuss support plan.',
        StartTime: new Date(2018, 7, 1, 11, 0),
        EndTime: new Date(2018, 7, 1, 12, 30),
        RoomId: 10
    }
];
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

The other properties available in recurrence editor are tabulated below,

Properties Type Description
firstDayOfWeek number Sets the first day of the week on recurrence editor.
startDate Date Sets the start date from which date the recurrence event starts.
dateFormat string Sets the specific date format on recurrence editor.
locale string Sets the locale to be applied on recurrence editor.
cssClass string Allows styling to be applied on recurrence editor with custom class names.
enableRtl boolean Allows recurrence editor to render in RTL mode.
minDate Date Sets the minimum date on recurrence editor.
maxDate Date Sets the maximum date on recurrence editor.
value string Sets the recurrence rule value on recurrence editor.
selectedType number Sets the specific repeat type on the recurrence editor.

Accessing the recurrence rule string

The recurrence rule is usually generated based on the options selected from the recurrence editor and also it follows the iCalendar specifications. The generated recurrence rule string is a valid one to be used with the Scheduler event’s recurrence rule field.

There is a change event available in recurrence editor, that triggers on every time the fields of recurrence editor tends to change. Within this event argument, you can access the generated recurrence value through the value option as shown in the following code example.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component} from '@angular/core';
import { RecurrenceEditorChangeEventArgs } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  // specifies the template string for the Schedule component
  template: `<div style="padding-bottom:15px;">
            <label id="rule-label">Rule Output</label>
            <div class="rule-output-container">
                <div id="rule-output">Select Rule</div>
            </div>
        </div>
        <div id="RecurrenceEditor">
        <ejs-recurrenceeditor (change)="onChange($event)"></ejs-recurrenceeditor>
        </div>`
})
export class AppComponent {
  onChange(args: RecurrenceEditorChangeEventArgs): void {
    let outputElement: HTMLElement = <HTMLElement>document.querySelector('#rule-output');
    if(args.value == "") {
        outputElement.innerText = 'Select Rule';
    } else {
        outputElement.innerText = args.value;
    }
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RecurrenceEditorModule } from '@syncfusion/ej2-angular-schedule';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        RecurrenceEditorModule,
        DropDownListAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Set specific value on recurrence editor

It is possible to display the recurrence editor with specific options loaded initially, based on the rule string that we provide. The fields of recurrence editor will change its values accordingly, when we provide a particular rule through the setRecurrenceRule method.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { RecurrenceEditorChangeEventArgs } from '@syncfusion/ej2-angular-schedule';

@Component({
    selector: 'app-root',
    // specifies the template string for the Schedule component
    template: `<div class="content-wrapper recurrence-editor-wrap">
  <div style="padding-bottom:15px;">
      <label>Rule Output</label>
      <div class="rule-output-container">
          <div id="rule-output">FREQ=DAILY;INTERVAL=2;COUNT=8</div>
      </div>
  </div>
  <ejs-recurrenceeditor (change)="onChange($event)" value="FREQ=DAILY;INTERVAL=2;COUNT=8"></ejs-recurrenceeditor>
</div>`
})
export class AppComponent {
    public onChange(args: RecurrenceEditorChangeEventArgs): void {
        let outputElement: HTMLElement = document.querySelector('#rule-output') as HTMLElement;
        if (!isNullOrUndefined(args.value)) {
            outputElement.innerText = args.value;
        }
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RecurrenceEditorModule } from '@syncfusion/ej2-angular-schedule';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        RecurrenceEditorModule,
        DropDownListAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Recurrence date generation

You can parse the recurrenceRule of an event to generate the date instances on which that particular event is going to occur, using the getRecurrenceDates method. It generates the dates based on the recurrenceRule that we provide. The parameters to be provided for getRecurrenceDates method are as follows.

Field name Type Description
startDate Date Appointment start date.
rule String Recurrence rule present in an event object.
excludeDate String Date collection (in ISO format) to be excluded. It is optional.
maximumCount Number Number of date count to be generated. It is optional.
viewDate Date Current view range’s first date. It is optional.
Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, OnInit } from '@angular/core';
import { RecurrenceEditor } from '@syncfusion/ej2-angular-schedule';
import { createElement } from '@syncfusion/ej2-base';

@Component({
    selector: 'app-root',
    // specifies the template string for the Schedule component
    template: `<div style="padding-bottom:15px;">
            <label id="rule-label">Date Collections</label>
            <div class="rule-output-container">
                <div id="rule-output"></div>
            </div>
        </div>`
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
        let outputElement: HTMLElement = <HTMLElement>document.querySelector('#rule-output');
        let labelElement: HTMLElement = <HTMLElement>document.querySelector('#rule-label');
        let recObject: RecurrenceEditor = new RecurrenceEditor();
        let dates: number[] = recObject.getRecurrenceDates(new Date(2018, 0, 7, 10, 0), 'FREQ=DAILY;INTERVAL=1', '20180108T114224Z,20180110T114224Z', 4, new Date(2018, 0, 7));
        for (let i: number = 0; i < dates.length; i++) {
            outputElement.appendChild(createElement('div', { innerHTML: new Date(dates[i]).toString() }));
        }
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RecurrenceEditorModule } from '@syncfusion/ej2-angular-schedule';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        RecurrenceEditorModule,
        DropDownListAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Above example will generate two dates January 7, 2018 & January 9 2018 by excluding the in between dates January 8 2018 & January 10 2018, since those dates were given in the exclusion list. Generated dates can then be utilised to create appointments.

Recurrence date generation in server-side

It is also possible to generate recurrence date instances from server-side by manually referring the RecurrenceHelper class, which is specifically written and referred from application end to handle this date generation process.

Refer here for the step by step procedure to achieve date generation in server-side.

Restrict date generation with specific count

In case, if the rule is given in “NEVER ENDS” category, then you can mention the maximum count when you actually want to stop the date generation starting from the provided start date. To do so, provide the appropriate maximumCount value within the getRecurrenceDates method as shown in the following code example.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, OnInit } from '@angular/core';
import { RecurrenceEditor } from '@syncfusion/ej2-angular-schedule';
import { createElement } from '@syncfusion/ej2-base';

@Component({
    selector: 'app-root',
    // specifies the template string for the Schedule component
    template: `<div style="padding-bottom:15px;">
            <label id="rule-label">Date Collections</label>
            <div class="rule-output-container">
                <div id="rule-output"></div>
            </div>
        </div>`
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
        let outputElement: HTMLElement = <HTMLElement>document.querySelector('#rule-output');
        let labelElement: HTMLElement = <HTMLElement>document.querySelector('#rule-label');
        let recObject: RecurrenceEditor = new RecurrenceEditor();
        let dates: number[] = recObject.getRecurrenceDates(new Date(2018, 0, 7, 10, 0), 'FREQ=DAILY;INTERVAL=1; COUNT=30', '20180108T114224Z,20180110T114224Z', 10, new Date(2018, 0, 7));
        for (let i: number = 0; i < dates.length; i++) {
            outputElement.appendChild(createElement('div', { innerHTML: new Date(dates[i]).toString() }));
        }
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RecurrenceEditorModule } from '@syncfusion/ej2-angular-schedule';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        RecurrenceEditorModule,
        DropDownListAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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