Editor template in EJ2 TypeScript Scheduler control
31 Jan 202624 minutes to read
Scheduler provides popups and dialogs to display notifications and includes an editor window with event fields for streamlined appointment creation and editing. The editor window and its fields can be easily customized, and validations can be applied to those fields.
Event editor
The editor window opens on the Scheduler when a cell or event is double-clicked. Double-clicking a cell opens the detailed editor window in “Add new” mode, while double-clicking an event opens it in “Edit” mode.
On mobile devices, the detailed editor window opens in edit mode by clicking the edit icon on the popup that appears when single-tapping an event. It can also be opened in add mode by single-tapping a cell, which displays a + indication. Clicking this indication again opens the editor window.
The editor window can be prevented from opening by rendering Scheduler in
readonlymode or by using code customization within thepopupOpenevent.
Change the editor window header title and footer button text
The header title and footer button text of the editor window can be changed by modifying the appropriate localized word collection used in the Scheduler.
import { L10n } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, TimelineViews, Month, Agenda);
L10n.load({
'en-US': {
'schedule': {
'saveButton': 'Add',
'cancelButton': 'Close',
'deleteButton': 'Remove',
'newEvent': 'Add Event',
},
}
});
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['TimelineDay', 'Day', 'Week', 'Month', 'Agenda'],
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 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'
}
];Change the label text of default editor fields
To change the default labels such as Subject, Location, and other field names in the editor window, use the title property available within the field option of eventSettings.
import { Schedule, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, TimelineViews, Month, Agenda);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'TimelineWeek', 'Month', 'Agenda'],
eventSettings: {
dataSource: scheduleData,
fields: {
id: 'Id',
subject: { name: 'Subject', title: 'Event Name' },
location: { name: 'Location', title: 'Event Location' },
description: { name: 'Description', title: 'Event Description' },
startTime: { name: 'StartTime', title: 'Start Duration' },
endTime: { name: 'EndTime', title: 'End Duration' }
}
}
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 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'
}
];Field validation
Required fields in the editor window can be validated on the client-side before submission by adding appropriate validation rules to each field using the validation property available within the field option of eventSettings. The appointment fields have been extended to accept both string and object type values. To perform validations, specify object values for the event fields.
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let minValidation: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
return args['value'].length >= 5;
};
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '500px',
selectedDate: new Date(2018, 1, 15),
eventSettings: {
dataSource: scheduleData,
fields: {
id: 'Id',
subject: { name: 'Subject', validation: { required: true } },
location: { name: 'Location', validation: { required: true } },
description: {
name: 'Description', validation: {
required: true, minLength: [minValidation, 'Need atleast 5 letters to be entered']
}
},
startTime: { name: 'StartTime', validation: { required: true } },
endTime: { name: 'EndTime', validation: { required: true } }
}
}
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 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'
}
];Applicable validation rules can be referred from form validation documentation.
Add additional fields to the default editor
Additional fields can be added to the default event editor by using the popupOpen event which is triggered before the event editor opens on the Scheduler. The popupOpen is a client-side event that triggers before any of the generic popups opens on the Scheduler. The additional field (any of the form elements) should be added with the common class name e-field, so as to handle and process that additional data along with the default event object. In the following example, an additional field Event Type has been added to the default event editor and its value is processed accordingly.
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { createElement } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, PopupOpenEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'WorkWeek', 'Month'],
popupOpen: (args: PopupOpenEventArgs) => {
if (args.type === 'Editor') {
// Create required custom elements in initial time
if (!args.element.querySelector('.custom-field-row')) {
let row: HTMLElement = createElement('div', { className: 'custom-field-row' });
let formElement: HTMLElement = args.element.querySelector('.e-schedule-form');
formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));
let container: HTMLElement = createElement('div', { className: 'custom-field-container' });
let inputEle: HTMLInputElement = createElement('input', {
className: 'e-field', attrs: { name: 'EventType' }
}) as HTMLInputElement;
container.appendChild(inputEle);
row.appendChild(container);
let dropDownList: DropDownList = new DropDownList({
dataSource: [
{ text: 'Public Event', value: 'public-event' },
{ text: 'Maintenance', value: 'maintenance' },
{ text: 'Commercial Event', value: 'commercial-event' },
{ text: 'Family Event', value: 'family-event' }
],
fields: { text: 'text', value: 'value' },
value: (<{ [key: string]: Object }>(args.data)).EventType as string,
floatLabelType: 'Always', placeholder: 'Event Type'
});
dropDownList.appendTo(inputEle);
inputEle.setAttribute('name', 'EventType');
}
}
},
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Scheduler Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<style>
.custom-field-row {
padding-bottom: 14px;
}
</style>
<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 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'
}
];Customize the default time duration in editor window
In the default event editor window, start and end time duration are processed based on the interval value set within the timeScale property. By default, the interval value is set to 30, and therefore the start/end time duration within the event editor will be in 30-minute intervals. This duration value can be changed by modifying the duration option within the popupOpen event as shown in the following code example.
import { Schedule, Day, Week, WorkWeek, Month, PopupOpenEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'WorkWeek', 'Month'],
popupOpen: (args: PopupOpenEventArgs) => {
if (args.type === 'Editor') {
args.duration = 60;
}
},
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Scheduler Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 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'
}
];How to prevent the display of editor and quick popups
The display of editor and quick popup windows can be prevented by passing the value true to the cancel option within the popupOpen event.
import { Schedule, Day, Week, WorkWeek, Month, PopupOpenEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'WorkWeek', 'Month'],
popupOpen: (args: PopupOpenEventArgs) => {
args.cancel = true;
},
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Scheduler Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 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'
}
];To prevent only specific popups on Scheduler, check the condition based on the popup type. The types of popups that can be checked within the popupOpen event are as follows.
| Type | Description |
|---|---|
| Editor | For Detailed editor window. |
| QuickInfo | For Quick popup which opens on cell click. |
| EditEventInfo | For Quick popup which opens on event click. |
| ViewEventInfo | For Quick popup which opens on responsive mode. |
| EventContainer | For more event indicator popup. |
| RecurrenceAlert | For edit recurrence event alert popup. |
| DeleteAlert | For delete confirmation popup. |
| ValidationAlert | For validation alert popup. |
| RecurrenceValidationAlert | For recurrence validation alert popup. |
Customize timezone collection in the editor window
By default, the timezone collections in the editor window are loaded with built-in timezone data. The timezone collections can be customized using the timezoneDataSource property with the collection of TimezoneFields data.
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let data: object[] = [{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2020, 1, 15, 10, 0),
EndTime: new Date(2020, 1, 15, 12, 30),
IsAllDay: false
}, {
Id: 2,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2020, 1, 16, 12, 0),
EndTime: new Date(2020, 1, 16, 13, 0),
IsAllDay: false
}];
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2020, 1, 15),
eventSettings: { dataSource: data },
timezoneDataSource: [
{ Value: 'Pacific/Niue', Text: 'Niue' },
{ Value: 'Pacific/Pago_Pago', Text: 'Pago Pago' },
{ Value: 'Pacific/Honolulu', Text: 'Hawaii Time' },
{ Value: 'Pacific/Rarotonga', Text: 'Rarotonga' },
{ Value: 'Pacific/Tahiti', Text: 'Tahiti' },
],
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Scheduler Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>Close the editor window manually
The editor window can be closed using the closeEditor method.
import { Schedule, Day, Week, WorkWeek, Month, PopupOpenEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
import { Button } from '@syncfusion/ej2-buttons';
import { createElement } from '@syncfusion/ej2-base';
Schedule.Inject(Day, Week, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
currentView: 'Month',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: { dataSource: scheduleData },
popupOpen: (args: PopupOpenEventArgs) => {
if (args.type === 'Editor') {
if (!args.element.querySelector('#closeEditor')) {
let btnElement = createElement("BUTTON", { id: 'closeEditor', className: 'e-custom-close' });
args.element.querySelector('.e-footer-content').appendChild(btnElement)
let btnObj: Button = new Button();
btnElement.textContent = "Close Editor";
btnObj.appendTo('#closeEditor');
btnObj.element.onclick = (): void => {
scheduleObj.closeEditor();
}
}
}
}
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 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'
}
];Customize event editor using template
The event editor window can be customized using the editorTemplate option. The custom window design is built with the required fields using the script template and its type should be of text/x-template.
Each field defined within the template should contain the e-field class, to allow the processing of those field values internally. The ID of this customized script template section is assigned to the editorTemplate option, so that these customized fields will be replaced onto the default editor window.
Note: The e-field class is only applicable for DropDownList, DateTimePicker, MultiSelect, DatePicker, CheckBox and TextBox components. Since we have processed, as field values are processed internally for these components.
When using our Syncfusion® sub-components within the editor using template in the following example, the custom defined form elements needs to be configured as required Syncfusion® components such as DropDownList and DateTimePicker within the popupOpen event. This particular step can be skipped, if using standard form elements.
import { DateTimePicker } from '@syncfusion/ej2-calendars';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, PopupOpenEventArgs } from '@syncfusion/ej2-schedule';
import { eventData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
showQuickInfo: false,
editorTemplate: '#EventEditorTemplate',
popupOpen: (args: PopupOpenEventArgs) => {
if (args.type === 'Editor') {
let statusElement: HTMLInputElement = args.element.querySelector('#EventType') as HTMLInputElement;
if (!statusElement.classList.contains('e-dropdownlist')) {
let dropDownListObject: DropDownList = new DropDownList({
placeholder: 'Choose status', value: statusElement.value,
dataSource: ['New', 'Requested', 'Confirmed']
});
dropDownListObject.appendTo(statusElement);
}
let startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement;
if (!startElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);
}
let endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement;
if (!endElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);
}
}
},
eventSettings: { dataSource: eventData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Scheduler Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<style>
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
</style>
<script id="EventEditorTemplate" type="text/x-template">
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4">
<input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">Status</td>
<td colspan="4">
<input type="text" id="EventType" name="EventType" class="e-field" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4">
<input id="StartTime" class="e-field" type="text" name="StartTime" />
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4">
<input id="EndTime" class="e-field" type="text" name="EndTime" />
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50"
style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</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 eventData: Object[] = [
{
Id: 1,
Subject: 'Surgery - Andrew',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 9, 0),
EndTime: new Date(2018, 1, 12, 10, 0)
}, {
Id: 2,
Subject: 'Consulting - John',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 11, 30)
}, {
Id: 3,
Subject: 'Therapy - Robert',
EventType: 'Requested',
StartTime: new Date(2018, 1, 12, 11, 30),
EndTime: new Date(2018, 1, 12, 12, 30)
}, {
Id: 4,
Subject: 'Observation - Steven',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 12, 30),
EndTime: new Date(2018, 1, 12, 13, 30)
}, {
Id: 5,
Subject: 'Extraction - Nancy',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 13, 30),
EndTime: new Date(2018, 1, 12, 15, 0)
}, {
Id: 6,
Subject: 'Surgery - Paul',
EventType: 'New',
StartTime: new Date(2018, 1, 13, 9, 0),
EndTime: new Date(2018, 1, 13, 10, 0)
}, {
Id: 7,
Subject: 'Extraction - Josephs',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 10, 0),
EndTime: new Date(2018, 1, 13, 11, 0)
}, {
Id: 8,
Subject: 'Consulting - Mario',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 11, 0),
EndTime: new Date(2018, 1, 13, 12, 0)
}, {
Id: 9,
Subject: 'Therapy - Saveley',
EventType: 'Requested',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 13, 30)
}, {
Id: 10,
Subject: 'Observation - Cartrain',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 13, 30),
EndTime: new Date(2018, 1, 13, 15, 30)
}, {
Id: 11,
Subject: 'Consulting - Yang',
EventType: 'New',
StartTime: new Date(2018, 1, 14, 9, 0),
EndTime: new Date(2018, 1, 14, 10, 0)
}, {
Id: 12,
Subject: 'Observation - Michael',
EventType: 'New',
StartTime: new Date(2018, 1, 14, 10, 0),
EndTime: new Date(2018, 1, 14, 11, 30)
}, {
Id: 13,
Subject: 'Surgery - Roland',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 14, 11, 30),
EndTime: new Date(2018, 1, 14, 12, 30)
}, {
Id: 14,
Subject: 'Extraction - Francisco',
EventType: 'Requested',
StartTime: new Date(2018, 1, 14, 12, 30),
EndTime: new Date(2018, 1, 14, 13, 30)
}, {
Id: 15,
Subject: 'Therapy - Henriette',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 14, 13, 30),
EndTime: new Date(2018, 1, 14, 15, 0)
}, {
Id: 16,
Subject: 'Observation - Bernardo',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 9, 0),
EndTime: new Date(2018, 1, 15, 10, 0)
}, {
Id: 17,
Subject: 'Therapy - Wilson',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 11, 0)
}, {
Id: 18,
Subject: 'Consulting - Horst',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 11, 0),
EndTime: new Date(2018, 1, 15, 12, 0)
}, {
Id: 19,
Subject: 'Surgery - Limeira',
EventType: 'Requested',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 13, 30)
}, {
Id: 20,
Subject: 'Observation - Victoria',
EventType: 'Requested',
StartTime: new Date(2018, 1, 15, 13, 30),
EndTime: new Date(2018, 1, 15, 15, 30)
}, {
Id: 21,
Subject: 'Extraction - Afonso',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 16, 9, 0),
EndTime: new Date(2018, 1, 16, 10, 0)
}, {
Id: 22,
Subject: 'Extraction - Paula',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 10, 0),
EndTime: new Date(2018, 1, 16, 11, 0)
}, {
Id: 23,
Subject: 'Observation - George',
EventType: 'Requested',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 0)
}, {
Id: 24,
Subject: 'Therapy - Smith',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 12, 0),
EndTime: new Date(2018, 1, 16, 13, 30)
}, {
Id: 25,
Subject: 'Surgery - Jennifer',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 13, 30),
EndTime: new Date(2018, 1, 16, 15, 30)
}
];Customize header and footer using template
The editor window’s header and footer can be enhanced with custom designs using the editorHeaderTemplate and editorFooterTemplate options. To achieve this, create a script template that includes the necessary fields. Ensure that the template type is set to text/x-template.
In this example, the editor’s header is customized according to the appointment’s subject field using
editorHeaderTemplate. The editorFooterTemplate is used to handle the functionality of validating specific fields before proceeding with the save action or canceling if validation requirements are not met.
import { Schedule, Day, Week, WorkWeek, Month, Agenda, PopupOpenEventArgs } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
const today: Date = new Date();
const data: Record<string, any>[] = [{
Id: 1,
Subject: 'Surgery - Andrew',
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9, 0),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Consulting - John',
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 30),
IsAllDay: false
}, {
Id: 3,
Subject: 'Therapy - Robert',
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 30),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 30),
IsAllDay: false
}, {
Id: 4,
Subject: 'Observation - Steven',
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 30),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 13, 30),
IsAllDay: false
}];
const scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
editorFooterTemplate: '#editor-footer',
editorHeaderTemplate: '#editor-header',
eventSettings: { dataSource: data },
popupOpen: onPopupOpen
});
scheduleObj.appendTo('#Schedule');
function onSaveButtonClick(args: PopupOpenEventArgs) {
const data: Record<string, any> = {
Id: args.data.Id,
Subject: (args.element.querySelector('#Subject') as HTMLInputElement).value,
StartTime: (args.element.querySelector('#StartTime') as any).ej2_instances[0].value,
EndTime: (args.element.querySelector('#EndTime') as any).ej2_instances[0].value,
IsAllDay: (args.element.querySelector('#IsAllDay') as HTMLInputElement).checked
};
if (args.target.classList.contains('e-appointment')) {
scheduleObj.saveEvent(data, 'Save');
} else {
data.Id = scheduleObj.getEventMaxID();
scheduleObj.addEvent(data);
}
scheduleObj.closeEditor();
}
function onPopupOpen(args: PopupOpenEventArgs): void {
if (args.type === 'Editor') {
const saveButton: HTMLElement = args.element.querySelector('#Save') as HTMLElement;
const cancelButton: HTMLElement = args.element.querySelector('#Cancel') as HTMLElement;
const checkBox: HTMLInputElement = args.element.querySelector('#check-box') as HTMLInputElement;
checkBox.onchange = () => {
if (!(checkBox as HTMLInputElement).checked) {
saveButton.setAttribute('disabled', '');
} else {
saveButton.removeAttribute('disabled');
}
};
saveButton.onclick = () => {
onSaveButtonClick(args);
}
cancelButton.onclick = () => {
scheduleObj.closeEditor();
};
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 id="editor-header" type="text/x-template">
${if (!Subject)}<div>Create New Event</div>${else}<div>${Subject}</div>${/if}
</script>
<script id="editor-footer" type="text/x-template">
<div id="verify">
<input type="checkbox" id="check-box" value="unchecked">
<label id="text">Verified</label>
</div>
<div id="right-button">
<button id="Save" class="e-control e-btn e-primary" disabled data-ripple="true">Save</button>
<button id="Cancel" class="e-control e-btn e-primary" data-ripple="true">Cancel</button>
</div>
</script>
<style>
#verify {
position: fixed;
padding: 0 20px;
}
#text {
cursor: pointer;
display: inline-block;
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 14px;
user-select: none;
margin-left: 8px;
vertical-align: middle;
white-space: normal;
}
#right-button {
padding: 0 10px;
}
</style>
<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>Add resource options within editor template
The resource field can be added within the editor template with a multiselect control to allow multiple resource selection.
import { DateTimePicker } from '@syncfusion/ej2-calendars';
import { MultiSelect } from '@syncfusion/ej2-dropdowns';
import { Schedule, Day, Week, WorkWeek, Month, PopupOpenEventArgs } from '@syncfusion/ej2-schedule';
import { eventData, ownerData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'WorkWeek', 'Month'],
group: { resources: ['Owners'] },
showQuickInfo: false,
resources: [{
field: 'OwnerId', title: 'Owners',
name: 'Owners', allowMultiple: true,
dataSource: [
{ text: "Nancy", id: 1, color: "#1aaa55" },
{ text: "Smith", id: 2, color: "#7fa900" },
{ text: "Paul", id: 3, color: "#357cd2" }
],
textField: 'text', idField: 'id', colorField: 'color'
}],
editorTemplate: '#EventEditorTemplate',
popupOpen: (args: PopupOpenEventArgs) => {
if (args.type === 'Editor') {
let startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement;
if (!startElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);
}
let endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement;
if (!endElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);
}
let processElement: HTMLInputElement = args.element.querySelector('#OwnerId');
if (!processElement.classList.contains('e-multiselect')) {
let multiSelectObject: MultiSelect = new MultiSelect({
placeholder: 'Choose a owner',
fields: { text: 'text', value: 'id' },
dataSource: ownerData,
value: <string[]>((args.data.OwnerId instanceof Array) ? args.data.OwnerId : [args.data.OwnerId])
});
multiSelectObject.appendTo(processElement);
}
}
},
eventSettings: { dataSource: eventData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Scheduler Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<style>
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
</style>
<script id="EventEditorTemplate" type="text/x-template">
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4">
<input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4">
<input id="StartTime" class="e-field" type="text" name="StartTime" />
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4">
<input id="EndTime" class="e-field" type="text" name="EndTime" />
</td>
</tr>
<tr>
<td class="e-textlabel">Owner</td>
<td colspan="4">
<input type="text" id="OwnerId" name="OwnerId" class="e-field" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50"
style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</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 eventData: Object[] = [
{
Id: 1,
Subject: 'Surgery - Andrew',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 9, 0),
EndTime: new Date(2018, 1, 12, 10, 0),
OwnerId: 3
}, {
Id: 2,
Subject: 'Consulting - John',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 11, 30),
OwnerId: 3
}, {
Id: 3,
Subject: 'Therapy - Robert',
EventType: 'Requested',
StartTime: new Date(2018, 1, 12, 11, 30),
EndTime: new Date(2018, 1, 12, 12, 30),
OwnerId: 1
}, {
Id: 4,
Subject: 'Observation - Steven',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 12, 30),
EndTime: new Date(2018, 1, 12, 13, 30),
OwnerId: 1
}, {
Id: 5,
Subject: 'Extraction - Nancy',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 13, 30),
EndTime: new Date(2018, 1, 12, 15, 0),
OwnerId: 2
}, {
Id: 6,
Subject: 'Surgery - Paul',
EventType: 'New',
StartTime: new Date(2018, 1, 13, 9, 0),
EndTime: new Date(2018, 1, 13, 10, 0),
OwnerId: 3
}, {
Id: 7,
Subject: 'Extraction - Josephs',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 10, 0),
EndTime: new Date(2018, 1, 13, 11, 0),
OwnerId: 3
}, {
Id: 8,
Subject: 'Consulting - Mario',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 11, 0),
EndTime: new Date(2018, 1, 13, 12, 0),
OwnerId: 2
}, {
Id: 9,
Subject: 'Therapy - Saveley',
EventType: 'Requested',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 13, 30),
OwnerId: 2
}, {
Id: 10,
Subject: 'Observation - Cartrain',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 13, 30),
EndTime: new Date(2018, 1, 13, 15, 30),
OwnerId: 2
}, {
Id: 11,
Subject: 'Consulting - Yang',
EventType: 'New',
StartTime: new Date(2018, 1, 14, 9, 0),
EndTime: new Date(2018, 1, 14, 10, 0),
OwnerId: 1
}, {
Id: 12,
Subject: 'Observation - Michael',
EventType: 'New',
StartTime: new Date(2018, 1, 14, 10, 0),
EndTime: new Date(2018, 1, 14, 11, 30),
OwnerId: 1
}, {
Id: 13,
Subject: 'Surgery - Roland',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 14, 11, 30),
EndTime: new Date(2018, 1, 14, 12, 30),
OwnerId: 1
}, {
Id: 14,
Subject: 'Extraction - Francisco',
EventType: 'Requested',
StartTime: new Date(2018, 1, 14, 12, 30),
EndTime: new Date(2018, 1, 14, 13, 30),
OwnerId: 2
}, {
Id: 15,
Subject: 'Therapy - Henriette',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 14, 13, 30),
EndTime: new Date(2018, 1, 14, 15, 0),
OwnerId: 3
}, {
Id: 16,
Subject: 'Observation - Bernardo',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 9, 0),
EndTime: new Date(2018, 1, 15, 10, 0),
OwnerId: 1
}, {
Id: 17,
Subject: 'Therapy - Wilson',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 11, 0),
OwnerId: 2
}, {
Id: 18,
Subject: 'Consulting - Horst',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 11, 0),
EndTime: new Date(2018, 1, 15, 12, 0),
OwnerId: 3
}, {
Id: 19,
Subject: 'Surgery - Limeira',
EventType: 'Requested',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 13, 30),
OwnerId: 3
}, {
Id: 20,
Subject: 'Observation - Victoria',
EventType: 'Requested',
StartTime: new Date(2018, 1, 15, 13, 30),
EndTime: new Date(2018, 1, 15, 15, 30),
OwnerId: 1
}, {
Id: 21,
Subject: 'Extraction - Afonso',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 16, 9, 0),
EndTime: new Date(2018, 1, 16, 10, 0),
OwnerId: 2
}, {
Id: 22,
Subject: 'Extraction - Paula',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 10, 0),
EndTime: new Date(2018, 1, 16, 11, 0),
OwnerId: 3
}, {
Id: 23,
Subject: 'Observation - George',
EventType: 'Requested',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 0),
OwnerId: 2
}, {
Id: 24,
Subject: 'Therapy - Smith',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 12, 0),
EndTime: new Date(2018, 1, 16, 13, 30),
OwnerId: 1
}, {
Id: 25,
Subject: 'Surgery - Jennifer',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 13, 30),
EndTime: new Date(2018, 1, 16, 15, 30),
OwnerId: 1
}
];
export let ownerData: Object[] = [
{ text: "Nancy", id: 1, color: "#1aaa55" },
{ text: "Smith", id: 2, color: "#7fa900" },
{ text: "Paul", id: 3, color: "#357cd2" }
];Add recurrence options within editor template
The following code example shows how to add recurrence options within the editor template by importing RecurrenceEditor.
import { DateTimePicker } from '@syncfusion/ej2-calendars';
import { Schedule, Day, Week, WorkWeek, Month, RecurrenceEditor, PopupOpenEventArgs } from '@syncfusion/ej2-schedule';
import { eventData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'WorkWeek', 'Month'],
editorTemplate: '#EventEditorTemplate',
popupOpen: (args: PopupOpenEventArgs) => {
if (args.type === 'Editor') {
let startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement;
if (!startElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);
}
let endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement;
if (!endElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);
}
let recurElement: HTMLElement = args.element.querySelector('#RecurrenceEditor');
if (!recurElement.classList.contains('e-recurrenceeditor')) {
let recurrObject: RecurrenceEditor = new RecurrenceEditor({});
recurrObject.appendTo(recurElement);
(scheduleObj.eventWindow as any).recurrenceEditor = recurrObject;
}
document.getElementById('RecurrenceEditor').style.display = (scheduleObj.currentAction == "EditOccurrence") ? 'none' : 'block';
}
},
eventSettings: { dataSource: eventData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Scheduler Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<style>
.custom-event-editor .e-textlabel {
padding-right: 15px;
}
.custom-event-editor td {
padding: 7px;
}
</style>
<script id="EventEditorTemplate" type="text/x-template">
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4">
<input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4">
<input id="StartTime" class="e-field" type="text" name="StartTime" />
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4">
<input id="EndTime" class="e-field" type="text" name="EndTime" />
</td>
</tr>
<tr>
<td class="e-textlabel">Recurrence</td>
<td colspan="4">
<div id='RecurrenceEditor'></div>
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50"
style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</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 eventData: Object[] = [
{
Id: 1,
Subject: 'Surgery - Andrew',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 9, 0),
EndTime: new Date(2018, 1, 12, 10, 0)
}, {
Id: 2,
Subject: 'Consulting - John',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 11, 30)
}, {
Id: 3,
Subject: 'Therapy - Robert',
EventType: 'Requested',
StartTime: new Date(2018, 1, 12, 11, 30),
EndTime: new Date(2018, 1, 12, 12, 30)
}, {
Id: 4,
Subject: 'Observation - Steven',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 12, 30),
EndTime: new Date(2018, 1, 12, 13, 30)
}, {
Id: 5,
Subject: 'Extraction - Nancy',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 13, 30),
EndTime: new Date(2018, 1, 12, 15, 0)
}, {
Id: 6,
Subject: 'Surgery - Paul',
EventType: 'New',
StartTime: new Date(2018, 1, 13, 9, 0),
EndTime: new Date(2018, 1, 13, 10, 0)
}, {
Id: 7,
Subject: 'Extraction - Josephs',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 10, 0),
EndTime: new Date(2018, 1, 13, 11, 0)
}, {
Id: 8,
Subject: 'Consulting - Mario',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 11, 0),
EndTime: new Date(2018, 1, 13, 12, 0)
}, {
Id: 9,
Subject: 'Therapy - Saveley',
EventType: 'Requested',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 13, 30)
}, {
Id: 10,
Subject: 'Observation - Cartrain',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 13, 30),
EndTime: new Date(2018, 1, 13, 15, 30)
}, {
Id: 11,
Subject: 'Consulting - Yang',
EventType: 'New',
StartTime: new Date(2018, 1, 14, 9, 0),
EndTime: new Date(2018, 1, 14, 10, 0)
}, {
Id: 12,
Subject: 'Observation - Michael',
EventType: 'New',
StartTime: new Date(2018, 1, 14, 10, 0),
EndTime: new Date(2018, 1, 14, 11, 30)
}, {
Id: 13,
Subject: 'Surgery - Roland',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 14, 11, 30),
EndTime: new Date(2018, 1, 14, 12, 30)
}, {
Id: 14,
Subject: 'Extraction - Francisco',
EventType: 'Requested',
StartTime: new Date(2018, 1, 14, 12, 30),
EndTime: new Date(2018, 1, 14, 13, 30)
}, {
Id: 15,
Subject: 'Therapy - Henriette',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 14, 13, 30),
EndTime: new Date(2018, 1, 14, 15, 0)
}, {
Id: 16,
Subject: 'Observation - Bernardo',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 9, 0),
EndTime: new Date(2018, 1, 15, 10, 0)
}, {
Id: 17,
Subject: 'Therapy - Wilson',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 11, 0)
}, {
Id: 18,
Subject: 'Consulting - Horst',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 11, 0),
EndTime: new Date(2018, 1, 15, 12, 0)
}, {
Id: 19,
Subject: 'Surgery - Limeira',
EventType: 'Requested',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 13, 30)
}, {
Id: 20,
Subject: 'Observation - Victoria',
EventType: 'Requested',
StartTime: new Date(2018, 1, 15, 13, 30),
EndTime: new Date(2018, 1, 15, 15, 30)
}, {
Id: 21,
Subject: 'Extraction - Afonso',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 16, 9, 0),
EndTime: new Date(2018, 1, 16, 10, 0)
}, {
Id: 22,
Subject: 'Extraction - Paula',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 10, 0),
EndTime: new Date(2018, 1, 16, 11, 0)
}, {
Id: 23,
Subject: 'Observation - George',
EventType: 'Requested',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 0)
}, {
Id: 24,
Subject: 'Therapy - Smith',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 12, 0),
EndTime: new Date(2018, 1, 16, 13, 30)
}, {
Id: 25,
Subject: 'Surgery - Jennifer',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 13, 30),
EndTime: new Date(2018, 1, 16, 15, 30)
}
];Apply validations on editor template fields
In the following code example, validation has been added to the EventType field by using the popupOpen event. This field is set as required, and the validation message is displayed using the FormValidator class.
import { DateTimePicker } from '@syncfusion/ej2-calendars';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { FormValidator } from '@syncfusion/ej2-inputs';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, PopupOpenEventArgs, EJ2Instance } from '@syncfusion/ej2-schedule';
import { eventData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'WorkWeek', 'Month'],
showQuickInfo: false,
editorTemplate: '#EventEditorTemplate',
popupOpen: (args: PopupOpenEventArgs) => {
if (args.type === 'Editor') {
if (!isNullOrUndefined(document.getElementById("EventType_Error"))) {
document.getElementById("EventType_Error").style.display = "none";
document.getElementById("EventType_Error").style.left = "351px";
}
let formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form');
let statusElement: HTMLInputElement = args.element.querySelector('#EventType') as HTMLInputElement;
if (!statusElement.classList.contains('e-dropdownlist')) {
let dropDownListObject: DropDownList = new DropDownList({
placeholder: 'Choose status', value: statusElement.value,
dataSource: ['New', 'Requested', 'Confirmed'],
select: function (args) {
if (!isNullOrUndefined(document.getElementById("EventType_Error"))) {
document.getElementById("EventType_Error").style.display = "none";
}
}
});
dropDownListObject.appendTo(statusElement);
}
let validator: FormValidator = ((formElement as EJ2Instance).ej2_instances[0] as FormValidator);
validator.addRules('EventType', { required: true });
let startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement;
if (!startElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);
}
let endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement;
if (!endElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);
}
}
},
eventSettings: { dataSource: eventData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Scheduler Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<style>
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
.e-popup.e-schedule-error {
top: 90px !important;
left: 200px !important;
}
</style>
<script id="EventEditorTemplate" type="text/x-template">
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4">
<input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">Status</td>
<td colspan="4">
<input type="text" id="EventType" name="EventType" class="e-field" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4">
<input id="StartTime" class="e-field" type="text" name="StartTime" />
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4">
<input id="EndTime" class="e-field" type="text" name="EndTime" />
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50"
style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</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 eventData: Object[] = [
{
Id: 1,
Subject: 'Surgery - Andrew',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 9, 0),
EndTime: new Date(2018, 1, 12, 10, 0)
}, {
Id: 2,
Subject: 'Consulting - John',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 11, 30)
}, {
Id: 3,
Subject: 'Therapy - Robert',
EventType: 'Requested',
StartTime: new Date(2018, 1, 12, 11, 30),
EndTime: new Date(2018, 1, 12, 12, 30)
}, {
Id: 4,
Subject: 'Observation - Steven',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 12, 30),
EndTime: new Date(2018, 1, 12, 13, 30)
}, {
Id: 5,
Subject: 'Extraction - Nancy',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 13, 30),
EndTime: new Date(2018, 1, 12, 15, 0)
}, {
Id: 6,
Subject: 'Surgery - Paul',
EventType: 'New',
StartTime: new Date(2018, 1, 13, 9, 0),
EndTime: new Date(2018, 1, 13, 10, 0)
}, {
Id: 7,
Subject: 'Extraction - Josephs',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 10, 0),
EndTime: new Date(2018, 1, 13, 11, 0)
}, {
Id: 8,
Subject: 'Consulting - Mario',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 11, 0),
EndTime: new Date(2018, 1, 13, 12, 0)
}, {
Id: 9,
Subject: 'Therapy - Saveley',
EventType: 'Requested',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 13, 30)
}, {
Id: 10,
Subject: 'Observation - Cartrain',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 13, 30),
EndTime: new Date(2018, 1, 13, 15, 30)
}, {
Id: 11,
Subject: 'Consulting - Yang',
EventType: 'New',
StartTime: new Date(2018, 1, 14, 9, 0),
EndTime: new Date(2018, 1, 14, 10, 0)
}, {
Id: 12,
Subject: 'Observation - Michael',
EventType: 'New',
StartTime: new Date(2018, 1, 14, 10, 0),
EndTime: new Date(2018, 1, 14, 11, 30)
}, {
Id: 13,
Subject: 'Surgery - Roland',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 14, 11, 30),
EndTime: new Date(2018, 1, 14, 12, 30)
}, {
Id: 14,
Subject: 'Extraction - Francisco',
EventType: 'Requested',
StartTime: new Date(2018, 1, 14, 12, 30),
EndTime: new Date(2018, 1, 14, 13, 30)
}, {
Id: 15,
Subject: 'Therapy - Henriette',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 14, 13, 30),
EndTime: new Date(2018, 1, 14, 15, 0)
}, {
Id: 16,
Subject: 'Observation - Bernardo',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 9, 0),
EndTime: new Date(2018, 1, 15, 10, 0)
}, {
Id: 17,
Subject: 'Therapy - Wilson',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 11, 0)
}, {
Id: 18,
Subject: 'Consulting - Horst',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 11, 0),
EndTime: new Date(2018, 1, 15, 12, 0)
}, {
Id: 19,
Subject: 'Surgery - Limeira',
EventType: 'Requested',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 13, 30)
}, {
Id: 20,
Subject: 'Observation - Victoria',
EventType: 'Requested',
StartTime: new Date(2018, 1, 15, 13, 30),
EndTime: new Date(2018, 1, 15, 15, 30)
}, {
Id: 21,
Subject: 'Extraction - Afonso',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 16, 9, 0),
EndTime: new Date(2018, 1, 16, 10, 0)
}, {
Id: 22,
Subject: 'Extraction - Paula',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 10, 0),
EndTime: new Date(2018, 1, 16, 11, 0)
}, {
Id: 23,
Subject: 'Observation - George',
EventType: 'Requested',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 0)
}, {
Id: 24,
Subject: 'Therapy - Smith',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 12, 0),
EndTime: new Date(2018, 1, 16, 13, 30)
}, {
Id: 25,
Subject: 'Surgery - Jennifer',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 13, 30),
EndTime: new Date(2018, 1, 16, 15, 30)
}
];How to save the customized event editor using template
If the e-field class is not added to each field defined within the template, so you should allow setting those field values should be set externally using the popupClose event.
Note: Data can be retrieved only on the save and delete options. Data cannot be retrieved on the close and cancel options in the editor window.
The following code example shows how to save the customized event editor using a template with the popupClose event.
import { DateTimePicker } from '@syncfusion/ej2-calendars';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, PopupOpenEventArgs, PopupCloseEventArgs } from '@syncfusion/ej2-schedule';
import { eventData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
showQuickInfo: false,
editorTemplate: '#EventEditorTemplate',
popupOpen: (args: PopupOpenEventArgs) => {
if (args.type === 'Editor') {
let subjectElement: HTMLInputElement = args.element.querySelector('#Subject') as HTMLInputElement;
if (subjectElement) {
subjectElement.value = ((<{ [key: string]: Object }>(args.data)).Subject as string) || "";
}
let statusElement: HTMLInputElement = args.element.querySelector('#EventType') as HTMLInputElement;
if (!statusElement.classList.contains('e-dropdownlist')) {
let dropDownListObject: DropDownList = new DropDownList({
placeholder: 'Choose status', value: ((<{ [key: string]: Object }>(args.data)).EventType as string),
dataSource: ['New', 'Requested', 'Confirmed']
});
dropDownListObject.appendTo(statusElement);
}
let startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement;
if (!startElement.classList.contains('e-datetimepicker')) {
startElement.value = (<{ [key: string]: Object }>(args.data)).StartTime as string;
new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);
}
let endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement;
if (!endElement.classList.contains('e-datetimepicker')) {
endElement.value = (<{ [key: string]: Object }>(args.data)).EndTime as string;
new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);
}
let descriptionElement: HTMLInputElement = args.element.querySelector('#Description') as HTMLInputElement;
if (descriptionElement) {
descriptionElement.value = (<{ [key: string]: Object }>(args.data)).Description as string || "";
}
}
},
popupClose: (args: PopupCloseEventArgs) => {
if (args.type === 'Editor' && !isNullOrUndefined(args.data)) {
let subjectElement: HTMLInputElement = args.element.querySelector('#Subject') as HTMLInputElement;
if (subjectElement) {
(<{ [key: string]: Object }>(args.data)).Subject = subjectElement.value;
}
let statusElement: HTMLInputElement = args.element.querySelector('#EventType') as HTMLInputElement;
if (statusElement) {
((<{ [key: string]: Object }>(args.data)).EventType as string) = statusElement.value;
}
let startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement;
if (startElement) {
(<{ [key: string]: Object }>(args.data)).StartTime = startElement.value;
}
let endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement;
if (endElement) {
(<{ [key: string]: Object }>(args.data)).EndTime = endElement.value;
}
let descriptionElement: HTMLInputElement = args.element.querySelector('#Description') as HTMLInputElement;
if (descriptionElement) {
((<{ [key: string]: Object }>(args.data)).Description as string) = descriptionElement.value;
}
}
},
eventSettings: { dataSource: eventData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<style>
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
</style>
<script id="EventEditorTemplate" type="text/x-template">
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4">
<input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">Status</td>
<td colspan="4">
<input type="text" id="EventType" name="EventType" class="e-field" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4">
<input id="StartTime" class="e-field" type="text" name="StartTime" />
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4">
<input id="EndTime" class="e-field" type="text" name="EndTime" />
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50"
style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</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 eventData: Object[] = [
{
Id: 1,
Subject: 'Surgery - Andrew',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 9, 0),
EndTime: new Date(2018, 1, 12, 10, 0)
}, {
Id: 2,
Subject: 'Consulting - John',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 11, 30)
}, {
Id: 3,
Subject: 'Therapy - Robert',
EventType: 'Requested',
StartTime: new Date(2018, 1, 12, 11, 30),
EndTime: new Date(2018, 1, 12, 12, 30)
}, {
Id: 4,
Subject: 'Observation - Steven',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 12, 30),
EndTime: new Date(2018, 1, 12, 13, 30)
}, {
Id: 5,
Subject: 'Extraction - Nancy',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 12, 13, 30),
EndTime: new Date(2018, 1, 12, 15, 0)
}, {
Id: 6,
Subject: 'Surgery - Paul',
EventType: 'New',
StartTime: new Date(2018, 1, 13, 9, 0),
EndTime: new Date(2018, 1, 13, 10, 0)
}, {
Id: 7,
Subject: 'Extraction - Josephs',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 10, 0),
EndTime: new Date(2018, 1, 13, 11, 0)
}, {
Id: 8,
Subject: 'Consulting - Mario',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 11, 0),
EndTime: new Date(2018, 1, 13, 12, 0)
}, {
Id: 9,
Subject: 'Therapy - Saveley',
EventType: 'Requested',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 13, 30)
}, {
Id: 10,
Subject: 'Observation - Cartrain',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 13, 13, 30),
EndTime: new Date(2018, 1, 13, 15, 30)
}, {
Id: 11,
Subject: 'Consulting - Yang',
EventType: 'New',
StartTime: new Date(2018, 1, 14, 9, 0),
EndTime: new Date(2018, 1, 14, 10, 0)
}, {
Id: 12,
Subject: 'Observation - Michael',
EventType: 'New',
StartTime: new Date(2018, 1, 14, 10, 0),
EndTime: new Date(2018, 1, 14, 11, 30)
}, {
Id: 13,
Subject: 'Surgery - Roland',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 14, 11, 30),
EndTime: new Date(2018, 1, 14, 12, 30)
}, {
Id: 14,
Subject: 'Extraction - Francisco',
EventType: 'Requested',
StartTime: new Date(2018, 1, 14, 12, 30),
EndTime: new Date(2018, 1, 14, 13, 30)
}, {
Id: 15,
Subject: 'Therapy - Henriette',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 14, 13, 30),
EndTime: new Date(2018, 1, 14, 15, 0)
}, {
Id: 16,
Subject: 'Observation - Bernardo',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 9, 0),
EndTime: new Date(2018, 1, 15, 10, 0)
}, {
Id: 17,
Subject: 'Therapy - Wilson',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 11, 0)
}, {
Id: 18,
Subject: 'Consulting - Horst',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 15, 11, 0),
EndTime: new Date(2018, 1, 15, 12, 0)
}, {
Id: 19,
Subject: 'Surgery - Limeira',
EventType: 'Requested',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 13, 30)
}, {
Id: 20,
Subject: 'Observation - Victoria',
EventType: 'Requested',
StartTime: new Date(2018, 1, 15, 13, 30),
EndTime: new Date(2018, 1, 15, 15, 30)
}, {
Id: 21,
Subject: 'Extraction - Afonso',
EventType: 'Confirmed',
StartTime: new Date(2018, 1, 16, 9, 0),
EndTime: new Date(2018, 1, 16, 10, 0)
}, {
Id: 22,
Subject: 'Extraction - Paula',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 10, 0),
EndTime: new Date(2018, 1, 16, 11, 0)
}, {
Id: 23,
Subject: 'Observation - George',
EventType: 'Requested',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 0)
}, {
Id: 24,
Subject: 'Therapy - Smith',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 12, 0),
EndTime: new Date(2018, 1, 16, 13, 30)
}, {
Id: 25,
Subject: 'Surgery - Jennifer',
EventType: 'New',
StartTime: new Date(2018, 1, 16, 13, 30),
EndTime: new Date(2018, 1, 16, 15, 30)
}
];To prevent only specific popup closures on Scheduler, check the condition based on the popup type. The types of popups that can be checked within the popupClose event are as follows.
| Type | Description |
|---|---|
| Editor | For Detailed editor window. |
| QuickInfo | For Quick popup which opens on cell click. |
| EditEventInfo | For Quick popup which opens on event click. |
| ViewEventInfo | For Quick popup which opens on responsive mode. |
| EventContainer | For more event indicator popup. |
| RecurrenceAlert | For edit recurrence event alert popup. |
| DeleteAlert | For delete confirmation popup. |
| ValidationAlert | For validation alert popup. |
| RecurrenceValidationAlert | For recurrence validation alert popup. |
Quick popups
Quick info popups are displayed when a cell or appointment is single-clicked on desktop mode. Single-clicking a cell allows providing a subject and saving it quickly. Single-clicking an event displays a popup with an overview of the event information, along with options to edit or delete the event.
By default, these popups are displayed over cells and appointments of Scheduler. To disable this action, set false to showQuickInfo property.
The quick popup that opens when single-clicking cells is not applicable on mobile devices.
import { Schedule, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, TimelineViews, Month, Agenda);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
showQuickInfo: false,
views: ['TimelineDay', 'Day', 'Week', 'Month', 'Agenda'],
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 eventsData: Object[] = [
{
Id: 1,
Subject: 'Server Maintenance',
StartTime: new Date(2018, 1, 11, 10, 0),
EndTime: new Date(2018, 1, 11, 11, 30),
EventType: 'maintenance',
City: 'Seattle',
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Art & Painting Gallery',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
EventType: 'public-event',
City: 'Costa Rica',
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Dany Birthday Celebration',
StartTime: new Date(2018, 1, 13, 10, 0),
EndTime: new Date(2018, 1, 13, 11, 30),
EventType: 'family-event',
City: 'Kirkland',
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'John Wedding Anniversary',
StartTime: new Date(2018, 1, 14, 9, 0),
EndTime: new Date(2018, 1, 14, 10, 0),
EventType: 'family-event',
City: 'Redmond',
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'ISA Annual Conference',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 11, 30),
EventType: 'commercial-event',
City: 'USA',
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Equipment Maintenance',
StartTime: new Date(2018, 1, 16, 12, 0),
EndTime: new Date(2018, 1, 16, 14, 0),
EventType: 'maintenance',
City: 'Seattle',
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Aircraft Maintenance',
StartTime: new Date(2018, 1, 17, 10, 0),
EndTime: new Date(2018, 1, 17, 11, 30),
EventType: 'maintenance',
City: 'Seattle',
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Facilities Maintenance',
StartTime: new Date(2018, 1, 19, 9, 30),
EndTime: new Date(2018, 1, 19, 11, 0),
EventType: 'maintenance',
City: 'Seattle',
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Britto Birthday Celebration',
StartTime: new Date(2018, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
EventType: 'family-event',
City: 'Greenland',
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Justin Wedding Anniversary',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
EventType: 'family-event',
City: 'Finland',
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'AIEA Annual Meet',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
EventType: 'commercial-event',
City: 'USA',
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'AAN Conference',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 7, 12, 30),
EventType: 'commercial-event',
City: 'USA',
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Photography Gallery',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
EventType: 'public-event',
City: 'Chennai',
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Beach Clean-up',
StartTime: new Date(2018, 1, 14, 12, 0),
EndTime: new Date(2018, 1, 14, 2, 0),
EventType: 'public-event',
City: 'Mumbai',
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Turtle Walk',
StartTime: new Date(2018, 1, 19, 13, 0),
EndTime: new Date(2018, 1, 19, 14, 30),
EventType: 'public-event',
City: 'Costa Rica',
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Silent Walk for Cancer day',
StartTime: new Date(2018, 1, 22, 13, 0),
EndTime: new Date(2018, 1, 22, 14, 30),
EventType: 'public-event',
City: 'Chennai',
CategoryColor: '#ea7a57'
}];
export let 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 resourceData: Object[] = [
{
Id: 1,
Subject: 'Family vacation',
StartTime: new Date(2018, 3, 1, 9, 30),
EndTime: new Date(2018, 3, 1, 12, 0),
IsAllDay: false,
Location: 'London',
OwnerId: 1,
RoomId: 1
}, {
Id: 2,
Subject: 'Holiday',
StartTime: new Date(2018, 3, 1, 12, 30),
EndTime: new Date(2018, 3, 1, 14, 45),
IsAllDay: false,
Location: 'USA',
OwnerId: 2,
RoomId: 2
}, {
Id: 3,
Subject: 'Conference',
StartTime: new Date(2018, 3, 2, 10, 0),
EndTime: new Date(2018, 3, 2, 12, 30),
IsAllDay: false,
Location: 'Paris',
OwnerId: 1,
RoomId: 1
}, {
Id: 4,
Subject: 'Weekend trip',
StartTime: new Date(2018, 3, 2, 13, 0),
EndTime: new Date(2018, 3, 2, 15, 30),
IsAllDay: false,
Location: 'Spain',
OwnerId: 2,
RoomId: 2
}, {
Id: 5,
Subject: 'Weekend trip',
StartTime: new Date(2018, 3, 3, 9, 0),
EndTime: new Date(2018, 3, 3, 11, 30),
IsAllDay: false,
Location: 'Paris',
OwnerId: 1,
RoomId: 1
}, {
Id: 6,
Subject: 'Holiday trip',
StartTime: new Date(2018, 3, 3, 14, 0),
EndTime: new Date(2018, 3, 3, 16, 45),
IsAllDay: false,
Location: 'Thailand',
OwnerId: 2,
RoomId: 2
}, {
Id: 7,
Subject: 'World cup',
StartTime: new Date(2018, 3, 4, 11, 15),
EndTime: new Date(2018, 3, 4, 13, 30),
IsAllDay: false,
Location: 'Brazil',
OwnerId: 1,
RoomId: 1
}, {
Id: 8,
Subject: 'Test match',
StartTime: new Date(2018, 3, 4, 9, 15),
EndTime: new Date(2018, 3, 4, 11, 45),
IsAllDay: false,
Location: 'West indies',
OwnerId: 2,
RoomId: 2
}, {
Id: 9,
Subject: 'One-day match',
StartTime: new Date(2018, 3, 5, 9, 30),
EndTime: new Date(2018, 3, 5, 12, 45),
IsAllDay: false,
Location: 'India',
OwnerId: 1,
RoomId: 1
}, {
Id: 10,
Subject: 'Test drive',
StartTime: new Date(2018, 3, 5, 13, 45),
EndTime: new Date(2018, 3, 5, 16, 30),
IsAllDay: false,
Location: 'London',
OwnerId: 2,
RoomId: 1
}
];Open quick popup on multiple cell selection
The quick popup can be displayed immediately after multiple cells are selected in Scheduler by setting the quickInfoOnSelectionEnd property to true. By default, it’s value is set to false.
import { Schedule, Day, Week, WorkWeek } from '@syncfusion/ej2-schedule';
import { resourceData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 3, 1),
quickInfoOnSelectionEnd: true,
group: {
resources: ['Rooms', 'Owners']
},
resources: [
{
field: 'RoomId', title: 'Room',
name: 'Rooms', allowMultiple: false,
dataSource: [
{ RoomText: 'ROOM 1', Id: 1, RoomColor: '#cb6bb2' },
{ RoomText: 'ROOM 2', Id: 2, RoomColor: '#56ca85' }
],
textField: 'RoomText', idField: 'Id', colorField: 'RoomColor'
}, {
field: 'OwnerId', title: 'Owner',
name: 'Owners', allowMultiple: true,
dataSource: [
{ OwnerText: 'Nancy', Id: 1, OwnerGroupId: 1, OwnerColor: '#ffaa00' },
{ OwnerText: 'Steven', Id: 2, OwnerGroupId: 2, OwnerColor: '#f8a398' },
{ OwnerText: 'Michael', Id: 3, OwnerGroupId: 1, OwnerColor: '#7499e1' }
],
textField: 'OwnerText', idField: 'Id', groupIDField: 'OwnerGroupId', colorField: 'OwnerColor'
}
],
eventSettings: { dataSource: resourceData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 resourceData: Object[] = [
{
Id: 1,
Subject: 'Family vacation',
StartTime: new Date(2018, 3, 1, 9, 30),
EndTime: new Date(2018, 3, 1, 12, 0),
IsAllDay: false,
Location: 'London',
OwnerId: 1,
RoomId: 1
}, {
Id: 2,
Subject: 'Holiday',
StartTime: new Date(2018, 3, 1, 12, 30),
EndTime: new Date(2018, 3, 1, 14, 45),
IsAllDay: false,
Location: 'USA',
OwnerId: 2,
RoomId: 2
}, {
Id: 3,
Subject: 'Conference',
StartTime: new Date(2018, 3, 2, 10, 0),
EndTime: new Date(2018, 3, 2, 12, 30),
IsAllDay: false,
Location: 'Paris',
OwnerId: 1,
RoomId: 1
}, {
Id: 4,
Subject: 'Weekend trip',
StartTime: new Date(2018, 3, 2, 13, 0),
EndTime: new Date(2018, 3, 2, 15, 30),
IsAllDay: false,
Location: 'Spain',
OwnerId: 2,
RoomId: 2
}, {
Id: 5,
Subject: 'Weekend trip',
StartTime: new Date(2018, 3, 3, 9, 0),
EndTime: new Date(2018, 3, 3, 11, 30),
IsAllDay: false,
Location: 'Paris',
OwnerId: 1,
RoomId: 1
}, {
Id: 6,
Subject: 'Holiday trip',
StartTime: new Date(2018, 3, 3, 14, 0),
EndTime: new Date(2018, 3, 3, 16, 45),
IsAllDay: false,
Location: 'Thailand',
OwnerId: 2,
RoomId: 2
}, {
Id: 7,
Subject: 'World cup',
StartTime: new Date(2018, 3, 4, 11, 15),
EndTime: new Date(2018, 3, 4, 13, 30),
IsAllDay: false,
Location: 'Brazil',
OwnerId: 1,
RoomId: 1
}, {
Id: 8,
Subject: 'Test match',
StartTime: new Date(2018, 3, 4, 9, 15),
EndTime: new Date(2018, 3, 4, 11, 45),
IsAllDay: false,
Location: 'West indies',
OwnerId: 2,
RoomId: 2
}, {
Id: 9,
Subject: 'One-day match',
StartTime: new Date(2018, 3, 5, 9, 30),
EndTime: new Date(2018, 3, 5, 12, 45),
IsAllDay: false,
Location: 'India',
OwnerId: 1,
RoomId: 1
}, {
Id: 10,
Subject: 'Test drive',
StartTime: new Date(2018, 3, 5, 13, 45),
EndTime: new Date(2018, 3, 5, 16, 30),
IsAllDay: false,
Location: 'London',
OwnerId: 2,
RoomId: 1
}
];How to change the watermark text of quick popup subject
By default, Add Title text is displayed on the subject field of the quick popup. To change the default watermark text, modify the value of the appropriate localized word collection used in the Scheduler.
L10n.load({
'en-US': {
'schedule': {
'addTitle' : 'New Title'
}
}
});Customize quick popups
The look and feel of the built-in quick popup window that opens when single-clicking cells or appointments can be customized using the quickInfoTemplates property of the Scheduler. There are three sub-options available to customize:
- header - Accepts the template design that customizes the header part of the quick popup.
- content - Accepts the template design that customizes the content part of the quick popup.
- footer - Accepts the template design that customizes the footer part of the quick popup.
import { Schedule, Day, Week, WorkWeek } from '@syncfusion/ej2-schedule';
import { resourceData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 3, 1),
quickInfoTemplates: {
header: '#headerTemplate',
content: '#contentTemplate',
footer: '#footerTemplate'
},
group: {
resources: ['Rooms', 'Owners']
},
resources: [
{
field: 'RoomId', title: 'Room',
name: 'Rooms', allowMultiple: false,
dataSource: [
{ RoomText: 'ROOM 1', Id: 1, RoomColor: '#cb6bb2' },
{ RoomText: 'ROOM 2', Id: 2, RoomColor: '#56ca85' }
],
textField: 'RoomText', idField: 'Id', colorField: 'RoomColor'
}, {
field: 'OwnerId', title: 'Owner',
name: 'Owners', allowMultiple: true,
dataSource: [
{ OwnerText: 'Nancy', Id: 1, OwnerGroupId: 1, OwnerColor: '#ffaa00' },
{ OwnerText: 'Steven', Id: 2, OwnerGroupId: 2, OwnerColor: '#f8a398' },
{ OwnerText: 'Michael', Id: 3, OwnerGroupId: 1, OwnerColor: '#7499e1' }
],
textField: 'OwnerText', idField: 'Id', groupIDField: 'OwnerGroupId', colorField: 'OwnerColor'
}
],
eventSettings: { dataSource: resourceData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<style>
.e-textlabel {
font-weight: bold;
padding-right: 5px;
}
.custom-event-editor td {
padding: 5px;
}
.e-quick-popup-wrapper .e-cell-content {
padding: 0 10px 10px 10px;
}
.e-quick-popup-wrapper .e-cell-content div {
padding-bottom: 10px;
}
.e-quick-popup-wrapper .e-cell-content .e-field {
border-left-width: 0;
border-top-width: 0;
border-right-width: 0;
height: 25px;
width: 100%;
}
.e-quick-popup-wrapper .e-event-content {
display: flex;
}
.e-quick-popup-wrapper .e-event-header {
position: absolute;
right: 0;
}
.e-quick-popup-wrapper .e-cell-footer .e-event-details {
padding-right: 40px;
}
.e-quick-popup-wrapper .e-cell-footer .e-event-create,
.e-quick-popup-wrapper .e-event-footer .e-event-edit {
position: absolute;
right: 0;
}
.e-quick-popup-wrapper .e-event-content .subject {
padding-top: 10px;
padding-left: 10px;
font-weight: 500;
font-size: 14px;
}
</style>
<script id="headerTemplate" type="text/x-template">
<div>
${if (elementType === 'cell')}
<div class="e-cell-header">
<div class="e-header-icon-wrapper">
<button class="e-close" title="Close"></button>
</div>
</div>
${else}
<div class="e-event-header">
<div class="e-header-icon-wrapper">
<button class="e-close" title="CLOSE"></button>
</div>
</div>
${/if}
</div>
</script>
<script id="contentTemplate" type="text/x-template">
<div>
${if (elementType === 'cell')}
<div class="e-cell-content">
<form class="e-schedule-form">
<div>
<input class="subject e-field" type="text" name="Subject" placeholder="Title">
</div>
<div>
<input class="location e-field" type="text" name="Location" placeholder="Location">
</div>
</form>
</div>
${else}
<div class="e-event-content">
<div class="e-subject-wrap">
${if (Subject)}
<div class="subject">${Subject}</div>${/if} ${if (City)}
<div class="location">${City}</div>${/if} ${if (Description)}
<div class="description">${Description}</div>${/if}
</div>
</div>
${/if}
</div>
</script>
<script id="footerTemplate" type="text/x-template">
<div>
${if (elementType === 'cell')}
<div class="e-cell-footer">
<button class="e-event-details" title="Additional Details">Additional Details</button>
<button class="e-event-create" title="Add">Add</button>
</div>
${else}
<div class="e-event-footer">
<button class="e-event-edit" title="Edit">Edit</button>
<button class="e-event-delete" title="Delete">Delete</button>
</div>
${/if}
</div>
</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 resourceData: Object[] = [
{
Id: 1,
Subject: 'Family vacation',
StartTime: new Date(2018, 3, 1, 9, 30),
EndTime: new Date(2018, 3, 1, 12, 0),
IsAllDay: false,
Location: 'London',
OwnerId: 1,
RoomId: 1
}, {
Id: 2,
Subject: 'Holiday',
StartTime: new Date(2018, 3, 1, 12, 30),
EndTime: new Date(2018, 3, 1, 14, 45),
IsAllDay: false,
Location: 'USA',
OwnerId: 2,
RoomId: 2
}, {
Id: 3,
Subject: 'Conference',
StartTime: new Date(2018, 3, 2, 10, 0),
EndTime: new Date(2018, 3, 2, 12, 30),
IsAllDay: false,
Location: 'Paris',
OwnerId: 1,
RoomId: 1
}, {
Id: 4,
Subject: 'Weekend trip',
StartTime: new Date(2018, 3, 2, 13, 0),
EndTime: new Date(2018, 3, 2, 15, 30),
IsAllDay: false,
Location: 'Spain',
OwnerId: 2,
RoomId: 2
}, {
Id: 5,
Subject: 'Weekend trip',
StartTime: new Date(2018, 3, 3, 9, 0),
EndTime: new Date(2018, 3, 3, 11, 30),
IsAllDay: false,
Location: 'Paris',
OwnerId: 1,
RoomId: 1
}, {
Id: 6,
Subject: 'Holiday trip',
StartTime: new Date(2018, 3, 3, 14, 0),
EndTime: new Date(2018, 3, 3, 16, 45),
IsAllDay: false,
Location: 'Thailand',
OwnerId: 2,
RoomId: 2
}, {
Id: 7,
Subject: 'World cup',
StartTime: new Date(2018, 3, 4, 11, 15),
EndTime: new Date(2018, 3, 4, 13, 30),
IsAllDay: false,
Location: 'Brazil',
OwnerId: 1,
RoomId: 1
}, {
Id: 8,
Subject: 'Test match',
StartTime: new Date(2018, 3, 4, 9, 15),
EndTime: new Date(2018, 3, 4, 11, 45),
IsAllDay: false,
Location: 'West indies',
OwnerId: 2,
RoomId: 2
}, {
Id: 9,
Subject: 'One-day match',
StartTime: new Date(2018, 3, 5, 9, 30),
EndTime: new Date(2018, 3, 5, 12, 45),
IsAllDay: false,
Location: 'India',
OwnerId: 1,
RoomId: 1
}, {
Id: 10,
Subject: 'Test drive',
StartTime: new Date(2018, 3, 5, 13, 45),
EndTime: new Date(2018, 3, 5, 16, 30),
IsAllDay: false,
Location: 'London',
OwnerId: 2,
RoomId: 1
}
];The quick popup in adaptive mode can also be customized using
quickInfoTemplateswith thee-deviceclass.
Open the quick info popup manually
The quick info popup in Scheduler can be opened using the openQuickInfoPopup public method. To open the cell quick info popup, pass the cell data as an argument to the method. To open the event quick info popup, pass the event data object as an argument to the method.
import { Schedule, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-schedule';
import { createElement } from '@syncfusion/ej2-base';
Schedule.Inject(Day, Week, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2023, 2, 5),
currentView: 'Month',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: {
dataSource: [{
Id: 1,
Subject: 'Review Meeting',
StartTime: new Date(2023, 2, 5, 20, 0, 0),
EndTime: new Date(2023, 2, 5, 21, 0, 0)
}]
}
});
scheduleObj.appendTo('#Schedule');
let btnElement = createElement("Button", { id: 'openCellClickInfo' });
document.getElementById('button').appendChild(btnElement);
btnElement.textContent = "Show Cell QuickInfo Popup";
btnElement.onclick = () => {
scheduleObj.openQuickInfoPopup({
Subject: 'Meeting',
StartTime: new Date(2023, 2, 6, 20, 0, 0),
EndTime: new Date(2023, 2, 6, 21, 0, 0)
});
};
let eventButton = createElement("Button", { id: 'openeventClickInfo' });
document.getElementById('button').appendChild(eventButton);
eventButton.textContent = "Show Event QuickInfo Popup";
eventButton.onclick = () => {
scheduleObj.openQuickInfoPopup({
Id: 1,
Subject: 'Review Meeting',
StartTime: new Date(2023, 2, 5, 20, 0, 0),
EndTime: new Date(2023, 2, 5, 21, 0, 0)
});
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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="button"></div>
<div id="Schedule"></div>
</div>
</body>
</html>Close the quick info popup manually
The quick info popup in Scheduler can be closed using the closeQuickInfoPopup public method. The following code example demonstrates how to close the quick info popup manually.
import { Schedule, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-schedule';
import { createElement } from '@syncfusion/ej2-base';
Schedule.Inject(Day, Week, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2023, 2, 5),
currentView: 'Month',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: {
dataSource: [{
Id: 1,
Subject: 'Review Meeting',
StartTime: new Date(2023, 2, 5, 20, 0, 0),
EndTime: new Date(2023, 2, 5, 21, 0, 0)
}]
}
});
scheduleObj.appendTo('#Schedule');
let closeButton = createElement("Button", { id: 'closeQuickInfo' });
document.getElementById('button').appendChild(closeButton);
closeButton.textContent = "Close Quick Info Popup";
closeButton.onclick = (): void => {
scheduleObj.closeQuickInfoPopup();
};<!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" />
<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="button"></div>
<div id="Schedule"></div>
</div>
</body>
</html>More events indicator and popup
When the number of appointments in a particular time range exceeds the default appointment height of a cell in month view and all timeline views, a + more text indicator is displayed at the bottom of those cells. This indicator denotes that the cell contains additional appointments, and clicking on it displays a popup with all the appointments present on that day.
To disable the popup displaying all hidden appointments, when clicking on the text indicator, use code customization within the
popupOpenevent.
The same indicator is displayed on the all-day row in calendar views such as day, week and work week views, when the number of appointments present in a cell exceeds three. Clicking on the text indicator here does not open a popup, but allows the expand/collapse option for viewing the remaining appointments present in the all-day row.
The following code example shows how to disable the display of such popups when clicking on the more text indicator.
import { Schedule, Day, Week, WorkWeek, Month, PopupOpenEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
currentView: 'Month',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
popupOpen: (args: PopupOpenEventArgs) => {
if (args.type === 'EventContainer') {
args.cancel = true;
}
},
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 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'
}
];Customize the popup that opens on more indicator
The following code example shows how to customize the default more indicator popup by displaying the number of events rendered that day in the header.
import { Internationalization } from '@syncfusion/ej2-base';
import { Schedule, Month, PopupOpenEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Month'],
popupOpen: (args: PopupOpenEventArgs) => {
if (args.type === 'EventContainer') {
let instance: Internationalization = new Internationalization();
let date: string = instance.formatDate(args.data.date, { skeleton: 'MMMEd' });
((args.element.querySelector('.e-header-date')) as HTMLElement).innerText = date;
((args.element.querySelector('.e-header-day')) as HTMLElement).innerText = 'Event count: ' + args.data.event.length;
}
},
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<style>
.e-schedule .e-more-popup-wrapper .e-header-date {
font-size: 15px !important;
max-width: 44% !important;
}
</style>
<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 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'
}
];Prevent the display of popup when clicking on the more text indicator
The display of the popup window can be prevented by passing the value true to the cancel option within the MoreEventsClick event.
import { Schedule, Day, Week, WorkWeek, Month, MoreEventsClickArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
currentView: 'Month',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
moreEventsClick: (args: MoreEventsClickArgs) => {
args.cancel = true;
},
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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="button"></div>
<div id="Schedule"></div>
</div>
</body>
</html>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'
}
];Navigate to Day view when clicking on more text indicator
The following code example shows how to customize the moreEventsClick event to navigate to the Day view when clicking on the more text indicator.
import { Schedule, Day, Week, WorkWeek, Month, MoreEventsClickArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
currentView: 'Month',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
moreEventsClick: (args: MoreEventsClickArgs) => {
args.isPopupOpen = false;
},
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 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'
}
]Refer to our JavaScript Scheduler feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Scheduler example to learn how to present and manipulate data.