Getting Started with React Schedule Component
17 Dec 202424 minutes to read
This section briefly explains how to create React Scheduler component and configure its available functionalities in React environment, using Essential JS 2 quickstart seed repository.
To get start quickly with React Scheduler using the Create React App, you can check on this video:
Dependencies
The following list of dependencies are required to use the Scheduler component in your application.
|-- @syncfusion/ej2-react-schedule
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-schedule
|-- @syncfusion/ej2-compression
|-- @syncfusion/ej2-excel-export
|-- @syncfusion/ej2-file-utils
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-calendars
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-split-buttons
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-dropdownsInstallation and configuration
Setup for local development
To set-up a React application, choose any of the following ways. The best and easiest way is to use the create-react-app. It sets up your development environment in JavaScript and improvise your application for production. Refer to the installation instructions of create-react-app.
npx create-react-app my-app
cd my-app
npm startor
yarn create react-app my-app
cd my-app
yarn startTo set-up a React application in TypeScript environment, run the following command.
npx create-react-app my-app --template typescript
cd my-app
npm startBesides using the npx package runner tool, also create an application from the npm init. To begin with the npm init, upgrade the npm version to npm 6+.
npm init react-app my-app
cd my-app
npm startAdding Syncfusion packages
All the available Essential JS 2 packages are published in npmjs.com public registry.
To install Scheduler component, use the following command
npm install @syncfusion/ej2-react-schedule --save
Adding CSS reference
Add scheduler component’s styles as given below in src/App.css.
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-schedule/styles/material.css";
To refer
App.cssin the application then import it in thesrc/App.tsxfile.
In case, if you want to make use of the combined CSS files of entire components, then you can avail it from the root folder of Essential JS 2 package and reference it with the code shown below.
@import '../../node_modules/@syncfusion/ej2/material.css';Module injection
Each view types available in scheduler are maintained as individual modules and to work with those views, it is necessary to inject the required modules. The following modules are available in scheduler namely,
-
Day- Inject this module to work with the day view. -
Week- Inject this module to work with the week view. -
WorkWeek- Inject this module to work with the work week view. -
Month- Inject this module to work with the month view. -
Agenda- Inject this module to work with the agenda view. -
MonthAgenda- Inject this module for displaying month agenda view. -
TimelineViews- Inject this module to work with the timeline day, timeline week, timeline work week view. -
TimelineMonth- Inject this module to work with the timeline month view.
These modules should be injected into the schedule using the Inject method within the app.tsx file as shown below. On doing so, only the injected views will be loaded and displayed on the schedule.
[src/app/app.tsx]
<Inject services={[Day, Week, WorkWeek, Month, Agenda, MonthAgenda, TimelineViews, TimelineMonth ]} />Initialize the schedule
Import the Scheduler component to your app.tsx file using following code.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
const App = () => {
return (<ScheduleComponent>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]}/>
</ScheduleComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("schedule"));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
const App = () => {
return (
<ScheduleComponent>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("schedule"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Now, run the application in the browser using the following command.
npm start
Above demo will display the empty scheduler.
Populating appointments
- To populate the empty Scheduler with appointments, bind the event data to it by assigning the
dataSourceproperty either with valid JSON data or else with remote URL, from where the data will be fetched.
Here, the local JSON data is assigned to Scheduler’s dataSource.
[src/app/app.tsx]
import * as React from 'react';
import {
ScheduleComponent } from '@syncfusion/ej2-react-schedule';
const App = () => {
const data: object [] = [
{
Id: 1,
Subject: 'Meeting - 1',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
IsAllDay: false
},
];
const eventSettings = { dataSource: data }
return (
<ScheduleComponent height='550px' selectedDate= {new Date(2018, 1, 15)}
eventSettings={eventSettings}>
</ScheduleComponent>
);
}
export default App;You can also provide different names to these default fields, for which the custom names of those fields must be mapped appropriately within fields property as shown below.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
const App = () => {
const data = [
{
Id: 2,
Subject: 'Meeting',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false,
Status: 'Completed',
Priority: 'High'
},
];
const fieldsData = {
id: 'Id',
subject: { name: 'Subject' },
isAllDay: { name: 'IsAllDay' },
startTime: { name: 'StartTime' },
endTime: { name: 'EndTime' }
}
const eventSettings = { dataSource: data, fields: fieldsData }
return (<ScheduleComponent height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("schedule"));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject
} from '@syncfusion/ej2-react-schedule';
const App = () => {
const data: object[] = [
{
Id: 2,
Subject: 'Meeting',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false,
Status: 'Completed',
Priority: 'High'
},
];
const fieldsData = {
id: 'Id',
subject: { name: 'Subject' },
isAllDay: { name: 'IsAllDay' },
startTime: { name: 'StartTime' },
endTime: { name: 'EndTime' }
}
const eventSettings = { dataSource: data, fields: fieldsData }
return (
<ScheduleComponent height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} >
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById("schedule"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>The other fields available in Scheduler can be referred from here.
Setting date
Scheduler usually displays the system date as its current date. To change the current date of Scheduler with specific date, define the selectedDate property.
[src/app/app.tsx]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { defaultData } from './datasource';
const App = () => {
const eventSettings = { dataSource: defaultData }
return (<ScheduleComponent height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("schedule"));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { defaultData } from './datasource';
const App = () => {
const eventSettings = { dataSource: defaultData }
return (
<ScheduleComponent height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>
)
};
export default App;
ReactDOM.render(<App />, document.getElementById("schedule"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>/**
* Schedule datasource spec
*/
export let defaultData: Object[] = [
{
Id: 1,
Subject: 'Conference',
StartTime: new Date(2018, 1, 7, 10, 0),
EndTime: new Date(2018, 1, 7, 11, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting - 1',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
IsAllDay: false
}, {
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 12, 30),
IsAllDay: false
}, {
Id: 4,
Subject: 'Vacation',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 10, 30),
IsAllDay: false
}
];
export let scheduleData: 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-15T06:00:00.000Z",
EndTime: "2018-02-15T07: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 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 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, 18, 0),
EndTime: new Date(2018, 7, 1, 20, 0),
RoomId: 8
},
{
Id: 32,
Subject: 'Support Meeting with Managers',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 7, 1, 16, 0),
EndTime: new Date(2018, 7, 1, 17, 30),
RoomId: 7
},
{
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
}
];
export function generateObject() {
var data = [];
for (var a = 0; a < 25; a++) {
data.push({
Id: a + 1,
Subject: 'Testing',
StartTime: new Date(2021, 3, 28),
EndTime: new Date(2021, 3, 29),
IsAllDay: true
});
}
return data;
}/**
* Schedule datasource spec
*/
export let defaultData = [
{
Id: 1,
Subject: 'Conference',
StartTime: new Date(2018, 1, 7, 10, 0),
EndTime: new Date(2018, 1, 7, 11, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting - 1',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
IsAllDay: false
}, {
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 12, 30),
IsAllDay: false
}, {
Id: 4,
Subject: 'Vacation',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 10, 30),
IsAllDay: false
}
];
export let scheduleData = [
{
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-15T06:00:00.000Z",
EndTime: "2018-02-15T07: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 fifaEventsData = [
{
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 roomData = [
{
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, 18, 0),
EndTime: new Date(2018, 7, 1, 20, 0),
RoomId: 8
},
{
Id: 32,
Subject: 'Support Meeting with Managers',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 7, 1, 16, 0),
EndTime: new Date(2018, 7, 1, 17, 30),
RoomId: 7
},
{
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
}
];
export function generateObject() {
var data = [];
for (var a = 0; a < 25; a++) {
data.push({
Id: a + 1,
Subject: 'Testing',
StartTime: new Date(2021, 3, 28),
EndTime: new Date(2021, 3, 29),
IsAllDay: true
});
}
return data;
}Setting view
Scheduler displays week view by default. To change the current view, define the applicable view name to the currentView property. The applicable view names are,
- Day
- Week
- WorkWeek
- Month
- Year
- Agenda
- MonthAgenda
- TimelineDay
- TimelineWeek
- TimelineWorkWeek
- TimelineMonth
- TimelineYear
import * as React from 'react';
import {
ScheduleComponent, Day, Week, WorkWeek, Agenda, Month, Inject,
ViewsDirective, ViewDirective
} from '@syncfusion/ej2-react-schedule';
import './App.css';
const App = () => {
return (
<ScheduleComponent width='100%' height='550px' currentView='Month'
selectedDate={new Date(2017, 11, 15)}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
<ViewDirective option='Agenda' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Agenda, Month]} />
</ScheduleComponent>
)
};
export default App;Individual view customization
Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone. This can be achieved by defining views property to accept the array of object type, where each object depicts the individual view customization.
The output will display the Scheduler with the specified view configuration.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, WorkWeek, Week, Month, Inject, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-schedule';
import { defaultData } from './datasource';
const App = () => {
const eventSettings = { dataSource: defaultData }
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
<ViewsDirective>
<ViewDirective option='WorkWeek' startHour='10:00' endHour='18:00'/>
<ViewDirective option='Week' startHour='07:00' endHour='15:00'/>
<ViewDirective option='Month' showWeekend={false}/>
</ViewsDirective>
<Inject services={[WorkWeek, Week, Month]}/>
</ScheduleComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("schedule"));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, WorkWeek, Week, Month, Inject,
ViewsDirective, ViewDirective
} from '@syncfusion/ej2-react-schedule';
import { defaultData } from './datasource';
const App = () => {
const eventSettings = { dataSource: defaultData }
return (
<ScheduleComponent
width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
eventSettings={eventSettings}
>
<ViewsDirective>
<ViewDirective option='WorkWeek' startHour='10:00' endHour='18:00' />
<ViewDirective option='Week' startHour='07:00' endHour='15:00' />
<ViewDirective option='Month' showWeekend={false} />
</ViewsDirective>
<Inject services={[WorkWeek, Week, Month]} />
</ScheduleComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById("schedule"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>You can also explore our React Scheduler example that shows how to use the toolbar buttons to play with Scheduler functionalities.