Getting started in EJ2 TypeScript Schedule control

31 Jan 202614 minutes to read

This section explains how to create the JavaScript Scheduler component and configure its available functionalities in TypeScript using the Essential^® JS 2 quickstart seed repository.

Dependencies

The following dependencies are required to use the Scheduler component in your application:

|-- @syncfusion/ej2-schedule
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-calendars
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-excel-export
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-lists
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-navigations

Installation and configuration

Clone the Essential^® JS 2 quickstart application project from GitHub and install the necessary npm packages using the following commands:

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

By default, the project is pre-configured with all EJ2 dependencies. For better understanding, you can remove all dependencies from src/system.config.js to get started with the Scheduler component from scratch.

Map the Scheduler component’s dependency packages in the system.config.js configuration file:

[src/system.config.js]

System.config({
    paths: {
        'syncfusion:': './node_modules/@syncfusion/',
    },
    map: {
        app: 'app',

        //Syncfusion packages mapping
        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
        "@syncfusion/ej2-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js"
    },
    packages: {
        'app': { main: 'app', defaultExtension: 'js' }
    }
});

System.import('app');

Scheduler CSS files are available in the ej2-schedule package folder and its sub-component packages. Reference them in your application using the following code:

[src/styles/styles.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-splitbuttons/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-schedule/styles/material.css';

Alternatively, if you want to use the combined CSS file for all components, reference it from the root folder of the Essential^® JS 2 package:

@import '../../node_modules/@syncfusion/ej2/material.css';

Module injection

Each view type available in the Scheduler is maintained as an individual module. To work with specific views, inject the required modules. The following modules are available:

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.

Inject all required modules into the Scheduler using the Schedule.Inject method within the app.ts file:

import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

Initialize the Schedule

Add an HTML div element with an id attribute in your index.html file, where the Scheduler will be rendered:

[src/index.html]

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Schedule TypeScript Component</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link rel="shortcut icon" href="resources/favicon.ico" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <!--Style reference from node_modules/@syncfusion/ej2/-->
    <link href="/styles/styles.css" rel="stylesheet" />

    <!--System JS reference and configuration-->
    <script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
    <script src="system.config.js" type="text/javascript"></script>
</head>
<body>
    <!--Element where the Schedule will be rendered-->
    <div id="Schedule"></div>
</body>
</html>

Import the Scheduler component in your app.ts file and initialize it to the element with id Schedule defined in the index.html file:

[src/app/app.ts]

import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule();
scheduleObj.appendTo('#Schedule');

Now, run the application in the browser using the following command:

npm start

The output will display an empty Scheduler.

Populating appointments

To populate the empty Scheduler with appointments, define local JSON data or remote data through the dataSource property within the eventSettings option. Start and end time fields are mandatory for appointments. The following example shows an appointment defined with default fields: Id, Subject, StartTime, and EndTime.

import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let scheduleObj: Schedule = new Schedule({
    height: '550px',
    selectedDate: new Date(2018, 1, 15),
    eventSettings: {
        dataSource: [{
            Id: 1,
            Subject: 'Meeting',
            StartTime: new Date(2018, 1, 15, 10, 0),
            EndTime: new Date(2018, 1, 15, 12, 30)
        }]
    }
});
scheduleObj.appendTo('#Schedule');

You can also use custom field names by mapping them appropriately within the fields property:

import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';

let data: object[] = [{
    Id: 2,
    EventName: 'Meeting',
    StartTime: new Date(2018, 1, 15, 10, 0),
    EndTime: new Date(2018, 1, 15, 12, 30),
    IsAllDay: false
}];

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let scheduleObj: Schedule = new Schedule({
    height: '550px',
    selectedDate: new Date(2018, 1, 15),
    eventSettings: {
        dataSource: data,
        fields: {
            id: 'Id',
            subject: { name: 'EventName' },
            isAllDay: { name: 'IsAllDay' },
            startTime: { name: 'StartTime' },
            endTime: { name: 'EndTime' }
        }
    }
});
scheduleObj.appendTo('#Schedule');

The other fields available in Scheduler can be referred from here.

Setting date

By default, the Scheduler displays the current system date. To change the Scheduler’s current date, set the selectedDate property to a specific date:

import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let scheduleObj: Schedule = new Schedule({
    height: '550px',
    selectedDate: new Date(2018, 1, 15)
});
scheduleObj.appendTo('#Schedule');

Setting view

The Scheduler displays the Week view by default. To change the current view, set the currentView property to one of the following view names:

Day
Week
WorkWeek
Month
Year
Agenda
MonthAgenda
TimelineDay
TimelineWeek
TimelineWorkWeek
TimelineMonth
TimelineYear

import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let scheduleObj: Schedule = new Schedule({
    height: '550px',
    selectedDate: new Date(2018, 1, 15),
    currentView: 'Month'
});
scheduleObj.appendTo('#Schedule');

Individual view customization

Each Scheduler view can be customized individually with its own options, such as setting different start and end hours for Week and Work Week views or hiding weekend days in the Month view only. This is achieved by defining the views property as an array of objects, where each object represents individual view customization.

The output will display the Scheduler with the specified view configuration:

index.ts
index.html
datasource.ts
import { Schedule, Week, WorkWeek, Month } from '@syncfusion/ej2-schedule';
import { defaultData } from './datasource.ts';

Schedule.Inject( Week, WorkWeek, Month );

let scheduleObj: Schedule = new Schedule({
    width: '100%',
    height: '550px',
    selectedDate: new Date(2018, 1, 15),
    views: [{ option: 'Week', startHour: '07:00', endHour: '15:00'},
            { option: 'WorkWeek', startHour: '10:00', endHour: '18:00'},
            { option: 'Month' , showWeekend: false }],
    eventSettings: { dataSource: defaultData }
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Schedule Typescript Component</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Typescript Schedule Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" /> 
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-schedule/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>

<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
        <div id='container'>
                <div id="Schedule"></div>
        </div>
</body>

</html>
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
        }
];

You can also explore the JavaScript Scheduler example to see how toolbar buttons interact with Scheduler functionalities.

Search docs

Ask HelpBot