Appointments in EJ2 TypeScript Scheduler control
31 Jan 202624 minutes to read
Appointments in the Scheduler represent events scheduled for specific time periods. Each appointment can be configured for various time ranges and categorized based on its duration and recurrence pattern. The Scheduler supports the following appointment types:
- Normal events
- Spanned events
- All-day events
- Recurring events
Normal events
Normal events are appointments scheduled within a specific time interval on a single day.
Creating a normal event
Here’s an example of how to create a normal event in the Scheduler using simple JSON data:
import { Schedule, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-schedule';
let data: object[] = [{
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30)
}];
Schedule.Inject(Day, Week, TimelineViews, Month, Agenda);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'TimelineWeek', 'Month', 'Agenda'],
eventSettings: {
dataSource: data
}
});
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>Spanned events
Spanned events are appointments that extend beyond 24 hours. By default, these events display in the all-day row. This category also includes events spanning multiple days but lasting less than 24 hours, which appear appropriately on both days.
For example, an appointment scheduled from November 25, 2018, at 11:00 PM to November 26, 2018, at 2:00 AM (spanning less than 24 hours) will be split and displayed across both days.
Customize the rendering of the spanned events
By default, the Scheduler renders spanned events (appointments lasting more than 24 hours) in the all-day row. To display these events within work cells instead, set the spannedEventPlacement option to TimeSlot within the eventSettings property. The following example demonstrates this customization:
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let data: object[] = [{
Id: 1,
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 17, 12, 30),
IsAllDay: false
}, {
Id: 2,
Subject: 'London',
StartTime: new Date(2018, 1, 16, 12, 0),
EndTime: new Date(2018, 1, 18, 13, 0),
IsAllDay: false
}];
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: {
dataSource: data,
spannedEventPlacement: 'TimeSlot'
}
});
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>All-day events
All-day events are appointments that occupy an entire day, such as holidays or full-day conferences. These events typically display in a separate all-day row below the date header section. In Timeline views, all-day appointments appear within the main content area since these views do not include a separate all-day row.
To designate a normal appointment as an all-day event, set the
isAllDayfield to true.
Hide all-day row events
The all-day row appointments can be hidden from the Scheduler UI using CSS customization:
<style>
.e-schedule .e-date-header-wrap .e-schedule-table thead {
display: none;
}
</style>The all-day row supports scrolling functionality. For more information, refer to the enable scroll option on all-day section documentation.
Expand all day appointments view on initial load
When numerous appointments exist in the all-day view, the dataBound event can be utilized to automatically display all all-day events on initial load, eliminating the need for users to manually click the expand toggle.
import { Schedule, Day, Week, TimelineViews, Month, Agenda, DragAndDrop } from '@syncfusion/ej2-schedule';
let data: object[] = [
{
EndTime: new Date(2022, 4, 4, 0, 0),
Id: '1',
IsAllDay: true,
StartTime: new Date(2022, 4, 2, 0, 0),
Subject:
'<i class="fas fa-truck-pickup"></i> | Install Bullnose Brick/ Coping | Jones | 3521',
},
{
EndTime: new Date(2022, 3, 30, 0, 0),
Id: '2',
IsAllDay: true,
StartTime: new Date(2022, 3, 29, 0, 0),
Subject:
'<i class="fas fa-truck-pickup"></i> | Plumbing Checklist | Jaimungal | 3671 :: Pool',
},
{
EndTime: new Date(2022, 4, 7, 0, 0),
Id: '3',
IsAllDay: true,
StartTime: new Date(2022, 4, 2, 0, 0),
Subject:
'<i class="fas fa-truck-pickup"></i> | Waterline Tile | Jaimungal | 3671 :: Pool',
},
{
EndTime: new Date(2022, 3, 30, 0, 0),
Id: '4',
IsAllDay: true,
StartTime: new Date(2022, 3, 28, 0, 0),
Subject:
'<i class="fas fa-truck-pickup"></i> | Underground Plumbing | Jaimungal | 3671 :: Pool',
},
{
EndTime: new Date(2022, 4, 4, 0, 0),
Id: '5',
IsAllDay: true,
StartTime: new Date(2022, 4, 3, 0, 0),
Subject:
'<i class="fas fa-truck-pickup"></i> | Backfill/ Compaction | Jaimungal | 3671 :: Pool',
},
{
EndTime: new Date(2022, 4, 7, 0, 0),
Id: '6',
IsAllDay: true,
StartTime: new Date(2022, 4, 4, 0, 0),
Subject:
'<i class="fas fa-truck-pickup"></i> | Install Bullnose Brick/ Coping | Jaimungal | 3671 :: Pool',
},
{
EndTime: new Date(2022, 4, 1, 0, 0),
Id: '7',
IsAllDay: true,
StartTime: new Date(2022, 3, 30, 0, 0),
Subject:
'<i class="fas fa-truck-pickup"></i> | Steel/ Checklist | VP Highland Model | 3719 :: Pool',
},
{
Description:
'Let Yves know I did not see skimmer southern gunite did shell',
EndTime: new Date(2022, 4, 4, 0, 0),
Id: '8',
IsAllDay: true,
StartTime: new Date(2022, 4, 3, 0, 0),
Subject:
'<i class="fas fa-truck-pickup"></i> | Shotcrete Shell | VP Highland Model | 3719 :: Pool',
},
{
EndTime: new Date(2022, 3, 30, 0, 0),
Id: '9',
IsAllDay: true,
StartTime: new Date(2022, 3, 29, 0, 0),
Subject:
'<i class="fas fa-truck-pickup"></i> | Tile Selections/ Pavers/ Finish | VP Highland Model | 3719 :: Pool',
},
{
EndTime: new Date(2022, 3, 30, 0, 0),
Id: '10',
IsAllDay: true,
StartTime: new Date(2022, 3, 26, 0, 0),
Subject:
'<i class="fas fa-truck-pickup"></i> | Layout/ Form Rebar Shell | VP Highland Model | 3719 :: Pool',
},
];
var initialLoad = true;
Schedule.Inject(Day, Week, TimelineViews, Month, Agenda, DragAndDrop);
let scheduleObj: Schedule = new Schedule({
dataBound() {
if (initialLoad) {
this.element.querySelector('.e-all-day-appointment-section').click();
initialLoad = false;
}
},
height: '550px',
selectedDate: new Date(2022, 3, 25),
views: ['Day', 'Week'],
eventSettings: {
dataSource: data,
},
enableHtmlSanitizer: false
});
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>Recurring events
Recurring events are appointments that repeat at regular intervals according to a defined recurrence rule. These events can recur daily, weekly, monthly, or yearly, and are typically indicated by a repeat marker icon at the bottom-right corner of the appointment.
Creating a recurring event
The following example demonstrates how to create a recurring event in the Scheduler with a specific recurrenceRule. In this example, an event recurs daily and ends after 5 occurrences:
import { Schedule, Day, Week, TimelineMonth, Month, Agenda } from '@syncfusion/ej2-schedule';
let data: object[] = [{
Id: 1,
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false,
RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=5'
}];
Schedule.Inject(Day, Week, TimelineMonth, Month, Agenda);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'TimelineMonth', 'Month', 'Agenda'],
eventSettings: {
dataSource: data
}
});
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>Adding exceptions
Specific dates can be excluded from a recurrence series by adding them to the recurrenceException field. Exception dates must be provided in ISO date-time format without hyphens (-) separating date elements.
For example, February 22, 2018, should be represented as “20180222”. The time component in UTC format requires a “Z” suffix without spaces. For instance, “07:30:00 UTC” becomes “073000Z”.
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let data: object[] = [{
Id: 1,
Subject: 'Paris',
StartTime: new Date(2018, 0, 28, 10, 0),
EndTime: new Date(2018, 0, 28, 12, 30),
IsAllDay: false,
RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=8',
RecurrenceException: '20180129T043000Z,20180131T043000Z,20180202T043000Z'
}];
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 0, 28),
eventSettings: {
dataSource: data
}
});
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>Editing an occurrence from a series
To edit a particular occurrence from an event series and display it on the initial Scheduler load, add the edited occurrence as a new event to the dataSource collection. Include an additional recurrenceID field that references the ID value of the parent event.
In the following example, a recurring instance appearing on January 30, 2018, is modified with alternative timings. This date is removed from the parent repeating event (running from January 28 to February 4, 2018) by populating the recurrenceException field on the parent event with the excluded date value. The edited occurrence, created as a new event, includes a recurrenceID field that references the parent event’s Id value.
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let data: object[] = [{
Id: 1,
Subject: 'Scrum Meeting',
StartTime: new Date(2018, 0, 28, 10, 0),
EndTime: new Date(2018, 0, 28, 12, 30),
IsAllDay: false,
RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=8',
RecurrenceException: '20180130T043000Z'
},
{
Id: 2,
Subject: 'Scrum Meeting',
StartTime: new Date(2018, 0, 30, 9, 0),
EndTime: new Date(2018, 0, 30, 10, 30),
Description: "Meeting time changed based on team activities.",
RecurrenceID: 1
}];
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 0, 28),
eventSettings: {
dataSource: data
}
});
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>Edit only the current and following events
To edit only the current and following events in a recurring series, enable the editFollowingEvents property within eventSettings. Add the edited occurrence as a new event to the dataSource collection with an additional followingID field that references the ID value of the immediate parent event.
In the following example, a recurring instance appearing on January 30, 2018, and all following dates are modified with a different subject. These dates are removed from the parent repeating event (repeating from January 28 to February 4, 2018) by modifying the recurrenceRule field on the parent event with an until date value. The updated events, created as new events, include a followingID field that references the immediate parent event’s Id value.
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let data: object[] = [{
Id: 1,
Subject: 'Scrum Meeting',
StartTime: new Date(2018, 0, 28, 10, 0),
EndTime: new Date(2018, 0, 28, 12, 30),
IsAllDay: false,
RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;UNTIL=20180129T043000Z;',
},
{
Id: 2,
Subject: 'Scrum Meeting - Following Edited',
StartTime: new Date(2018, 0, 30, 10, 0),
EndTime: new Date(2018, 0, 30, 12, 30),
IsAllDay: false,
RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;UNTIL=20180204T043000Z;',
FollowingID: 1
}];
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 0, 28),
eventSettings: {
dataSource: data,
editFollowingEvents: 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>Recurrence options and rules
Events can repeat on daily, weekly, monthly, or yearly bases using recurrence rules. The following details must be assigned to the recurrenceRule property to generate recurring instances:
- Repeat type (daily/weekly/monthly/yearly)
- Repetition frequency
- Interval duration
- Time period for rendering the appointment
Four repeat types are available:
- Daily - Creates recurring instances on a daily basis.
- Weekly - Creates recurring instances on a weekly basis for selected days.
- Monthly - Creates recurring instances on a monthly basis for selected months and other specified recurrence criteria.
- Yearly - Creates recurring instances on a yearly basis.
Recurrence properties
The following table describes the properties used to create recurrence appointments with their respective time periods. Valid rule strings can be referenced from iCalendar specifications.
Refer to iCalendar specifications for valid recurrence rule string formats.
| Property | Purpose | Example |
|---|---|---|
| FREQ | Maintains the repeat type (Daily, Weekly, Monthly, Yearly) value of the appointment. | FREQ=DAILY;INTERVAL=1 |
| INTERVAL | Maintains the interval value of the appointments. When you create the daily appointment at an interval of 2, the appointments are rendered on the days Monday, Wednesday and Friday (Creates an appointment on all days by leaving the interval of one day gap). | FREQ=DAILY;INTERVAL=2 |
| COUNT | It holds the appointment’s count value. When the COUNT value is 10, then 10 instances of appointments are created in the recurrence series. | FREQ=DAILY;INTERVAL=1;COUNT=10 |
| UNTIL | This property holds the end date value (in ISO format) denoting when the recurrence actually ends. | FREQ=DAILY;INTERVAL=1;UNTIL=20180530T041343Z; |
| BYDAY | It holds the day value(s), representing on which the appointments actually renders. Create the weekly appointment, and select the day(s) from the day options (Monday/Tuesday/Wednesday/Thursday/Friday/Saturday/Sunday). When Monday is selected, the first two letters of the selected day “MO” is saved in the BYDAY property. When multiple days are selected, the values are separated by commas. | FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE;COUNT=10 |
| BYMONTHDAY | This property is used to store the date value of the Month, while creating the Month recurrence appointment. When you create a Monthly recurrence appointment for every 3rd day of the month, then BYMONTHDAY holds the value 3 and creates the appointment on 3rd day of every month. | FREQ=MONTHLY;BYMONTHDAY=3;INTERVAL=1;COUNT=10 |
| BYMONTH | This property is used to store the index value of the selected Month while creating the yearly appointments. When you create the yearly appointment on June month, the index value of June month 6 will get stored in the BYMONTH field. The appointment is created on every 6th month of a year. | FREQ=YEARLY;BYMONTHDAY=16;BYMONTH=6;INTERVAL=1;COUNT=10 |
| BYSETPOS | This property is used to store the index value of the week. When you create the monthly appointment in second week of a month, the index value of the second week (2) is stored in BYSETPOS. | FREQ=MONTHLY;BYDAY=MO;BYSETPOS=2;COUNT=10 |
The default recurrence validation for appointments follows Outlook-style validation. This validation occurs during the creation, editing, dragging, dropping, or resizing of recurrence appointments, and when any single occurrence is modified.
Daily Frequency
| Description | Example |
|---|---|
| Daily recurring event that never ends | FREQ=DAILY;INTERVAL=1 |
| Daily recurring event that ends after 5 occurrences | FREQ=DAILY;INTERVAL=1;COUNT=5 |
| Daily recurring event that ends exactly on 12/12/2018 | FREQ=DAILY;INTERVAL=1;UNTIL=20181212T041343Z |
| Daily event that recurs on alternative days and repeats for 10 occurrences | FREQ=DAILY;INTERVAL=2;COUNT=10 |
Weekly Frequency
| Description | Example |
|---|---|
| Weekly recurring event that repeats on every Monday, Wednesday and Friday and never ends | FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE,FR |
| Repeats every week Thursday and ends after 10 occurrences | FREQ=WEEKLY;INTERVAL=1;BYDAY=TH; COUNT=10 |
| Repeats every week Monday and ends on 12/12/2018 | FREQ=WEEKLY;INTERVAL=1;BYDAY=MO; UNTIL=20181212T041343Z |
| Repeats on Monday, Wednesday and Friday of alternative weeks and ends after 10 occurrences | FREQ=WEEKLY;INTERVAL=2;BYDAY=MO,WE,FR;COUNT=10 |
Monthly Frequency
| Description | Example |
|---|---|
| Monthly recurring event that repeats on every 15th day of a month and never ends | FREQ=MONTHLY; BYMONTHDAY=15;INTERVAL=1 |
| Monthly recurring event that repeats on every 16th day of a month and ends after 10 occurrences | FREQ=MONTHLY;BYMONTHDAY=16;INTERVAL=1;COUNT=10 |
| Repeats every 17th day of a month and ends on 12/12/2018 | FREQ=MONTHLY;BYMONTHDAY=17; INTERVAL=1;UNTIL=20181212T041343Z |
| Repeats every 2nd Friday of a month and never ends | FREQ=MONTHLY;BYDAY=FR;BYSETPOS=2; INTERVAL=1 |
| Repeats every 4th Wednesday of a month and ends after 10 occurrences | FREQ=MONTHLY;BYDAY=WE; BYSETPOS=4;INTERVAL=1;COUNT=10 |
| Repeats every 4th Friday of a month and ends on 12/12/2018 | FREQ=MONTHLY;BYDAY=FR;BYSETPOS=4; INTERVAL=1;UNTIL=20181212T041343Z; |
Yearly Frequency
| Description | Example |
|---|---|
| Yearly event that repeats on every 15th day of December month and never ends | FREQ=YEARLY; BYMONTHDAY=15;BYMONTH=12;INTERVAL=1 |
| Event that repeats on every 10th day of December month and ends after 10 occurrences | FREQ=YEARLY; BYMONTHDAY=10;BYMONTH=12;INTERVAL=1;COUNT=10 |
| Repeats on every 12th day of December month and ends on 12/12/2025 | FREQ=YEARLY;BYMONTHDAY=12; BYMONTH=12;INTERVAL=1;UNTIL=20251212T041343Z |
| Repeats on every 3rd Friday of December month and never ends | FREQ=YEARLY;BYDAY=FR;BYMONTH=12; BYSETPOS=3;INTERVAL=1 |
| Repeats on every 3rd Tuesday of December month and ends after 10 occurrences | FREQ=YEARLY; BYDAY=TU;BYMONTH=12;BYSETPOS=3;INTERVAL=1;COUNT=10 |
| Repeats on every 4th Wednesday of December month and ends on 12/12/2028 | FREQ=YEARLY;BYDAY=WE; BYMONTH=12;BYSETPOS=4;INTERVAL=1;UNTIL=20281212T041343Z |
Recurrence Validation
Built-in validation support is enabled by default for recurring appointments during creation, editing, drag and drop, and resize actions. The following validation alerts may display in the Scheduler when creating or editing recurring events:
| Validation messages | Description |
|---|---|
| The recurrence pattern is not valid. | This alert will raise, when the selected recurrence rule value is not a valid one. For example, when you try to select the end date value (using Until option) for a recurring event, which occurs before the start date, an alert will popup out saying that the chosen pattern is invalid. |
| The changes made to specific instances of this series will be cancelled and those events will match the series again. | This alert will raise, when you try to edit the whole series, whose occurrence might have been already edited. For example, If there are five occurrences and one of the occurrence is already edited. Now, when you try to edit the entire series, you will get this validation alert. |
| The duration of the event must be shorter than how frequently it occurs. Shorten the duration, or change the recurrence pattern in the recurrence event editor. | This validation will occur, if the event duration is longer than the selected frequency. For example, if you create a recurring appointment with two days duration in Daily frequency with no intervals set to it, you may get this alert. |
| Some months have fewer than the selected date. For these months, the occurrence will fall on the last date of the month. | When you try to create a recurring appointment on 31st of every month, where few months won’t have 31 days and in this scenario, you will get this alert. |
| Two occurrences of the same event cannot occur on the same day. | This validation will occur, when you try to edit or move any single occurrence to some other date, where another occurrence of the same event is already present. |
Event fields
The Scheduler dataSource contains event instances, where each instance includes a collection of appropriate fields. When binding remote data, these fields must be mapped to their equivalent database fields. For local JSON data, the field names defined within instances must be correctly mapped with the Scheduler event fields.
To create an event in the Scheduler, defining
startTimeandendTimeis sufficient. Theidfield becomes mandatory for processing CRUD actions on appropriate events.
Built-in fields
The built-in fields available on Scheduler event objects are as follows:
| Field name | Description |
|---|---|
| id | The id field needs to be defined as mandatory and this field usually assigns a unique ID value to each of the events. |
| subject | The subject field is optional, and usually assigns the summary text to each of the events. |
| startTime | The startTime field defines the start time of an event and it is mandatory to provide it for any of the valid event objects. |
| endTime | The endTime field defines the end time of an event and it is mandatory to provide the end time for any of the valid event objects. |
| startTimezone | It maps the startTimezone field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the startTime field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler. |
| endTimezone | It maps the endTimezone field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the endTime field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler. |
| location | It maps the location field from the dataSource and the location text value will be displayed over the events. |
| description | It maps the description field from the dataSource and denotes the event description which is optional. |
| isAllDay | The isAllDay field is mapped from the dataSource and is used to denote whether an event is created for an entire day or for specific time alone. Usually, an event with isAllDay field set to true will be considered as an all-day event. |
| recurrenceID | It maps the recurrenceID field from dataSource and usually holds the ID value of the parent recurrence event. This field is applicable only for the edited occurrence events. |
| recurrenceRule | It maps the recurrenceRule field from dataSource and holds the recurrence rule value in a string format. Also, it uniquely identifies whether the event belongs to a recurring type or normal ones. |
| recurrenceException | It maps the recurrenceException field from dataSource and is used to hold the collection of exception dates, on which the recurring occurrences needs to be excluded. The recurrenceException should be specified in UTC format. |
| isReadonly | It maps the isReadonly field from dataSource. It is mainly used to make specific appointments as readonly when set to true. |
| isBlock | It maps the isBlock field from dataSource. It is used to block the particular time ranges in the Scheduler and prevents the event creation on those time slots. |
Binding different field names
When event instances have default mapping names, manual mapping is unnecessary. However, if the Scheduler’s dataSource contains events with different field names, mapping them to their equivalent field names within the eventSettings property becomes necessary.
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let data: object[] = [{
TravelId: 2,
TravelSummary: 'Paris',
DepartureTime: new Date(2018, 1, 15, 10, 0),
ArrivalTime: new Date(2018, 1, 15, 12, 30),
FullDay: false,
Source: 'London',
Comments: 'Summer vacation planned for outstation.',
Origin: 'Asia/Yekaterinburg',
Destination: 'Asia/Yekaterinburg'
}, {
TravelId: 1,
TravelSummary: "Tokyo",
DepartureTime: new Date(2018, 1, 16, 10, 0, 0),
ArrivalTime: new Date(2018, 1, 16, 12, 30, 0),
FullDay: false,
Source: "Beijing",
Comments: "Conference on emerging technologies.",
Origin: "Asia/Yekaterinburg",
Destination: "Asia/Yekaterinburg",
IsDisabled: true
}];
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: {
dataSource: data,
fields: {
id: 'TravelId',
subject: { name: 'TravelSummary' },
isAllDay: { name: 'FullDay' },
location: { name: 'Source' },
description: { name: 'Comments' },
startTime: { name: 'DepartureTime' },
endTime: { name: 'ArrivalTime' },
startTimezone: { name: 'Origin' },
endTimezone: { name: 'Destination' },
isBlock: 'IsDisabled'
}
}
});
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>The mapper field
idis of string type with no additional validation options, whereas all other fields are ofObjecttype with additional options available.
Event field settings
Each Scheduler event field includes additional settings, such as options to set default values, map to appropriate dataSource fields, validate each event field, and provide label values for the event window.
| Options | Description |
|---|---|
| default | Accepts the default value to the applicable fields (Subject, Location and Description), when no values are provided to them from dataSource. |
| name | Accepts the field name to be mapped from the dataSource fields. |
| title | Accepts the label values to be displayed for the fields of event editor. |
| validation | Defines the validation rules to be applied on the event fields within the event editor. |
In the following example, the Subject field in the event editor displays the label Summary. If no subject value is provided when saving an event, the appointment is saved with the default subject value Add Summary.
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let data: object[] = [{
TravelId: 2,
TravelSummary: 'Paris',
DepartureTime: new Date(2018, 1, 15, 10, 0),
ArrivalTime: new Date(2018, 1, 15, 12, 30),
Source: 'London',
Comments: 'Summer vacation planned for outstation.'
}];
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: {
dataSource: data,
fields: {
id: 'TravelId',
subject: { name: 'TravelSummary', title: 'Summary', default: 'Add Summary' },
location: { name: 'Source', default: 'USA' },
description: { name: 'Comments' },
startTime: { name: 'DepartureTime' },
endTime: { name: 'ArrivalTime' }
}
}
});
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>Adding Custom fields
In addition to default Scheduler fields, any number of custom fields can be included for appointments. The following code example demonstrates how to incorporate two custom fields, Status and Priority, within the event collection. Binding custom fields within eventSettings is optional; however, these additional fields can be easily accessed for internal processing and from the application end.
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let data: object[] = [{
Id: 2,
Subject: 'Meeting',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false,
Status: 'Completed',
Priority: 'High'
}];
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: {
dataSource: data,
fields: {
id: 'Id',
subject: { name: 'Subject' },
isAllDay: { name: 'IsAllDay' },
startTime: { name: 'StartTime' },
endTime: { name: 'EndTime' }
}
}
});
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>Customize the order of the overlapping events
By default, the Scheduler renders overlapping events based on their start and end times. The order of overlapping events can be customized using the sortComparer property within the eventSettings property. The following code example demonstrates how to sort appointments based on a custom field:
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let data: object[] = [{
Id: 1,
Subject: 'Rank 1',
StartTime: new Date(2017, 9, 29, 10, 0),
EndTime: new Date(2017, 9, 29, 11, 30),
IsAllDay: false,
RankId: '1'
}, {
Id: 2,
Subject: 'Rank 3',
StartTime: new Date(2017, 9, 29, 10, 30),
EndTime: new Date(2017, 9, 29, 12, 30),
IsAllDay: false,
RankId: '3'
}, {
Id: 3,
Subject: 'Rank 6',
StartTime: new Date(2017, 9, 29, 7, 0),
EndTime: new Date(2017, 9, 29, 14, 30),
IsAllDay: false,
RankId: '6'
}, {
Id: 4,
Subject: 'Rank 9',
StartTime: new Date(2017, 9, 29, 11, 0),
EndTime: new Date(2017, 9, 29, 15, 30),
IsAllDay: false,
RankId: '9'
}];
let comparerFun: SortComparerFunction = (args: Record<string, any>) =>
args.sort((event1: Record<string, any>, event2: Record<string, any>) =>
event1.RankId.localeCompare(event2.RankId, undefined, { numeric: true })
);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2017, 9, 29),
eventSettings: {
dataSource: data,
sortComparer: comparerFun
}
});
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>Preventing Overlapping Events
By default, the Scheduler displays overlapping events according to their start and end times. To prevent overlapping, set the allowOverlap property to false.
When this property is set to false, any new or updated events overlapping with existing ones will trigger an overlap alert. Overlapping events are collected in the overlapEvents property within the PopupOpenEventArgs.
When allowOverlap is set to false, the Scheduler behaves as follows:
Initial Load Behavior: Upon initial loading, the Scheduler prioritizes non-overlapping events based on duration and all-day status. Events with longer durations and all-day designations receive higher priority to ensure no overlaps.
Recurring Appointments: If conflicts exist within a recurring appointment series during initial load, the Scheduler displays all occurrences except the conflicting instance.
Event Modifications: When users edit, save, or remove appointments, the Scheduler checks for potential overlaps. If a conflict is detected, the action is blocked, and a conflict alert is displayed to the user.
Dynamic Recurrence Series Creation or Editing: When users create or edit a recurrence series dynamically, the Scheduler prevents any occurrences from being added if a conflict is found within the series.
The following code example demonstrates how to enable the allowOverlap property:
import { Schedule, Day, Week, TimelineViews, Month, Agenda, Resize, DragAndDrop } from '@syncfusion/ej2-schedule';
let eventsData: Record<string, any>[] = [
{
Id: 1,
Subject: "Annual Conference",
StartTime: new Date(2025, 2, 2, 10, 0, 0),
EndTime: new Date(2025, 2, 2, 11, 0, 0)
},
{
Id: 2,
Subject: "Tech Symposium",
StartTime: new Date(2025, 2, 2, 10, 30, 0),
EndTime: new Date(2025, 2, 2, 11, 30, 0)
},
{
Id: 3,
Subject: "Client Meeting",
StartTime: new Date(2025, 2, 3, 12, 0, 0),
EndTime: new Date(2025, 2, 3, 14, 0, 0),
RecurrenceRule: "FREQ=DAILY;INTERVAL=1;COUNT=5"
},
{
Id: 4,
Subject: "Project Review",
StartTime: new Date(2025, 2, 4, 11, 0, 0),
EndTime: new Date(2025, 2, 4, 14, 0, 0)
},
{
Id: 5,
Subject: "Strategy Session",
StartTime: new Date(2025, 2, 6, 9, 30, 0),
EndTime: new Date(2025, 2, 6, 10, 0, 0)
},
{
Id: 6,
Subject: "Board Meeting",
StartTime: new Date(2025, 2, 6, 9, 30, 0),
EndTime: new Date(2025, 2, 6, 11, 0, 0)
}
];
Schedule.Inject(Day, Week, TimelineViews, Month, Agenda, Resize, DragAndDrop);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2025, 2, 6),
views: ['Day', 'Week', 'TimelineWeek', 'Month', 'Agenda'],
allowOverlap: false,
eventSettings: {
dataSource: eventsData
}
});
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>Limitations
The allowOverlap property checks for event overlaps only within the currently visible date range. Events scheduled outside the rendered date range are not included in the overlap check by default.
To check for overlaps with events outside the visible date range, leverage the promise field within the actionBegin event to validate all events before proceeding. By implementing a custom validation method inside the actionBegin event, the result (a boolean) can be assigned to the promise field. If the result is true, the action (e.g., adding or saving the event) proceeds; if false, the action is blocked.
Additionally, the public method openOverlapAlert can be used to display an alert popup whenever an overlap occurs and the result is false.
The following code example demonstrates how to check for overlaps when adding an event. If an overlap is found, the event is not added, and an alert is displayed:
import { Schedule, Day, Week, TimelineViews, Month, Agenda, Resize, DragAndDrop, ActionEventArgs, PopupOpenEventArgs } from '@syncfusion/ej2-schedule';
let eventsData: Record<string, any>[] = [
{ Id: 1, Subject: 'Board Meeting', StartTime: new Date(2025, 1, 26, 9, 30), EndTime: new Date(2025, 1, 26, 11, 0) },
{ Id: 2, Subject: 'Annual Conference', StartTime: new Date(2025, 2, 2, 10, 0), EndTime: new Date(2025, 2, 2, 11, 0) },
{ Id: 3, Subject: 'Tech Symposium', StartTime: new Date(2025, 2, 2, 10, 30), EndTime: new Date(2025, 2, 2, 11, 30) },
{ Id: 4, Subject: 'Project Workshop', StartTime: new Date(2025, 2, 10, 9, 0), EndTime: new Date(2025, 2, 10, 11, 0) },
{ Id: 5, Subject: 'Client Presentation', StartTime: new Date(2025, 2, 5, 9, 0), EndTime: new Date(2025, 2, 5, 10, 30) },
{ Id: 6, Subject: 'Business Meetup', StartTime: new Date(2025, 2, 15, 11, 0), EndTime: new Date(2025, 2, 15, 13, 0) },
{ Id: 7, Subject: 'Project Review', StartTime: new Date(2025, 2, 13, 10, 0), EndTime: new Date(2025, 2, 13, 13, 0) }
];
Schedule.Inject(Day, Week, TimelineViews, Month, Agenda, Resize, DragAndDrop);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2025, 2, 6),
views: ['Day', 'Week', 'TimelineWeek', 'Month', 'Agenda'],
allowOverlap: false,
eventSettings: {
dataSource: eventsData
},
actionBegin: (args: ActionEventArgs) => {
if ((args.requestType === 'eventCreate') || (args.requestType === 'eventChange')) {
const result: Promise<boolean> = checkOverlap(args);
args.promise = result;
}
},
});
scheduleObj.appendTo('#Schedule');
function checkOverlap(args: ActionEventArgs): Promise<boolean> {
return new Promise((resolve) => {
let eventsToCheck: Record<string, any>[] = Array.isArray(args.data) ? args.data : [args.data];
const overlappingEvents = eventsData.filter(event =>
eventsToCheck.some(newEvent =>
new Date(event.StartTime) < newEvent.EndTime &&
new Date(event.EndTime) > newEvent.StartTime &&
event.Id !== newEvent.Id
)
);
let result = overlappingEvents.length === 0;
if (!result) {
const args: PopupOpenEventArgs = {
type: 'OverlapAlert',
data: eventsToCheck,
overlapEvents: overlappingEvents,
element: null,
cancel: false
};
scheduleObj.openOverlapAlert(args);
}
resolve(result);
});
}
const overlapEvent: Record<string, any> = {
Id: 8,
Subject: 'OverlapEvent',
StartTime: new Date(2025, 2, 13, 10, 0),
EndTime: new Date(2025, 2, 13, 11, 0)
};
const nonOverlapEvent: Record<string, any> = {
Id: 9,
Subject: 'Non-OverlapEvent',
StartTime: new Date(2025, 2, 12, 10, 0),
EndTime: new Date(2025, 2, 12, 11, 0)
};
const overlapButton: HTMLElement | null = document.getElementById('AddOverlapEvent');
if (overlapButton) {
overlapButton.addEventListener('click', () => {
scheduleObj.addEvent(overlapEvent);
});
}
const nonOverlapButton: HTMLElement | null = document.getElementById('AddNonOverlapEvent');
if (nonOverlapButton) {
nonOverlapButton.addEventListener('click', () => {
scheduleObj.addEvent(nonOverlapEvent);
});
}<!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>
<button id="AddOverlapEvent">Add OverlapEvent</button>
<button id="AddNonOverlapEvent">Add Non-OverlapEvent</button>
</div>
</body>
</html>Drag and drop appointments
Appointments can be rescheduled to any time by dragging and dropping them to the desired location. To use drag-and-drop functionality, inject the DragAndDrop module and ensure allowDragAndDrop is set to true (the default value). In mobile mode, tap and hold an event, then drop it at the desired location.
By default, drag-and-drop is available in all Scheduler views except
Agenda,Month-Agenda, andYearviews.
import { extend } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, TimelineViews, TimelineMonth, Month, Agenda, DragAndDrop } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, TimelineViews, TimelineMonth, Month, Agenda, DragAndDrop);
let data: Object[] = <Object[]>extend([], scheduleData, null, true);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['TimelineDay', 'Day', 'Week', 'TimelineMonth', 'Month', 'Agenda'],
eventSettings: { dataSource: data }
});
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'
}
];Drag and drop multiple appointments
Multiple appointments can be dragged and dropped by enabling the allowMultiDrag property. Select multiple appointments by holding the CTRL key, then release it and begin dragging the events.
Multiple events can also be dragged from one resource to another. If all selected events belong to different resources, they will all be moved to the single resource associated with the target event.
Note: Dragging and dropping multiple events is not supported on mobile devices.
import { extend } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, DragAndDrop } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, DragAndDrop);
let data: Object[] = <Object[]>extend([], scheduleData, null, true);
let scheduleObj: Schedule = new Schedule({
height: '550px',
allowMultiDrag: true,
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: data },
});
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'
}
];Disable the drag action
By default, events can be dragged and dropped within any applicable Scheduler view. To disable this functionality, set the allowDragAndDrop property to false.
import { extend } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, DragAndDrop } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, DragAndDrop);
let data: Object[] = <Object[]>extend([], scheduleData, null, true);
let scheduleObj: Schedule = new Schedule({
height: '550px',
allowDragAndDrop: false,
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: data },
});
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'
}
];Preventing drag and drop on specific targets
Drag actions on specific targets can be prevented by specifying the target to exclude in the excludeSelectors option within the dragStart event. In the following example, drag actions are prevented on the all-day row:
import { extend } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, DragEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, DragAndDrop);
let data: Object[] = <Object[]>extend([], scheduleData, null, true);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: data },
dragStart: (args: DragEventArgs) => {
args.excludeSelectors = 'e-header-cells,e-header-day,e-header-date,e-all-day-cells';
}
});
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'
}
];Disable scrolling on drag action
By default, when dragging an appointment to the edges (top or bottom in vertical Scheduler, or left or right in timeline Scheduler), automatic scrolling occurs. To prevent this scrolling action, set the scroll value to false within the dragStart event arguments.
import { extend } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, DragEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, DragAndDrop);
let data: Object[] = <Object[]>extend([], scheduleData, null, true);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: data },
dragStart: (args: DragEventArgs) => {
args.scroll = { enable: false };
}
});
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'
}
];Controlling scroll speed while dragging an event
The scrolling speed while dragging an appointment to the Scheduler edges can be controlled within the dragStart event by setting desired values for scrollBy and timeDelay options. Default values are 30 minutes for scrollBy and 100 ms for timeDelay.
import { extend } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, DragEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, DragAndDrop);
let data: Object[] = <Object[]>extend([], scheduleData, null, true);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: data },
dragStart: (args: DragEventArgs) => {
args.scroll = { enable: true, scrollBy: 5, timeDelay: 200 };
}
});
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'
}
];Auto navigation of date ranges on dragging an event
When an event is dragged to either the left or right extreme edges of the Scheduler and held for a few seconds without dropping, auto-navigation of date ranges can be enabled. This allows the Scheduler to navigate back and forth between the current date range. By default, this action is set to false. To enable it, set navigation to true within the dragStart event.
By default, the navigation delay is set to 2000 ms, determining how long a user must drag and hold appointments at the extremities. A custom delay value can be set using the timeDelay option within the dragStart event.
import { extend } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, DragEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, DragAndDrop);
let data: Object[] = <Object[]>extend([], scheduleData, null, true);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: data },
dragStart: (args: DragEventArgs) => {
args.navigation = { enable: true, timeDelay: 4000 }
}
});
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'
}
];Setting drag time interval
By default, when dragging an appointment, it moves in 30-minute intervals. To change the dragging time interval, pass appropriate values to the interval option within the dragStart event.
import { extend } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, DragEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, DragAndDrop);
let data: Object[] = <Object[]>extend([], scheduleData, null, true);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: data },
dragStart: (args: DragEventArgs) => {
args.interval = 10; //drag interval time is changed to 10 minutes
}
});
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'
}
];Drag and drop items from external source
It is possible to drag and drop unplanned items from any external source into the scheduler by manually saving the dropped items as new appointment data using the addEvent method of the scheduler.
In the following example, the tree view control serves as the external source, with child nodes dragged and dropped onto the Scheduler. The [nodeDragStop] event of the TreeView component is utilized to create an event object and save it using the addEvent method.
import { Schedule, Month, Resize, DragAndDrop, CellClickEventArgs } from '@syncfusion/ej2-schedule';
import { ActionEventArgs } from '@syncfusion/ej2-schedule';
import { eventData, waitingList } from './datasource.ts';
import { DragAndDropEventArgs, TreeView } from '@syncfusion/ej2-navigations';
import { closest, remove, addClass } from '@syncfusion/ej2-base';
Schedule.Inject(Month, Resize, DragAndDrop);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
cssClass: 'schedule-drag-drop',
views: ['Month'],
eventSettings: { dataSource: eventData },
actionBegin: onActionBegin,
drag: onItemDrag
});
scheduleObj.appendTo('#Schedule');
let treeObj: TreeView = new TreeView({
fields: { dataSource: waitingList, id: 'Id', text: 'Name' },
allowDragAndDrop: true,
nodeDragStop: onTreeDragStop,
nodeDragging: onItemDrag,
cssClass: 'treeview-external-drag'
});
treeObj.appendTo('#Tree');
let isTreeItemDropped: boolean = false;
let draggedItemId: string = '';
function onItemDrag(event: any): void {
if (scheduleObj.isAdaptive) {
let classElement: HTMLElement = scheduleObj.element.querySelector('.e-device-hover');
if (classElement) {
classElement.classList.remove('e-device-hover');
}
if (event.target.classList.contains('e-work-cells')) {
addClass([event.target], 'e-device-hover');
}
}
if (document.body.style.cursor === 'not-allowed') {
document.body.style.cursor = '';
}
if (event.name === 'nodeDragging') {
let dragElementIcon: NodeListOf<HTMLElement> =
document.querySelectorAll('.e-drag-item.treeview-external-drag .e-icon-expandable');
for (let i: number = 0; i < dragElementIcon.length; i++) {
dragElementIcon[i].style.display = 'none';
}
}
}
function onActionBegin(event: ActionEventArgs): void {
if (event.requestType === 'eventCreate' && isTreeItemDropped) {
let treeViewdata: { [key: string]: Object }[] = treeObj.fields.dataSource as { [key: string]: Object }[];
const filteredPeople: { [key: string]: Object }[] =
treeViewdata.filter((item: any) => item.Id !== parseInt(draggedItemId, 10));
treeObj.fields.dataSource = filteredPeople;
let elements: NodeListOf<HTMLElement> = document.querySelectorAll('.e-drag-item.treeview-external-drag');
for (let i: number = 0; i < elements.length; i++) {
remove(elements[i]);
}
}
}
function onTreeDragStop(event: DragAndDropEventArgs): void {
let treeElement: Element = <Element>closest(event.target, '.e-treeview');
let classElement: HTMLElement = scheduleObj.element.querySelector('.e-device-hover');
if (classElement) {
classElement.classList.remove('e-device-hover');
}
if (!treeElement) {
event.cancel = true;
let scheduleElement: Element = <Element>closest(event.target, '.e-content-wrap') ||
<Element>closest(event.target, '.e-all-day-row');
if (scheduleElement) {
let treeviewData: { [key: string]: Object }[] =
treeObj.fields.dataSource as { [key: string]: Object }[];
if (event.target.classList.contains('e-work-cells')) {
const filteredData: { [key: string]: Object }[] =
treeviewData.filter((item: any) => item.Id === parseInt(event.draggedNodeData.id as string, 10));
let cellData: CellClickEventArgs = scheduleObj.getCellDetails(event.target);
let eventData: { [key: string]: Object } = {
Subject: filteredData[0].Name,
StartTime: cellData.startTime,
EndTime: cellData.endTime,
IsAllDay: cellData.isAllDay,
Description: filteredData[0].Description
};
scheduleObj.addEvent(eventData);
isTreeItemDropped = true;
draggedItemId = event.draggedNodeData.id as string;
}
}
}
}<!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="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" />
<link href="index.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>
.content-wrapper {
display: -ms-flexbox;
display: flex;
}
.e-device-hover {
background-color: #e0e0e0 !important;
}
.schedule-container {
padding-right: 10px
}
.title-container {
padding-bottom: 10px;
}
.treeview-external-drag .e-list-text,
.e-bigger .treeview-external-drag .e-list-text {
background: white;
border: 0.5px solid #E1E7EC;
height: 30px;
line-height: 15px;
padding: 5px;
width: 220px;
}
.treeview-external-drag .e-list-parent,
.e-bigger .treeview-external-drag .e-list-parent {
height: 100%;
padding: 0 2px;
}
.treeview-external-drag .e-list-item,
.e-bigger .treeview-external-drag .e-list-item {
height: 100%;
padding: 0 0 5px 0;
}
.treeview-external-drag .e-fullrow,
.e-bigger .treeview-external-drag .e-fullrow {
height: 55px;
}
.treeview-external-drag .e-list-item.e-hover>.e-fullrow,
.treeview-external-drag .e-list-item.e-active>.e-fullrow,
.treeview-external-drag .e-list-item.e-active.e-hover>.e-fullrow,
.e-bigger .treeview-external-drag .e-list-item.e-hover>.e-fullrow,
.e-bigger .treeview-external-drag .e-list-item.e-active>.e-fullrow,
.e-bigger .treeview-external-drag .e-list-item.e-active.e-hover>.e-fullrow {
background-color: transparent;
border-color: transparent;
box-shadow: none !important;
}
.treeview-external-drag .e-text-content,
.e-bigger .treeview-external-drag .e-text-content {
padding: 0;
}
.e-drag-item.e-treeview.treeview-external-drag,
.e-bigger .e-drag-item.e-treeview.treeview-external-drag {
padding: 0 !important;
}
.title-text {
font-size: 18px;
margin: 0px;
font-weight: bold;
text-align: center;
}
@media (max-width: 550px) {
.content-wrapper {
display: block;
}
.schedule-container {
padding-bottom: 10px
}
.treeview-external-drag.e-treeview,
.e-bigger .treeview-external-drag.e-treeview {
width: 225px;
}
.e-bigger .treeview-external-drag.e-treeview.e-drag-item {
position: relative !important;
}
}
</style>
<body>
<div id='loader'>LOADING....</div>
<div id='container' class="container col-lg-12 custom-tree">
<div class="content-wrapper">
<div class="schedule-container">
<div class="title-container">
<h3 class="title-text">Scheduler</h3>
</div>
<div id="Schedule">
</div>
</div>
<div class="treeview-container">
<div class="title-container">
<h3 class="title-text">Waiting List</h3>
</div>
<div id="Tree"></div>
</div>
</div>
</div>
</body>
</html>export let eventData: 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'
}
];
export let waitingList: object[]= [
{
Id: 15,
Name: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Name: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Name: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Name: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 12, 17, 0),
EndTime: new Date(2018, 1, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Name: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 6, 0),
EndTime: new Date(2018, 1, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Name: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 15, 16, 0),
EndTime: new Date(2018, 1, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];Opening the editor window on drag stop
In scenarios where opening the editor filled with data at a newly dropped location is desired, proceeding to save only when the Save button is clicked, and reverting changes when Cancel is clicked, use the dragStop event of the Scheduler.
import { extend } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, DragEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, DragAndDrop);
let data: Object[] = <Object[]>extend([], scheduleData, null, true);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: data },
dragStop: (args: DragEventArgs) => {
args.cancel = true; //cancels the drop action
scheduleObj.openEditor(args.data, "Save"); //open the event window with updated start and end time
}
});
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'
}
];Inline Appointment
The Scheduler provides inline Add/Edit support for managing appointment subjects directly. This feature enables users to quickly manage appointments without opening a separate dialog.
To add an appointment inline:
- Single-click on any Scheduler cell or press enter on selected cells.
- A text box appears within the clicked cell with a blinking cursor.
- Enter the appointment subject.
- Press enter to save the appointment.
To edit an appointment inline:
- Single-click on an existing appointment’s subject.
- The subject becomes editable.
- Make changes.
- Press enter to update the appointment.
Enable or disable this feature using the allowInline property, which is set to false by default.
Important notes:
- When
allowInlineis enabled,showQuickInfois turned off. - The quick popup does not appear when clicking on a work cell or appointment if
allowInlineis set totrue. - In work cells, multiple cells can be selected using the keyboard, then press enter to create an appointment wrapper.
- Be aware of potential overlapping scenarios when creating inline events.
Normal Event
For editing appointments, single-click the appointment subject. The editable option is enabled in the UI with cursor focus at the text end. Inline editing is available for all possible views.
import { Schedule, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, TimelineViews, Month, Agenda);
let data: object[] = [{
Subject: 'Paris',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30)
}, {
Subject: 'Scrum Meeting',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0)
}, {
Subject: 'Meeting',
StartTime: new Date(2018, 1, 13, 10, 0),
EndTime: new Date(2018, 1, 13, 10, 30)
}, {
Subject: 'Inline Editer Window',
StartTime: new Date(2018, 1, 13, 11, 0),
EndTime: new Date(2018, 1, 13, 12, 0)
}, {
Subject: 'Validated',
StartTime: new Date(2018, 1, 17, 11, 0),
EndTime: new Date(2018, 1, 17, 12, 30)
}];
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 11),
views: ['Day', 'Week', 'TimelineWeek', 'Month', 'Agenda'],
allowInline: true,
eventSettings: {
dataSource: data
}
});
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>Recurrence Event
When editing an occurrence from a recurrence series, only a single occurrence can be edited, not the entire series.
Appointment Resizing
Another way to reschedule appointments is by resizing them. To use resizing functionality, inject the Resize module and ensure the allowResizing property is set to true (the default value).
import { extend } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize);
let data: Object[] = <Object[]>extend([], scheduleData, null, true);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: data },
});
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'
}
];Disable the resize action
By default, resizing events is allowed on all Scheduler views except Agenda and Month-Agenda view. To disable event resizing, set allowResizing to false.
import { extend } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize);
let data: Object[] = <Object[]>extend([], scheduleData, null, true);
let scheduleObj: Schedule = new Schedule({
height: '550px',
allowResizing: false,
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: data },
});
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'
}
];Disable scrolling on resize action
By default, when resizing an appointment and its handler reaches the edge of the Scheduler, scrolling occurs along with event resizing. To prevent this scrolling action, set the scroll value to false within the resizeStart event.
import { extend } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize, ResizeEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize);
let data: Object[] = <Object[]>extend([], scheduleData, null, true);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: data },
resizeStart: (args: ResizeEventArgs) => {
args.scroll = { enable: false };
}
});
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'
}
];Controlling scroll speed while resizing an event
The scrolling speed when resizing an appointment to the Scheduler edges can be controlled by setting the desired value for the scrollBy option within the resizeStart event.
import { extend } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize, ResizeEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize);
let data: Object[] = <Object[]>extend([], scheduleData, null, true);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: data },
resizeStart: (args: ResizeEventArgs) => {
args.scroll = { enable: true, scrollBy: 15 };
}
});
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'
}
];Setting resize time interval
By default, when resizing an appointment, it extends or shrinks at 30-minute intervals. To change this default resize interval, set appropriate values to the interval option within the resizeStart event.
import { extend } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize, ResizeEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize);
let data: Object[] = <Object[]>extend([], scheduleData, null, true);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: data },
resizeStart: (args: ResizeEventArgs) => {
args.interval = 10; //resize interval time is changed to 10 minutes
}
});
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'
}
];Appointment customization
The Scheduler provides multiple approaches to customize the appearance of appointments. Use the most appropriate method based on requirements:
- Customize appointments using templates
- Customize appointments using using eventRendered event
- Customize appointments using CSS classes
Using template
Add text, images, and links to customize the appearance of events. Use the template option within the eventSettings property to format and change the default appearance of events. The following example customizes the appointment’s default color and time format:
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
import { webinarData } from './datasource.ts';
import { Internationalization } from '@syncfusion/ej2-base';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let instance: Internationalization = new Internationalization();
(window as TemplateFunction).getTimeString = (value: Date) => {
return instance.formatDate(value, { skeleton: 'hm' });
};
interface TemplateFunction extends Window {
getTimeString?: Function;
}
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '500px',
readonly: true,
selectedDate: new Date(2018, 1, 15),
eventSettings: {
dataSource: webinarData,
template: '#apptemplate'
}
});
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-vertical-view .e-content-wrap .e-appointment {
border-radius: 8px;
}
.e-schedule .e-vertical-view .e-content-wrap .e-appointment .e-appointment-details {
padding: 0;
height: 100%;
}
.e-schedule .template-wrap {
height: 100%;
white-space: normal;
}
.e-schedule .template-wrap .subject {
font-weight: 600;
font-size: 15px;
padding: 4px 4px 4px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.e-schedule .template-wrap .time {
height: 50px;
font-size: 12px;
padding: 4px 6px 4px;
overflow: hidden;
}
</style>
<script id="apptemplate" type="text/x-template">
<div class="template-wrap" style="background:${SecondaryColor}">
<div class="subject" style="background:${PrimaryColor}">${Subject}</div>
<div class="time" style="background:${PrimaryColor}">Time: ${getTimeString(data.StartTime)} - ${getTimeString(data.EndTime)}</div>
</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 webinarData: Object[] = [
{
Id: 1,
Subject: 'Environment Day',
Tags: 'Eco day, Forest conserving, Earth & its resources',
Description: 'A day that creates awareness to promote the healthy planet and reduce the air pollution crisis on nature earth.',
StartTime: new Date(2018, 1, 12, 9, 0),
EndTime: new Date(2018, 1, 12, 10, 0),
ImageName: 'environment-day',
PrimaryColor: '#1aaa55',
SecondaryColor: '#47bb76'
}, {
Id: 2,
Subject: 'Health Day',
Tags: 'Reduce mental stress, Follow good food habits',
Description: 'A day that raises awareness on different health issues. It marks the anniversary of the foundation of WHO.',
StartTime: new Date(2018, 1, 13, 9, 0),
EndTime: new Date(2018, 1, 13, 10, 0),
ImageName: 'health-day',
PrimaryColor: '#357cd2',
SecondaryColor: '#5d96db'
}, {
Id: 3,
Subject: 'Cancer Day',
Tags: 'Life threatening cancer effects, Palliative care',
Description: 'A day that raises awareness on cancer and its preventive measures. Early detection saves life.',
StartTime: new Date(2018, 1, 14, 9, 0),
EndTime: new Date(2018, 1, 14, 10, 0),
ImageName: 'cancer-day',
PrimaryColor: '#7fa900',
SecondaryColor: '#a4c932'
}, {
Id: 4,
Subject: 'Happiness Day',
Tags: 'Stress-free, Smile, Resolve frustration and bring happiness',
Description: 'A general idea is to promote happiness and smile around the world.',
StartTime: new Date(2018, 1, 15, 9, 0),
EndTime: new Date(2018, 1, 15, 10, 0),
ImageName: 'happiness-day',
PrimaryColor: '#ea7a57',
SecondaryColor: '#ee9478'
}, {
Id: 5,
Subject: 'Tourism Day',
Tags: 'Diverse cultural heritage, strengthen peace',
Description: 'A day that raises awareness on the role of tourism and its effect on social and economic values.',
StartTime: new Date(2018, 1, 16, 9, 0),
EndTime: new Date(2018, 1, 16, 10, 0),
ImageName: 'tourism-day',
PrimaryColor: '#00bdae',
SecondaryColor: '#32cabe'
}
];All built-in fields mapped to appropriate field properties within
eventSettings, as well as custom mapped fields from the Scheduler dataSource, can be accessed within the template code.
Customize appointments using eventRendered event
The eventRendered event triggers before an appointment is rendered on the Scheduler. Use this client-side event to customize the appearance of appointments based on specific criteria before rendering them.
import { Schedule, Day, Week, WorkWeek, Month, Agenda, View, EventRenderedArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let scheduleObj: Schedule = new Schedule({
height: '550px',
width: '100%',
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: scheduleData },
eventRendered: (args: EventRenderedArgs) => applyCategoryColor(args)
});
scheduleObj.appendTo('#Schedule');
function applyCategoryColor(args: EventRenderedArgs): void {
let categoryColor: string = args.data.CategoryColor as string;
if (!args.element || !categoryColor) {
return;
}
if (scheduleObj.currentView === 'Agenda') {
(args.element.firstChild as HTMLElement).style.borderLeftColor = categoryColor;
} else {
args.element.style.backgroundColor = categoryColor;
}
}<!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 appointments using CSS classes
You can also customize event appearance using the cssClass property of the Scheduler. The following example changes the background of appointments using cssClass:
import { Schedule, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
height: '550px',
width: '100%',
cssClass: 'custom-class',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'WorkWeek', 'Month'],
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>
.custom-class.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment,
.custom-class.e-schedule .e-vertical-view .e-day-wrapper .e-appointment,
.custom-class.e-schedule .e-month-view .e-appointment {
background: green;
}
</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'
}
];Setting minimum height
You can set a minimal height for appointments on the Scheduler using the eventRendered event when the start and end time duration is less than the default duration of a single slot.
import { Schedule, Day, Week, WorkWeek, Month, EventRenderedArgs } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month);
let data: object[] = [{
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 16, 10, 30),
EndTime: new Date(2018, 1, 16, 10, 40)
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 10, 20)
}];
let scheduleObj: Schedule = new Schedule({
height: '550px',
width: '100%',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: { dataSource: data },
eventRendered: (args: EventRenderedArgs) => {
let cellHeight: number = (scheduleObj.element.querySelector('.e-work-cells') as HTMLElement).offsetHeight;
let appHeight: number = (args.data.EndTime.getTime() - args.data.StartTime.getTime()) / (60 * 1000) * (cellHeight * scheduleObj.timeScale.slotCount) / scheduleObj.timeScale.interval;
args.element.style.height = appHeight + 'px';
}
});
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>Block Dates and Times
Block a set of dates or specific time ranges on the Scheduler by defining an appointment object within eventSettings with the required time range and setting the isBlock field to true. Appointments with the isBlock field set to true will prevent users from creating new appointments, dragging existing appointments, or resizing appointments within the specified time ranges defined by startTime and endTime fields.
import { Schedule, Day, Week, TimelineViews, Month, Agenda, Resize, DragAndDrop } from '@syncfusion/ej2-schedule';
import { blockData } from './datasource.ts';
Schedule.Inject(Day, Week, TimelineViews, Month, Agenda, Resize, DragAndDrop);
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'TimelineWeek', 'Month', 'Agenda'],
eventSettings: {
dataSource: blockData
}
});
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 blockData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0),
IsBlock: true
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0)
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0)
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
IsBlock: true
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0)
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 9, 30),
EndTime: new Date(2018, 1, 15, 11, 0),
IsBlock: true
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
IsBlock: true
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 19, 11, 0),
EndTime: new Date(2018, 1, 19, 13, 0),
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
IsBlock: true
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
IsBlock: true
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 7, 12, 30),
IsBlock: true
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
IsBlock: true
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 12, 17, 0),
EndTime: new Date(2018, 1, 12, 18, 30),
IsBlock: true
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 6, 0),
EndTime: new Date(2018, 1, 15, 7, 30),
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 16, 0),
EndTime: new Date(2018, 1, 15, 18, 0),
IsBlock: true
}
];Block appointments can also be defined to repeat on several days as shown in the following code example.
import { Schedule, Day, Week, TimelineViews, Month, Agenda, Resize, DragAndDrop } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, TimelineViews, Month, Agenda, Resize, DragAndDrop);
let data: object[] = [{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 15, 9, 30),
EndTime: new Date(2018, 1, 15, 11, 0),
RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=5',
IsBlock: true
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 14, 12, 0),
EndTime: new Date(2018, 1, 14, 14, 0)
}];
let scheduleObj: Schedule = new Schedule({
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'TimelineWeek', 'Month', 'Agenda'],
eventSettings: {
dataSource: data
}
});
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>Readonly
Enable or disable interaction with Scheduler appointments using the readonly property. When enabled, navigation between Scheduler dates and views is allowed, and appointment details can be viewed in the quick info window. However, CRUD actions cannot be performed on the Scheduler. By default, this property is set to false.
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let scheduleObj: Schedule = new Schedule({
height: '550px',
readonly: true,
selectedDate: new Date(2018, 1, 15),
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'
}
];Make specific events readonly
In some scenarios, CRUD actions on specific appointments may need to be restricted based on certain conditions. For example, past appointments can be made readonly. This can be achieved by setting the isReadonly field of readonly appointments to true.
import { Schedule, Day, Week, WorkWeek } from '@syncfusion/ej2-schedule';
import { readOnlyData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek);
let scheduleObj: Schedule = new Schedule({
height: '550px',
width: '100%',
views: ['Day', 'Week', 'WorkWeek'],
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: readOnlyData }
});
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 readOnlyData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0),
IsReadonly: true
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
IsReadonly: true
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
IsReadonly: true
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
IsReadonly: true
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
IsReadonly: true
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 9, 30),
EndTime: new Date(2018, 1, 15, 11, 0),
IsReadonly: false
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
IsReadonly: false
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
IsReadonly: false
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 11, 12, 0),
EndTime: new Date(2018, 1, 11, 14, 0),
IsReadonly: true
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
IsReadonly: false
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
IsReadonly: false
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
IsReadonly: true
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 7, 12, 30),
IsReadonly: true
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
IsReadonly: true
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
IsReadonly: false
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
IsReadonly: false
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
IsReadonly: true
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 12, 17, 0),
EndTime: new Date(2018, 1, 12, 18, 30),
IsReadonly: true
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 6, 0),
EndTime: new Date(2018, 1, 15, 7, 30),
IsReadonly: false
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 16, 0),
EndTime: new Date(2018, 1, 15, 18, 0),
IsReadonly: false
}
];By default, the event editor is prevented from opening on readonly events when the
isReadonlyfield is set totrue.
Restricting appointment creation on specific time slots
Restrict users from creating and updating more than one appointment on specific time slots using the Scheduler’s public method isSlotAvailable. CRUD actions also be disabled on occupied time slots using the Scheduler’s public method isSlotAvailable.
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { Schedule, Day, TimelineViews, WorkWeek, Month, ActionEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, TimelineViews, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
height: '550px',
width: '100%',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'TimelineWeek', 'WorkWeek', 'Month'],
currentView: 'TimelineWeek',
eventSettings: { dataSource: scheduleData },
actionBegin: (args: ActionEventArgs) => {
if ((args.requestType === 'eventCreate' || args.requestType === 'eventChange') && (<Object[]>args.data).length > 0 || !isNullOrUndefined(args.data)) {
let eventData: any = args.data as any;
let eventField: EventFieldsMapping = scheduleObj.eventFields;
let startDate: Date = (((<Object[]>args.data).length > 0) ? eventData[0][eventField.startTime] : eventData[eventField.startTime]) as Date;
let endDate: Date = (((<Object[]>args.data).length > 0) ? eventData[0][eventField.endTime] : eventData[eventField.endTime]) as Date;
args.cancel = !scheduleObj.isSlotAvailable(startDate, endDate);
}
}
});
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'
}
];The isSlotAvailable method focuses on verifies appointments within the current view’s date range. It does not evaluate availability for recurrence occurrences outside this particular date range.
Differentiate the past time appointments
Differentiate the appearance of appointments based on specific criteria, such as displaying past hour appointments with different colors on the Scheduler, using the eventRendered event. This event triggers before an appointment renders on the Scheduler.
import { Schedule, Day, Week, WorkWeek, Month, ActionEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month);
let isReadOnly: Function = (data: { [key: string]: Object }): boolean => {
return (data.EndTime < scheduleObj.selectedDate);
};
let scheduleObj: Schedule = new Schedule({
height: '550px',
width: '100%',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: scheduleData },
eventRendered: (args: EventRenderedArgs) => {
if (isReadOnly(args.data)) {
args.element.classList.add('e-past-app');
}
}
});
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-past-app {
background-color: chocolate !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'
}
];Appointments occupying entire cell
The Scheduler allows appointments to occupy the full height of the cell without its header part by setting true for the enableMaxHeight property.
When multiple appointments are available in the same cell, an indicator can be displayed by setting true to the enableIndicator property. Its default value is false.
import { Schedule, TimelineViews, TimelineMonth } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(TimelineViews, TimelineMonth);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '500px',
currentView: 'TimelineMonth',
views: ['TimelineWeek', 'TimelineMonth'],
selectedDate: new Date(2018, 1, 15),
eventSettings: {
dataSource: scheduleData,
enableMaxHeight: true,
enableIndicator: false
}
});
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'
}
];Display tooltip for appointments
Tooltips provide additional information about appointments in a formatted style. Here’s how to work with tooltips:
Show or hide built-in tooltip
Display tooltips for appointments by setting true to the enableTooltip option within the eventSettings property.
import { Schedule, TimelineViews, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(TimelineViews, Week, WorkWeek, Month, Agenda);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '500px',
views: ['TimelineDay', 'Week', 'WorkWeek', 'Month', 'Agenda'],
selectedDate: new Date(2018, 1, 15),
eventSettings: {
dataSource: scheduleData,
enableTooltip: 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'
}
];Customize tooltip content using templates
Customize the content and appearance of tooltips using templates. To implement this:
- Enable the default tooltip.
- Use the
tooltipTemplateoption within theeventSettingsproperty to define a custom template.
The following example demonstrates tooltip customization:
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
import { eventsData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let template: string = '<div class="tooltip-wrap">' +
'<div class="content-area"><div class="name">${Subject}</></div>' +
'${if(City !== null && City !== undefined)}<div class="city">${City}</div>${/if}' +
'<div class="time">From : ${StartTime.toLocaleString()} </div>' +
'<div class="time">To : ${EndTime.toLocaleString()} </div></div></div>';
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
eventSettings: {
dataSource: eventsData,
enableTooltip: true,
tooltipTemplate: template
}
});
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-event-tooltip .tooltip-wrap .name {
font-weight: 500;
font-size: 14px;
}
.e-schedule-event-tooltip .tooltip-wrap {
display: flex;
}
</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 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'
}];Note: All field names mapped from the Scheduler dataSource can be accessed within the template, including
subject,description,location,startTime, andendTime.
Prevent tooltips for specific appointments
Selectively control when tooltips appear based on appointment data or other custom conditions using the tooltipOpen event.
To prevent a tooltip from appearing for certain events, set the cancel property to true within the tooltipOpen event. This ensures that tooltips are only displayed for the relevant appointments, improving user experience by minimizing unnecessary distractions.
import {
Schedule, ScheduleModel, Day, Week, WorkWeek, Month, Year, Agenda,TooltipOpenEventArgs, MonthAgenda, View, Resize, DragAndDrop, TimelineViews, TimelineMonth, TimelineYear
} from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda, TimelineViews, TimelineMonth, TimelineYear, Resize, DragAndDrop);
import { defaultData } from './datasource';
const scheduleOptions: ScheduleModel = {
width: '100%',
height: '550px',
selectedDate: new Date(2025, 1, 15),
currentView: 'Week',
tooltipOpen: function (args: TooltipOpenEventArgs) {
let record = args.data;
if (record.Subject === 'Vacation') {
args.cancel = true;
}
},
views: ['Day', 'Week', 'WorkWeek', 'Month', 'Year', 'Agenda', 'MonthAgenda', 'TimelineDay', 'TimelineWeek', 'TimelineWorkWeek', 'TimelineMonth', 'TimelineYear'],
eventSettings: {
dataSource: defaultData,
enableTooltip: true,
fields: {
subject: { title: 'Name', name: 'Subject' },
location: { title: 'Country Name', name: 'Location' },
description: { title: 'Summary', name: 'Description' },
startTime: { title: 'From', name: 'StartTime' },
endTime: { title: 'To', name: 'EndTime' },
startTimezone: { title: 'Origin', name: 'StartTimezone' },
endTimezone: { title: 'Destination', name: 'EndTimezone' }
}
}
};
const scheduleObj: Schedule = new Schedule(scheduleOptions, document.getElementById('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, user-scalable=no" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-schedule/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>/**
* Schedule datasource spec
*/
export let defaultData: Object[] = [
{
Id: 1,
Subject: 'Conference',
StartTime: new Date(2025, 1, 7, 10, 0),
EndTime: new Date(2025, 1, 7, 11, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting - 1',
StartTime: new Date(2025, 1, 15, 10, 0),
EndTime: new Date(2025, 1, 16, 12, 30),
IsAllDay: false
},{
Id: 3,
Subject: 'Paris',
StartTime: new Date(2025, 1, 13, 12, 0),
EndTime: new Date(2025, 1, 13, 12, 30),
IsAllDay: false
},{
Id: 4,
Subject: 'Vacation',
StartTime: new Date(2025, 1, 12, 10, 0),
EndTime: new Date(2025, 1, 12, 10, 30),
IsAllDay: false
}
];
export let scheduleData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2025, 1, 11, 9, 30),
EndTime: new Date(2025, 1, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2025, 1, 12, 12, 0),
EndTime: new Date(2025, 1, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2025, 1, 13, 9, 30),
EndTime: new Date(2025, 1, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2025',
StartTime: new Date(2025, 1, 14, 13, 0),
EndTime: new Date(2025, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2025, 1, 15, 12, 0),
EndTime: new Date(2025, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2025, 1, 15, 9, 30),
EndTime: new Date(2025, 1, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2025, 1, 16, 11, 0),
EndTime: new Date(2025, 1, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2025, 1, 17, 9, 0),
EndTime: new Date(2025, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2025, 1, 19, 11, 0),
EndTime: new Date(2025, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2025, 1, 21, 11, 0),
EndTime: new Date(2025, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2025',
StartTime: new Date(2025, 1, 22, 9, 30),
EndTime: new Date(2025, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2025, 1, 9, 10, 0),
EndTime: new Date(2025, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2025, 1, 7, 10, 30),
EndTime: new Date(2025, 1, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2025, 1, 5, 10, 0),
EndTime: new Date(2025, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2025, 1, 20, 9, 30),
EndTime: new Date(2025, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2025, 1, 23, 11, 0),
EndTime: new Date(2025, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2025, 1, 12, 5, 30),
EndTime: new Date(2025, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2025, 1, 12, 17, 0),
EndTime: new Date(2025, 1, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2025, 1, 15, 6, 0),
EndTime: new Date(2025, 1, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2025, 1, 15, 16, 0),
EndTime: new Date(2025, 1, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];
export let resourceData: Object[] = [
{
Id: 1,
Subject: 'Workflow Analysis',
StartTime: new Date(2025, 3, 1, 9, 30),
EndTime: new Date(2025, 3, 1, 12, 0),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 2,
Subject: 'Requirement planning',
StartTime: new Date(2025, 3, 1, 12, 30),
EndTime: new Date(2025, 3, 1, 14, 45),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 3,
Subject: 'Quality Analysis',
StartTime: new Date(2025, 3, 2, 10, 0),
EndTime: new Date(2025, 3, 2, 12, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 4,
Subject: 'Resource planning',
StartTime: new Date(2025, 3, 2, 13, 0),
EndTime: new Date(2025, 3, 2, 15, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 5,
Subject: 'Timeline estimation',
StartTime: new Date(2025, 3, 3, 9, 0),
EndTime: new Date(2025, 3, 3, 11, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 6,
Subject: 'Developers Meeting',
StartTime: new Date(2025, 3, 3, 14, 0),
EndTime: new Date(2025, 3, 3, 16, 45),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 7,
Subject: 'Project Review',
StartTime: new Date(2025, 3, 4, 11, 15),
EndTime: new Date(2025, 3, 4, 13, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 8,
Subject: 'Manual testing',
StartTime: new Date(2025, 3, 4, 9, 15),
EndTime: new Date(2025, 3, 4, 11, 45),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 9,
Subject: 'Project Preview',
StartTime: new Date(2025, 3, 5, 9, 30),
EndTime: new Date(2025, 3, 5, 12, 45),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 10,
Subject: 'Cross-browser testing',
StartTime: new Date(2025, 3, 5, 13, 45),
EndTime: new Date(2025, 3, 5, 16, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 11,
Subject: 'Bug Automation',
StartTime: new Date(2025, 3, 6, 10, 0),
EndTime: new Date(2025, 3, 6, 12, 15),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 12,
Subject: 'Functionality testing',
StartTime: new Date(2025, 3, 6, 9, 0),
EndTime: new Date(2025, 3, 6, 11, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 13,
Subject: 'Resolution-based testing',
StartTime: new Date(2025, 3, 7, 13, 0),
EndTime: new Date(2025, 3, 7, 15, 15),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 14,
Subject: 'Test report Validation',
StartTime: new Date(2025, 3, 7, 9),
EndTime: new Date(2025, 3, 7, 11),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 15,
Subject: 'Test case correction',
StartTime: new Date(2025, 3, 8, 9, 45),
EndTime: new Date(2025, 3, 8, 11, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 16,
Subject: 'Run test cases',
StartTime: new Date(2025, 3, 8, 10, 30),
EndTime: new Date(2025, 3, 8, 13, 0),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 17,
Subject: 'Quality Analysis',
StartTime: new Date(2025, 3, 9, 12),
EndTime: new Date(2025, 3, 9, 15, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 18,
Subject: 'Debugging',
StartTime: new Date(2025, 3, 9, 9, 0),
EndTime: new Date(2025, 3, 9, 11, 15),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 19,
Subject: 'Exception handling',
StartTime: new Date(2025, 3, 10, 10, 10),
EndTime: new Date(2025, 3, 10, 13, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 20,
Subject: 'Decoding',
StartTime: new Date(2025, 3, 10, 10, 30),
EndTime: new Date(2025, 3, 10, 12, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 21,
Subject: 'workflow Analysis',
StartTime: new Date(2025, 3, 11, 9, 30),
EndTime: new Date(2025, 3, 11, 11, 30),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 22,
Subject: 'Requirement planning',
StartTime: new Date(2025, 3, 11, 12, 30),
EndTime: new Date(2025, 3, 11, 14, 45),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 23,
Subject: 'Quality Analysis',
StartTime: new Date(2025, 3, 12, 10),
EndTime: new Date(2025, 3, 12, 12, 30),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 24,
Subject: 'Resource planning',
StartTime: new Date(2025, 3, 12, 13),
EndTime: new Date(2025, 3, 12, 14, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 25,
Subject: 'Timeline estimation',
StartTime: new Date(2025, 3, 13, 9),
EndTime: new Date(2025, 3, 13, 11),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 26,
Subject: 'Developers Meeting',
StartTime: new Date(2025, 3, 13, 14),
EndTime: new Date(2025, 3, 13, 15, 45),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 27,
Subject: 'Project Review',
StartTime: new Date(2025, 3, 14, 11),
EndTime: new Date(2025, 3, 14, 13),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 28,
Subject: 'Manual testing',
StartTime: new Date(2025, 3, 14, 9),
EndTime: new Date(2025, 3, 14, 11, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 29,
Subject: 'Project Preview',
StartTime: new Date(2025, 3, 15, 9, 30),
EndTime: new Date(2025, 3, 15, 11),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 30,
Subject: 'Cross-browser testing',
StartTime: new Date(2025, 3, 15, 14),
EndTime: new Date(2025, 3, 15, 16, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 31,
Subject: 'Bug Automation',
StartTime: new Date(2025, 3, 16, 10),
EndTime: new Date(2025, 3, 16, 11),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 32,
Subject: 'Functionality testing',
StartTime: new Date(2025, 3, 16, 9),
EndTime: new Date(2025, 3, 16, 11, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 33,
Subject: 'Resolution-based testing',
StartTime: new Date(2025, 3, 17, 14),
EndTime: new Date(2025, 3, 17, 15),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 34,
Subject: 'Test report Validation',
StartTime: new Date(2025, 3, 17, 9),
EndTime: new Date(2025, 3, 17, 11),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 35,
Subject: 'Test case correction',
StartTime: new Date(2025, 3, 18, 10),
EndTime: new Date(2025, 3, 18, 11, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 36,
Subject: 'Run test cases',
StartTime: new Date(2025, 3, 18, 10),
EndTime: new Date(2025, 3, 18, 10, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 37,
Subject: 'Bug fixing',
StartTime: new Date(2025, 3, 9, 10),
EndTime: new Date(2025, 3, 9, 10, 30),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 38,
Subject: 'Debugging',
StartTime: new Date(2025, 3, 19, 9),
EndTime: new Date(2025, 3, 19, 10, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 39,
Subject: 'Exception handling',
StartTime: new Date(2025, 3, 20, 10),
EndTime: new Date(2025, 3, 20, 11),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 40,
Subject: 'Decoding',
StartTime: new Date(2025, 3, 20, 10, 30),
EndTime: new Date(2025, 3, 20, 12, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 41,
Subject: 'workflow Analysis',
StartTime: new Date(2025, 3, 21, 9, 30),
EndTime: new Date(2025, 3, 21, 11, 30),
IsAllDay: false,
OwnerId: 1,RoomId: 1
}, {
Id: 42,
Subject: 'Requirement planning',
StartTime: new Date(2025, 3, 21, 12, 30),
EndTime: new Date(2025, 3, 21, 13, 45),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 43,
Subject: 'Quality Analysis',
StartTime: new Date(2025, 3, 22, 10),
EndTime: new Date(2025, 3, 22, 11, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 44,
Subject: 'Resource planning',
StartTime: new Date(2025, 3, 22, 13),
EndTime: new Date(2025, 3, 22, 14, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 45,
Subject: 'Timeline estimation',
StartTime: new Date(2025, 3, 23, 9),
EndTime: new Date(2025, 3, 23, 10),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 46,
Subject: 'Developers Meeting',
StartTime: new Date(2025, 3, 23, 14),
EndTime: new Date(2025, 3, 23, 15, 45),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 47,
Subject: 'Project Review',
StartTime: new Date(2025, 3, 24, 11),
EndTime: new Date(2025, 3, 24, 12),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 48,
Subject: 'Manual testing',
StartTime: new Date(2025, 3, 24, 9),
EndTime: new Date(2025, 3, 24, 11, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 49,
Subject: 'Project Preview',
StartTime: new Date(2025, 3, 25, 9, 30),
EndTime: new Date(2025, 3, 25, 11),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 50,
Subject: 'Cross-browser testing',
StartTime: new Date(2025, 3, 25, 14),
EndTime: new Date(2025, 3, 25, 15, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 51,
Subject: 'Bug Automation',
StartTime: new Date(2025, 3, 26, 10),
EndTime: new Date(2025, 3, 26, 11),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 52,
Subject: 'Functionality testing',
StartTime: new Date(2025, 3, 26, 9),
EndTime: new Date(2025, 3, 26, 11, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 53,
Subject: 'Resolution-based testing',
StartTime: new Date(2025, 3, 27, 14),
EndTime: new Date(2025, 3, 27, 15),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 54,
Subject: 'Test report Validation',
StartTime: new Date(2025, 3, 27, 9),
EndTime: new Date(2025, 3, 27, 11),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 55,
Subject: 'Test case correction',
StartTime: new Date(2025, 3, 28, 10),
EndTime: new Date(2025, 3, 28, 11, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 56,
Subject: 'Run test cases',
StartTime: new Date(2025, 3, 28, 10),
EndTime: new Date(2025, 3, 28, 10, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 57,
Subject: 'Bug fixing',
StartTime: new Date(2025, 3, 29, 12),
EndTime: new Date(2025, 3, 29, 12, 30),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 58,
Subject: 'Debugging',
StartTime: new Date(2025, 3, 29, 9),
EndTime: new Date(2025, 3, 29, 10, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 59,
Subject: 'Exception handling',
StartTime: new Date(2025, 3, 30, 10),
EndTime: new Date(2025, 3, 30, 11),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 60,
Subject: 'Decoding',
StartTime: new Date(2025, 3, 30, 10, 30),
EndTime: new Date(2025, 3, 30, 12, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}
];
export let resourceTeamData: Object[] = [
{
Id: 1,
Subject: 'Developers Meeting',
StartTime: new Date(2025, 5, 1, 10, 0),
EndTime: new Date(2025, 5, 1, 11, 0),
RecurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR',
ProjectId: 1,
CategoryId: 1
}, {
Id: 2,
Subject: 'Test report Validation',
StartTime: new Date(2025, 5, 2, 10, 30),
EndTime: new Date(2025, 5, 2, 13, 0),
RecurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE,FR',
ProjectId: 1,
CategoryId: 2
}, {
Id: 3,
Subject: 'Requirement planning',
StartTime: new Date(2025, 5, 4, 9, 30),
EndTime: new Date(2025, 5, 4, 10, 45),
ProjectId: 2,
CategoryId: 1
}, {
Id: 4,
Subject: 'Bug Automation',
StartTime: new Date(2025, 5, 2, 11, 0),
EndTime: new Date(2025, 5, 2, 13, 0),
RecurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE,FR',
ProjectId: 2,
CategoryId: 2
}, {
Id: 5,
Subject: 'Timeline estimation',
StartTime: new Date(2025, 5, 3, 10, 0),
EndTime: new Date(2025, 5, 3, 12, 0),
ProjectId: 1,
CategoryId: 1
}, {
Id: 6,
Subject: 'Timeline estimation',
StartTime: new Date(2025, 5, 3, 13, 0),
EndTime: new Date(2025, 5, 3, 15, 0),
ProjectId: 2,
CategoryId: 1
}, {
Id: 7,
Subject: 'Functionality testing',
StartTime: new Date(2025, 5, 4, 14, 0),
EndTime: new Date(2025, 5, 4, 15, 30),
ProjectId: 1,
CategoryId: 2
}, {
Id: 8,
Subject: 'Functionality testing',
StartTime: new Date(2025, 5, 4, 19, 0),
EndTime: new Date(2025, 5, 4, 21, 0),
ProjectId: 2,
CategoryId: 2
}, {
Id: 9,
Subject: 'Workflow Analysis',
StartTime: new Date(2025, 5, 5, 14, 0),
EndTime: new Date(2025, 5, 5, 15, 30),
ProjectId: 1,
CategoryId: 1
}, {
Id: 10,
Subject: 'Quality Analysis',
StartTime: new Date(2025, 5, 5, 13, 0),
EndTime: new Date(2025, 5, 5, 16, 0),
ProjectId: 2,
CategoryId: 1
}, {
Id: 11,
Subject: 'Cross-browser testing',
StartTime: new Date(2025, 5, 5, 14, 45),
EndTime: new Date(2025, 5, 5, 16, 15),
ProjectId: 1,
CategoryId: 2
}, {
Id: 12,
Subject: 'Resolution-based testing',
StartTime: new Date(2025, 5, 5, 15, 0),
EndTime: new Date(2025, 5, 5, 17, 30),
ProjectId: 2,
CategoryId: 2
}, {
Id: 13,
Subject: 'Project Preview',
StartTime: new Date(2025, 5, 8, 16, 0),
EndTime: new Date(2025, 5, 8, 18, 0),
ProjectId: 1,
CategoryId: 1
}, {
Id: 14,
Subject: 'Project Preview',
StartTime: new Date(2025, 5, 8, 15, 0),
EndTime: new Date(2025, 5, 8, 17, 30),
ProjectId: 2,
CategoryId: 1
}, {
Id: 15,
Subject: 'Test report Validation',
StartTime: new Date(2025, 5, 8, 15, 30),
EndTime: new Date(2025, 5, 8, 17, 45),
ProjectId: 1,
CategoryId: 2
}, {
Id: 16,
Subject: 'Test report Validation',
StartTime: new Date(2025, 5, 8, 15, 0),
EndTime: new Date(2025, 5, 8, 17, 0),
ProjectId: 2,
CategoryId: 2
}, {
Id: 17,
Subject: 'Resource planning',
StartTime: new Date(2025, 5, 6, 15, 0),
EndTime: new Date(2025, 5, 6, 18, 0),
ProjectId: 1,
CategoryId: 1
}, {
Id: 18,
Subject: 'Resource planning',
StartTime: new Date(2025, 5, 7, 16, 0),
EndTime: new Date(2025, 5, 7, 17, 0),
ProjectId: 2,
CategoryId: 1
}, {
Id: 19,
Subject: 'Run test cases',
StartTime: new Date(2025, 5, 7, 14, 0),
EndTime: new Date(2025, 5, 7, 18, 0),
ProjectId: 1,
CategoryId: 2
}, {
Id: 20,
Subject: 'Run test cases',
StartTime: new Date(2025, 5, 6, 14, 0),
EndTime: new Date(2025, 5, 6, 17, 30),
ProjectId: 2,
CategoryId: 2
}, {
Id: 21,
Subject: 'Resource planning',
StartTime: new Date(2025, 5, 7, 9, 30),
EndTime: new Date(2025, 5, 7, 11, 30),
ProjectId: 2,
CategoryId: 1
}, {
Id: 22,
Subject: 'Developers Meeting',
StartTime: new Date(2025, 5, 1, 12, 0),
EndTime: new Date(2025, 5, 1, 13, 0),
RecurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR',
ProjectId: 2,
CategoryId: 1
}
];
export let resourceConferenceData: Object[] = [
{
Id: 1,
Subject: 'Burning Man',
StartTime: new Date(2025, 5, 1, 15, 0),
EndTime: new Date(2025, 5, 1, 17, 0),
ConferenceId: [1, 2, 3]
}, {
Id: 2,
Subject: 'Data-Driven Economy',
StartTime: new Date(2025, 5, 2, 12, 0),
EndTime: new Date(2025, 5, 2, 14, 0),
ConferenceId: [1, 2]
}, {
Id: 3,
Subject: 'Techweek',
StartTime: new Date(2025, 5, 2, 15, 0),
EndTime: new Date(2025, 5, 2, 17, 0),
ConferenceId: [2, 3]
}, {
Id: 4,
Subject: 'Content Marketing World',
StartTime: new Date(2025, 5, 2, 18, 0),
EndTime: new Date(2025, 5, 2, 20, 0),
ConferenceId: [1, 3]
}, {
Id: 5,
Subject: 'B2B Marketing Forum',
StartTime: new Date(2025, 5, 3, 10, 0),
EndTime: new Date(2025, 5, 3, 12, 0),
ConferenceId: [1, 2, 3]
}, {
Id: 6,
Subject: 'Business Innovation Factory',
StartTime: new Date(2025, 5, 3, 13, 0),
EndTime: new Date(2025, 5, 3, 15, 0),
ConferenceId: [1, 2]
}, {
Id: 7,
Subject: 'Grow Conference',
StartTime: new Date(2025, 5, 3, 16, 0),
EndTime: new Date(2025, 5, 3, 18, 0),
ConferenceId: [2, 3]
}, {
Id: 8,
Subject: 'Journalism Interactive',
StartTime: new Date(2025, 5, 3, 19, 0),
EndTime: new Date(2025, 5, 3, 21, 0),
ConferenceId: [1, 3]
}, {
Id: 9,
Subject: 'Blogcademy',
StartTime: new Date(2025, 5, 4, 10, 0),
EndTime: new Date(2025, 5, 4, 11, 30),
ConferenceId: [1, 2, 3]
}, {
Id: 10,
Subject: 'Sustainable Brands',
StartTime: new Date(2025, 5, 4, 13, 0),
EndTime: new Date(2025, 5, 4, 15, 30),
ConferenceId: [1, 2]
}, {
Id: 11,
Subject: 'Fashion Confidential',
StartTime: new Date(2025, 5, 4, 9, 0),
EndTime: new Date(2025, 5, 4, 9, 45),
ConferenceId: [2, 3]
}, {
Id: 12,
Subject: 'Mobile World Conference',
StartTime: new Date(2025, 5, 5, 12, 0),
EndTime: new Date(2025, 5, 5, 14, 0),
ConferenceId: [1, 3]
}, {
Id: 13,
Subject: 'The Human Gathering',
StartTime: new Date(2025, 5, 5, 15, 0),
EndTime: new Date(2025, 5, 5, 17, 0),
ConferenceId: [1, 2, 3]
}, {
Id: 14,
Subject: 'Web Summit',
StartTime: new Date(2025, 5, 5, 18, 0),
EndTime: new Date(2025, 5, 5, 20, 0),
ConferenceId: [1, 2]
}, {
Id: 15,
Subject: 'Funnel Hacking Live',
StartTime: new Date(2025, 5, 6, 12, 0),
EndTime: new Date(2025, 5, 6, 14, 0),
ConferenceId: [1, 3]
}, {
Id: 16,
Subject: 'Data Science Conference',
StartTime: new Date(2025, 5, 6, 15, 0),
EndTime: new Date(2025, 5, 6, 17, 0),
ConferenceId: [2, 3]
}, {
Id: 17,
Subject: 'Powerful Living Experience',
StartTime: new Date(2025, 5, 6, 21, 0),
EndTime: new Date(2025, 5, 6, 23, 30),
ConferenceId: [1, 2, 3]
}, {
Id: 18,
Subject: 'World Domination Summit',
StartTime: new Date(2025, 5, 7, 12, 0),
EndTime: new Date(2025, 5, 7, 14, 0),
ConferenceId: [2, 3]
}, {
Id: 19,
Subject: 'Burning Man',
StartTime: new Date(2025, 5, 7, 15, 0),
EndTime: new Date(2025, 5, 7, 17, 0),
ConferenceId: [1, 3]
}, {
Id: 20,
Subject: 'Data-Driven Economy',
StartTime: new Date(2025, 5, 7, 18, 0),
EndTime: new Date(2025, 5, 7, 20, 0),
ConferenceId: [1, 2]
}, {
Id: 21,
Subject: 'Techweek',
StartTime: new Date(2025, 5, 8, 12, 0),
EndTime: new Date(2025, 5, 8, 14, 0),
ConferenceId: [1, 2, 3]
}, {
Id: 22,
Subject: 'Content Marketing World',
StartTime: new Date(2025, 5, 8, 15, 0),
EndTime: new Date(2025, 5, 8, 17, 0),
ConferenceId: [1, 2, 3]
}, {
Id: 23,
Subject: 'B2B Marketing Forum',
StartTime: new Date(2025, 5, 8, 20, 30),
EndTime: new Date(2025, 5, 8, 21, 30),
ConferenceId: [1, 3]
}, {
Id: 24,
Subject: 'Business Innovation Factory',
StartTime: new Date(2025, 5, 9, 12, 0),
EndTime: new Date(2025, 5, 9, 14, 0),
ConferenceId: [2, 3]
}, {
Id: 25,
Subject: 'Grow Conference',
StartTime: new Date(2025, 5, 9, 15, 0),
EndTime: new Date(2025, 5, 9, 17, 0),
ConferenceId: [1, 2]
}, {
Id: 26,
Subject: 'Journalism Interactive',
StartTime: new Date(2025, 5, 9, 18, 0),
EndTime: new Date(2025, 5, 9, 20, 0),
ConferenceId: [1, 2, 3]
}, {
Id: 27,
Subject: 'Blogcademy',
StartTime: new Date(2025, 5, 10, 12, 0),
EndTime: new Date(2025, 5, 10, 14, 0),
ConferenceId: [1, 3]
}, {
Id: 28,
Subject: 'Sustainable Brands',
StartTime: new Date(2025, 5, 10, 15, 0),
EndTime: new Date(2025, 5, 10, 17, 0),
ConferenceId: [2, 3]
}, {
Id: 29,
Subject: 'Fashion Confidential',
StartTime: new Date(2025, 5, 10, 18, 0),
EndTime: new Date(2025, 5, 10, 20, 0),
ConferenceId: [1, 2]
}, {
Id: 30,
Subject: 'Mobile World Conference',
StartTime: new Date(2025, 5, 11, 12, 0),
EndTime: new Date(2025, 5, 11, 14, 0),
ConferenceId: [1, 2, 3]
}, {
Id: 31,
Subject: 'The Human Gathering',
StartTime: new Date(2025, 5, 11, 15, 0),
EndTime: new Date(2025, 5, 11, 17, 0),
ConferenceId: [1, 2, 3]
}, {
Id: 32,
Subject: 'Web Summit',
StartTime: new Date(2025, 5, 11, 18, 0),
EndTime: new Date(2025, 5, 11, 20, 0),
ConferenceId: [3]
}, {
Id: 33,
Subject: 'Funnel Hacking Live',
StartTime: new Date(2025, 5, 12, 14, 0),
EndTime: new Date(2025, 5, 12, 16, 0),
ConferenceId: [1]
}, {
Id: 34,
Subject: 'Data Science Conference',
StartTime: new Date(2025, 5, 12, 14, 0),
EndTime: new Date(2025, 5, 12, 16, 0),
ConferenceId: [2]
}, {
Id: 35,
Subject: 'Powerful Living Experience',
StartTime: new Date(2025, 5, 12, 18, 0),
EndTime: new Date(2025, 5, 12, 20, 0),
ConferenceId: [1, 2]
}, {
Id: 36,
Subject: 'World Domination Summit',
StartTime: new Date(2025, 5, 12, 18, 0),
EndTime: new Date(2025, 5, 12, 20, 0),
ConferenceId: [3]
}, {
Id: 37,
Subject: 'Burning Man',
StartTime: new Date(2025, 5, 13, 14, 0),
EndTime: new Date(2025, 5, 13, 16, 0),
ConferenceId: [1, 3]
}, {
Id: 38,
Subject: 'Data-Driven Economy',
StartTime: new Date(2025, 5, 13, 14, 0),
EndTime: new Date(2025, 5, 13, 16, 0),
ConferenceId: [1]
}, {
Id: 39,
Subject: 'Techweek',
StartTime: new Date(2025, 5, 13, 18, 0),
EndTime: new Date(2025, 5, 13, 20, 0),
ConferenceId: [2, 3]
}, {
Id: 40,
Subject: 'Content Marketing World',
StartTime: new Date(2025, 5, 13, 18, 0),
EndTime: new Date(2025, 5, 13, 20, 0),
ConferenceId: [1, 2]
}, {
Id: 41,
Subject: 'B2B Marketing Forum',
StartTime: new Date(2025, 5, 14, 14, 0),
EndTime: new Date(2025, 5, 14, 16, 0),
ConferenceId: [1, 2, 3]
}, {
Id: 42,
Subject: 'Business Innovation Factory',
StartTime: new Date(2025, 5, 14, 14, 0),
EndTime: new Date(2025, 5, 14, 16, 0),
ConferenceId: [2, 3]
}, {
Id: 43,
Subject: 'Grow Conference',
StartTime: new Date(2025, 5, 14, 18, 0),
EndTime: new Date(2025, 5, 14, 20, 0),
ConferenceId: [3]
}, {
Id: 44,
Subject: 'Journalism Interactive',
StartTime: new Date(2025, 5, 14, 18, 0),
EndTime: new Date(2025, 5, 14, 20, 0),
ConferenceId: [1, 2, 3]
}, {
Id: 45,
Subject: 'Blogcademy',
StartTime: new Date(2025, 5, 15, 14, 0),
EndTime: new Date(2025, 5, 15, 16, 0),
ConferenceId: [1, 3]
}, {
Id: 46,
Subject: 'Sustainable Brands',
StartTime: new Date(2025, 5, 15, 14, 0),
EndTime: new Date(2025, 5, 15, 16, 0),
ConferenceId: [1, 3]
}, {
Id: 47,
Subject: 'Fashion Confidential',
StartTime: new Date(2025, 5, 15, 18, 0),
EndTime: new Date(2025, 5, 15, 20, 0),
ConferenceId: [1, 2]
}, {
Id: 48,
Subject: 'Mobile World Conference',
StartTime: new Date(2025, 5, 15, 18, 0),
EndTime: new Date(2025, 5, 15, 20, 0),
ConferenceId: [2, 3]
}
];
export let doctorData: Object[] = [
{
Id: 1,
Subject: 'Echocardiogram',
StartTime: new Date(2025, 3, 2, 9, 30),
EndTime: new Date(2025, 3, 2, 11, 30),
IsAllDay: false,
DoctorId: 1
}, {
Id: 2,
Subject: 'Lumbar punctures',
StartTime: new Date(2025, 3, 2, 9, 30),
EndTime: new Date(2025, 3, 2, 10, 45),
IsAllDay: false,
DoctorId: 2
}, {
Id: 3,
Subject: 'Osteoarthritis',
StartTime: new Date(2025, 3, 2, 8),
EndTime: new Date(2025, 3, 2, 10, 30),
IsAllDay: false,
DoctorId: 3
}, {
Id: 4,
Subject: 'Ambulatory ECG',
StartTime: new Date(2025, 3, 3, 12),
EndTime: new Date(2025, 3, 3, 12, 30),
IsAllDay: false,
DoctorId: 1
}, {
Id: 5,
Subject: 'Osteoporosis',
StartTime: new Date(2025, 3, 3, 11),
EndTime: new Date(2025, 3, 3, 11, 50),
IsAllDay: false,
DoctorId: 3
}, {
Id: 6,
Subject: 'Neuromuscular',
StartTime: new Date(2025, 3, 4, 11, 30),
EndTime: new Date(2025, 3, 4, 13, 30),
IsAllDay: false,
DoctorId: 2
}, {
Id: 7,
Subject: 'Rheumatoid arthritis',
StartTime: new Date(2025, 3, 4, 13, 40),
EndTime: new Date(2025, 3, 4, 14, 40),
IsAllDay: false,
DoctorId: 3
}, {
Id: 8,
Subject: 'Cardiac Catheterization',
StartTime: new Date(2025, 3, 5, 11, 30),
EndTime: new Date(2025, 3, 5, 13),
IsAllDay: false,
DoctorId: 1
}, {
Id: 9,
Subject: 'Growth abnormalities',
StartTime: new Date(2025, 3, 5, 14),
EndTime: new Date(2025, 3, 5, 15, 30),
IsAllDay: false,
DoctorId: 3
}, {
Id: 10,
Subject: 'Sleep disorders',
StartTime: new Date(2025, 3, 6, 12),
EndTime: new Date(2025, 3, 6, 14),
IsAllDay: false,
DoctorId: 2
}, {
Id: 11,
Subject: 'Torn ligaments',
StartTime: new Date(2025, 3, 6, 13, 30),
EndTime: new Date(2025, 3, 6, 14, 45),
IsAllDay: false,
DoctorId: 3
}, {
Id: 12,
Subject: 'Coronary angiogram',
StartTime: new Date(2025, 3, 6, 8),
EndTime: new Date(2025, 3, 6, 8, 30),
IsAllDay: false,
DoctorId: 1
}, {
Id: 13,
Subject: 'Blood pressure',
StartTime: new Date(2025, 3, 9, 12),
EndTime: new Date(2025, 3, 9, 12, 30),
IsAllDay: false,
DoctorId: 1
}, {
Id: 14,
Subject: 'Radiculopathy',
StartTime: new Date(2025, 3, 9, 15, 45),
EndTime: new Date(2025, 3, 9, 16, 30),
IsAllDay: false,
DoctorId: 2
}, {
Id: 15,
Subject: 'Sprains and strains',
StartTime: new Date(2025, 3, 9, 14),
EndTime: new Date(2025, 3, 9, 15, 30),
IsAllDay: false,
DoctorId: 3
}, {
Id: 16,
Subject: 'Cardiac stress testing',
StartTime: new Date(2025, 3, 10, 10),
EndTime: new Date(2025, 3, 10, 10, 30),
IsAllDay: false,
DoctorId: 1
}, {
Id: 17,
Subject: 'Tendon injuries',
StartTime: new Date(2025, 3, 10, 14),
EndTime: new Date(2025, 3, 10, 15, 30),
IsAllDay: false,
DoctorId: 3
}, {
Id: 18,
Subject: 'Dementia',
StartTime: new Date(2025, 3, 11, 15),
EndTime: new Date(2025, 3, 11, 17),
IsAllDay: false,
DoctorId: 2
}, {
Id: 19,
Subject: 'Pulled muscles',
StartTime: new Date(2025, 3, 11, 13, 30),
EndTime: new Date(2025, 3, 11, 15, 50),
IsAllDay: false,
DoctorId: 3
}, {
Id: 20,
Subject: 'Coronary angiogram',
StartTime: new Date(2025, 3, 12, 10, 30),
EndTime: new Date(2025, 3, 12, 12, 30),
IsAllDay: false,
DoctorId: 1
}, {
Id: 21,
Subject: 'Back pain',
StartTime: new Date(2025, 3, 12, 10, 30),
EndTime: new Date(2025, 3, 12, 11, 30),
IsAllDay: false,
DoctorId: 3
}, {
Id: 22,
Subject: 'Neuropathy',
StartTime: new Date(2025, 3, 13, 12, 30),
EndTime: new Date(2025, 3, 13, 13, 45),
IsAllDay: false,
DoctorId: 2
}, {
Id: 23,
Subject: 'Ruptured disks',
StartTime: new Date(2025, 3, 13, 13),
EndTime: new Date(2025, 3, 13, 15, 50),
IsAllDay: false,
DoctorId: 3
}, {
Id: 24,
Subject: 'Atherosclerosis',
StartTime: new Date(2025, 3, 13, 10),
EndTime: new Date(2025, 3, 13, 12, 30),
IsAllDay: false,
DoctorId: 1
}, {
Id: 25,
Subject: 'Arthroplasty',
StartTime: new Date(2025, 3, 16, 9),
EndTime: new Date(2025, 3, 16, 10),
IsAllDay: false,
DoctorId: 1
}, {
Id: 26,
Subject: 'Hyperactivity disorder',
StartTime: new Date(2025, 3, 16, 14),
EndTime: new Date(2025, 3, 16, 15, 45),
IsAllDay: false,
DoctorId: 2
}, {
Id: 27,
Subject: 'Muscular dystrophy',
StartTime: new Date(2025, 3, 16, 13, 10),
EndTime: new Date(2025, 3, 16, 15, 20),
IsAllDay: false,
DoctorId: 3
}, {
Id: 28,
Subject: 'Consulting',
StartTime: new Date(2025, 3, 17, 9, 20),
EndTime: new Date(2025, 3, 17, 10, 30),
IsAllDay: false,
DoctorId: 1
}, {
Id: 29,
Subject: 'Hand surgery',
StartTime: new Date(2025, 3, 17, 13, 20),
EndTime: new Date(2025, 3, 17, 15, 22),
IsAllDay: false,
DoctorId: 3
}, {
Id: 30,
Subject: 'Neuromuscular',
StartTime: new Date(2025, 3, 18, 14),
EndTime: new Date(2025, 3, 18, 15, 40),
IsAllDay: false,
DoctorId: 2
}, {
Id: 31,
Subject: 'Spine surgery',
StartTime: new Date(2025, 3, 18, 12, 18),
EndTime: new Date(2025, 3, 18, 14, 23),
IsAllDay: false,
DoctorId: 3
}, {
Id: 32,
Subject: 'Fibrinogen',
StartTime: new Date(2025, 3, 19, 9),
EndTime: new Date(2025, 3, 19, 12, 30),
IsAllDay: false,
DoctorId: 1
}, {
Id: 33,
Subject: 'Bone tumors',
StartTime: new Date(2025, 3, 19, 10, 45),
EndTime: new Date(2025, 3, 19, 12, 20),
IsAllDay: false,
DoctorId: 3
}, {
Id: 34,
Subject: 'Neuromuscular',
StartTime: new Date(2025, 3, 20, 13),
EndTime: new Date(2025, 3, 20, 17),
IsAllDay: false,
DoctorId: 2
}, {
Id: 35,
Subject: 'Osteoporosis',
StartTime: new Date(2025, 3, 20, 11, 45),
EndTime: new Date(2025, 3, 20, 14, 30),
IsAllDay: false,
DoctorId: 3
}, {
Id: 36,
Subject: 'Triglyceride',
StartTime: new Date(2025, 3, 20, 7),
EndTime: new Date(2025, 3, 20, 10, 45),
IsAllDay: false,
DoctorId: 1
}, {
Id: 37,
Subject: 'Fibrinogen',
StartTime: new Date(2025, 3, 23, 8),
EndTime: new Date(2025, 3, 23, 12, 30),
IsAllDay: false,
DoctorId: 1
}, {
Id: 38,
Subject: 'Head trauma',
StartTime: new Date(2025, 3, 23, 12),
EndTime: new Date(2025, 3, 23, 15),
IsAllDay: false,
DoctorId: 2
}, {
Id: 39,
Subject: 'Arthroplasty',
StartTime: new Date(2025, 3, 23, 12, 18),
EndTime: new Date(2025, 3, 23, 13, 22),
IsAllDay: false,
DoctorId: 3
}, {
Id: 40,
Subject: 'Echocardiogram',
StartTime: new Date(2025, 3, 24, 7, 30),
EndTime: new Date(2025, 3, 24, 12, 40),
IsAllDay: false,
DoctorId: 1
}, {
Id: 41,
Subject: 'Skull reconstruction',
StartTime: new Date(2025, 3, 24, 13, 20),
EndTime: new Date(2025, 3, 24, 15, 45),
IsAllDay: false,
DoctorId: 3
}, {
Id: 42,
Subject: 'Dementia',
StartTime: new Date(2025, 3, 25, 12, 30),
EndTime: new Date(2025, 3, 25, 16, 45),
IsAllDay: false,
DoctorId: 2
}, {
Id: 43,
Subject: 'Orthopedic trauma',
StartTime: new Date(2025, 3, 25, 10, 18),
EndTime: new Date(2025, 3, 25, 12, 20),
IsAllDay: false,
DoctorId: 3
}, {
Id: 44,
Subject: 'Blood pressure',
StartTime: new Date(2025, 3, 26, 7, 50),
EndTime: new Date(2025, 3, 26, 12, 30),
IsAllDay: false,
DoctorId: 1
}, {
Id: 45,
Subject: 'Ruptured disks',
StartTime: new Date(2025, 3, 26, 12, 50),
EndTime: new Date(2025, 3, 26, 15, 20),
IsAllDay: false,
DoctorId: 3
}, {
Id: 46,
Subject: 'Head trauma',
StartTime: new Date(2025, 3, 27, 11, 50),
EndTime: new Date(2025, 3, 27, 12, 45),
IsAllDay: false,
DoctorId: 2
}, {
Id: 47,
Subject: 'Cerebral palsy',
StartTime: new Date(2025, 3, 27, 14, 50),
EndTime: new Date(2025, 3, 27, 15, 50),
IsAllDay: false,
DoctorId: 3
}, {
Id: 48,
Subject: 'Consulting',
StartTime: new Date(2025, 3, 27, 9),
EndTime: new Date(2025, 3, 27, 11, 30),
IsAllDay: false,
DoctorId: 1
}, {
Id: 49,
Subject: 'Electrocardiogram',
StartTime: new Date(2025, 3, 30, 9, 30),
EndTime: new Date(2025, 3, 30, 11, 50),
IsAllDay: false,
DoctorId: 1
}, {
Id: 50,
Subject: 'Radiculopathy',
StartTime: new Date(2025, 3, 30, 14),
EndTime: new Date(2025, 3, 30, 15, 30),
IsAllDay: false,
DoctorId: 2
}, {
Id: 51,
Subject: 'Skull reconstruction',
StartTime: new Date(2025, 3, 30, 14),
EndTime: new Date(2025, 3, 30, 16),
IsAllDay: false,
DoctorId: 3
}
];
export let holidayData: Object[] = [
{
Id: 401,
Subject: 'Global Family Day',
StartTime: new Date(2025, 0, 1),
EndTime: new Date(2025, 0, 2),
IsAllDay: true,
CalendarId: 4
}, {
Id: 402,
Subject: 'World Braille Day',
StartTime: new Date(2025, 0, 4),
EndTime: new Date(2025, 0, 5),
IsAllDay: true,
CalendarId: 4
}, {
Id: 403,
Subject: 'World Literary Day',
StartTime: new Date(2025, 0, 8),
EndTime: new Date(2025, 0, 9),
IsAllDay: true,
CalendarId: 4
}, {
Id: 404,
Subject: 'International Thank-You Day',
StartTime: new Date(2025, 0, 11),
EndTime: new Date(2025, 0, 12),
IsAllDay: true,
CalendarId: 4
}, {
Id: 405,
Subject: 'World Leprosy Day',
StartTime: new Date(2025, 0, 30),
EndTime: new Date(2025, 0, 31),
IsAllDay: true,
CalendarId: 4
}, {
Id: 406,
Subject: 'Darwin Day',
StartTime: new Date(2025, 1, 12),
EndTime: new Date(2025, 1, 13),
IsAllDay: true,
CalendarId: 4
}, {
Id: 407,
Subject: 'International Mother Language Day',
StartTime: new Date(2025, 1, 21),
EndTime: new Date(2025, 1, 22),
IsAllDay: true,
CalendarId: 4
}, {
Id: 408,
Subject: 'World Thinking Day',
StartTime: new Date(2025, 1, 22),
EndTime: new Date(2025, 1, 23),
IsAllDay: true,
CalendarId: 4
}, {
Id: 409,
Subject: 'International Day of the Seal',
StartTime: new Date(2025, 2, 1),
EndTime: new Date(2025, 2, 2),
IsAllDay: true,
CalendarId: 4
}, {
Id: 410,
Subject: 'International Women’s Day',
StartTime: new Date(2025, 2, 8),
EndTime: new Date(2025, 2, 9),
IsAllDay: true,
CalendarId: 4
}, {
Id: 411,
Subject: 'World Book Day',
StartTime: new Date(2025, 2, 14),
EndTime: new Date(2025, 2, 15),
IsAllDay: true,
CalendarId: 4
}, {
Id: 412,
Subject: 'World Frog Day',
StartTime: new Date(2025, 2, 20),
EndTime: new Date(2025, 2, 21),
IsAllDay: true,
CalendarId: 4
}, {
Id: 413,
Subject: 'World Down Syndrome Day',
StartTime: new Date(2025, 2, 21),
EndTime: new Date(2025, 2, 22),
IsAllDay: true,
CalendarId: 4
}, {
Id: 414,
Subject: 'World Day for Water',
StartTime: new Date(2025, 2, 22),
EndTime: new Date(2025, 2, 23),
IsAllDay: true,
CalendarId: 4
}, {
Id: 415,
Subject: 'World Meteorological Day',
StartTime: new Date(2025, 2, 23),
EndTime: new Date(2025, 2, 24),
IsAllDay: true,
CalendarId: 4
}, {
Id: 416,
Subject: 'International Children’s Book Day',
StartTime: new Date(2025, 3, 2),
EndTime: new Date(2025, 3, 3),
IsAllDay: true,
CalendarId: 4
}, {
Id: 417,
Subject: 'World Health Day',
StartTime: new Date(2025, 3, 7),
EndTime: new Date(2025, 3, 8),
IsAllDay: true,
CalendarId: 4
}, {
Id: 418,
Subject: 'International Special Librarian’s',
StartTime: new Date(2025, 3, 13),
EndTime: new Date(2025, 3, 14),
IsAllDay: true,
CalendarId: 4
}, {
Id: 419,
Subject: 'International Creativity and Innovation Day',
StartTime: new Date(2025, 3, 21),
EndTime: new Date(2025, 3, 22),
IsAllDay: true,
CalendarId: 4
}, {
Id: 420,
Subject: 'Earth Day',
StartTime: new Date(2025, 3, 22),
EndTime: new Date(2025, 3, 23),
IsAllDay: true,
CalendarId: 4
}, {
Id: 421,
Subject: 'World Copyright Day',
StartTime: new Date(2025, 3, 23),
EndTime: new Date(2025, 3, 24),
IsAllDay: true,
CalendarId: 4
}, {
Id: 422,
Subject: 'World Penguin Day',
StartTime: new Date(2025, 3, 25),
EndTime: new Date(2025, 3, 26),
IsAllDay: true,
CalendarId: 4
}, {
Id: 423,
Subject: 'World Press Freedom Day',
StartTime: new Date(2025, 4, 3),
EndTime: new Date(2025, 4, 4),
IsAllDay: true,
CalendarId: 4
}, {
Id: 424,
Subject: 'International Midwives Day',
StartTime: new Date(2025, 4, 5),
EndTime: new Date(2025, 4, 5),
IsAllDay: true,
CalendarId: 4
}, {
Id: 425,
Subject: 'World Red Cross Day',
StartTime: new Date(2025, 4, 8),
EndTime: new Date(2025, 4, 9),
IsAllDay: true,
CalendarId: 4
}, {
Id: 426,
Subject: 'World Lupus Day',
StartTime: new Date(2025, 4, 10),
EndTime: new Date(2025, 4, 11),
IsAllDay: true,
CalendarId: 4
}, {
Id: 427,
Subject: 'International Nurses Day',
StartTime: new Date(2025, 4, 12),
EndTime: new Date(2025, 4, 12),
IsAllDay: true,
CalendarId: 4
}, {
Id: 428,
Subject: 'IEEE Global Engineering Day',
StartTime: new Date(2025, 4, 13),
EndTime: new Date(2025, 4, 14),
IsAllDay: true,
CalendarId: 4
}, {
Id: 429,
Subject: 'International Day of Families',
StartTime: new Date(2025, 4, 15),
EndTime: new Date(2025, 4, 16),
IsAllDay: true,
CalendarId: 4
}, {
Id: 430,
Subject: 'International Museum Day',
StartTime: new Date(2025, 4, 18),
EndTime: new Date(2025, 4, 19),
IsAllDay: true,
CalendarId: 4
}, {
Id: 431,
Subject: 'World Turtle Day',
StartTime: new Date(2025, 4, 23),
EndTime: new Date(2025, 4, 24),
IsAllDay: true,
CalendarId: 4
}, {
Id: 432,
Subject: 'World No-Tobacco Day',
StartTime: new Date(2025, 4, 31),
EndTime: new Date(2025, 5, 1),
IsAllDay: true,
CalendarId: 4
}, {
Id: 433,
Subject: 'World Ocean Day',
StartTime: new Date(2025, 5, 8),
EndTime: new Date(2025, 5, 9),
IsAllDay: true,
CalendarId: 4
}, {
Id: 434,
Subject: 'World Blood Donor Day',
StartTime: new Date(2025, 5, 14),
EndTime: new Date(2025, 5, 15),
IsAllDay: true,
CalendarId: 4
}, {
Id: 435,
Subject: 'World Day to Combat Desertification & Drought',
StartTime: new Date(2025, 5, 17),
EndTime: new Date(2025, 5, 18),
IsAllDay: true,
CalendarId: 4
}, {
Id: 436,
Subject: 'World Refugee Day',
StartTime: new Date(2025, 5, 20),
EndTime: new Date(2025, 5, 21),
IsAllDay: true,
CalendarId: 4
}, {
Id: 437,
Subject: 'International Day Against Drug Abuse & Trafficking',
StartTime: new Date(2025, 5, 26),
EndTime: new Date(2025, 5, 27),
IsAllDay: true,
CalendarId: 4
}
];
export let birthdayData: Object[] = [
{
Id: 301,
Subject: 'Gladys Spellman',
StartTime: new Date(2025, 2, 1),
EndTime: new Date(2025, 2, 2),
IsAllDay: true,
CalendarId: 3
}, {
Id: 302,
Subject: 'Susanna Salter',
StartTime: new Date(2025, 2, 2),
EndTime: new Date(2025, 2, 3),
IsAllDay: true,
CalendarId: 3
}, {
Id: 303,
Subject: 'Dora Marsden',
StartTime: new Date(2025, 2, 5),
EndTime: new Date(2025, 2, 6),
IsAllDay: true,
CalendarId: 3
}, {
Id: 304,
Subject: 'Anne Bonny',
StartTime: new Date(2025, 2, 8),
EndTime: new Date(2025, 2, 9),
IsAllDay: true,
CalendarId: 3
}, {
Id: 305,
Subject: 'Clare Boothe Luce',
StartTime: new Date(2025, 2, 10),
EndTime: new Date(2025, 2, 11),
IsAllDay: true,
CalendarId: 3
}, {
Id: 306,
Subject: 'Ethel Anderson',
StartTime: new Date(2025, 2, 16),
EndTime: new Date(2025, 2, 17),
IsAllDay: true,
CalendarId: 3
}, {
Id: 307,
Subject: 'Louise Otto-Peters',
StartTime: new Date(2025, 2, 26),
EndTime: new Date(2025, 2, 27),
IsAllDay: true,
CalendarId: 3
}, {
Id: 308,
Subject: 'Faith Leech',
StartTime: new Date(2025, 2, 31),
EndTime: new Date(2025, 3, 1),
IsAllDay: true,
CalendarId: 3
}, {
Id: 309,
Subject: 'Wilhelmine Reichard',
StartTime: new Date(2025, 3, 2),
EndTime: new Date(2025, 3, 3),
IsAllDay: true,
CalendarId: 3
}, {
Id: 310,
Subject: 'Janet Rowley',
StartTime: new Date(2025, 3, 5),
EndTime: new Date(2025, 3, 6),
IsAllDay: true,
CalendarId: 3
}, {
Id: 311,
Subject: 'Kathleen Major',
StartTime: new Date(2025, 3, 10),
EndTime: new Date(2025, 3, 11),
IsAllDay: true,
CalendarId: 3
}, {
Id: 312,
Subject: 'Kasturba Gandhi',
StartTime: new Date(2025, 3, 11),
EndTime: new Date(2025, 3, 12),
IsAllDay: true,
CalendarId: 3
}, {
Id: 313,
Subject: 'Elizabeth Huckaby',
StartTime: new Date(2025, 3, 14),
EndTime: new Date(2025, 3, 15),
IsAllDay: true,
CalendarId: 3
}, {
Id: 314,
Subject: 'Helene Hanff',
StartTime: new Date(2025, 3, 15),
EndTime: new Date(2025, 3, 16),
IsAllDay: true,
CalendarId: 3
}, {
Id: 315,
Subject: 'Caresse Crosby',
StartTime: new Date(2025, 3, 20),
EndTime: new Date(2025, 3, 21),
IsAllDay: true,
CalendarId: 3
}, {
Id: 316,
Subject: 'Angela Burdett-Coutts',
StartTime: new Date(2025, 3, 21),
EndTime: new Date(2025, 3, 22),
IsAllDay: true,
CalendarId: 3
}, {
Id: 317,
Subject: 'Pandita Ramabai',
StartTime: new Date(2025, 3, 23),
EndTime: new Date(2025, 3, 24),
IsAllDay: true,
CalendarId: 3
}, {
Id: 318,
Subject: 'Melissa Hayden',
StartTime: new Date(2025, 3, 25),
EndTime: new Date(2025, 3, 26),
IsAllDay: true,
CalendarId: 3
}, {
Id: 319,
Subject: 'Mary Wollstonecraft',
StartTime: new Date(2025, 3, 27),
EndTime: new Date(2025, 3, 28),
IsAllDay: true,
CalendarId: 3
}, {
Id: 320,
Subject: 'Mary Petty',
StartTime: new Date(2025, 3, 29),
EndTime: new Date(2025, 3, 30),
IsAllDay: true,
CalendarId: 3
}, {
Id: 321,
Subject: 'Doris Fisher',
StartTime: new Date(2025, 4, 2),
EndTime: new Date(2025, 4, 3),
IsAllDay: true,
CalendarId: 3
}, {
Id: 322,
Subject: 'Kay Petre',
StartTime: new Date(2025, 4, 10),
EndTime: new Date(2025, 4, 11),
IsAllDay: true,
CalendarId: 3
}, {
Id: 323,
Subject: 'Williamina Fleming',
StartTime: new Date(2025, 4, 15),
EndTime: new Date(2025, 4, 16),
IsAllDay: true,
CalendarId: 3
}, {
Id: 324,
Subject: 'Ondina Valla',
StartTime: new Date(2025, 4, 20),
EndTime: new Date(2025, 4, 21),
IsAllDay: true,
CalendarId: 3
}, {
Id: 325,
Subject: 'Marie Menken',
StartTime: new Date(2025, 4, 25),
EndTime: new Date(2025, 4, 26),
IsAllDay: true,
CalendarId: 3
}
];
export let companyData: Object[] = [
{
Id: 201,
Subject: 'Conference meeting',
StartTime: new Date(2025, 2, 1),
EndTime: new Date(2025, 2, 2),
IsAllDay: true,
CalendarId: 2
}, {
Id: 202,
Subject: 'Product discussion',
StartTime: new Date(2025, 2, 4),
EndTime: new Date(2025, 2, 5),
IsAllDay: true,
CalendarId: 2
}, {
Id: 203,
Subject: 'Companys growth related discussion',
StartTime: new Date(2025, 2, 8),
EndTime: new Date(2025, 2, 9),
IsAllDay: true,
CalendarId: 2
}, {
Id: 204,
Subject: 'Customer issues',
StartTime: new Date(2025, 2, 11),
EndTime: new Date(2025, 2, 12),
IsAllDay: true,
CalendarId: 2
}, {
Id: 205,
Subject: 'Development related chat',
StartTime: new Date(2025, 2, 13),
EndTime: new Date(2025, 2, 14),
IsAllDay: true,
CalendarId: 2
}, {
Id: 206,
Subject: 'Product meeting',
StartTime: new Date(2025, 2, 18),
EndTime: new Date(2025, 2, 19),
IsAllDay: true,
CalendarId: 2
}, {
Id: 207,
Subject: 'General discussion',
StartTime: new Date(2025, 2, 21),
EndTime: new Date(2025, 2, 22),
IsAllDay: true,
CalendarId: 2
}, {
Id: 208,
Subject: 'Hike discussion',
StartTime: new Date(2025, 2, 24),
EndTime: new Date(2025, 2, 25),
IsAllDay: true,
CalendarId: 2
}, {
Id: 209,
Subject: 'Customer meeting',
StartTime: new Date(2025, 2, 28),
EndTime: new Date(2025, 2, 29),
IsAllDay: true,
CalendarId: 2
}, {
Id: 210,
Subject: 'New launch discussion',
StartTime: new Date(2025, 2, 30),
EndTime: new Date(2025, 2, 31),
IsAllDay: true,
CalendarId: 2
}, {
Id: 211,
Subject: 'Conference Meeting',
StartTime: new Date(2025, 3, 1),
EndTime: new Date(2025, 3, 2),
IsAllDay: true,
CalendarId: 2
}, {
Id: 212,
Subject: 'Product Discussion',
StartTime: new Date(2025, 3, 3),
EndTime: new Date(2025, 3, 4),
IsAllDay: true,
CalendarId: 2
}, {
Id: 213,
Subject: 'Companys growth related issues',
StartTime: new Date(2025, 3, 7),
EndTime: new Date(2025, 3, 8),
IsAllDay: true,
CalendarId: 2
}, {
Id: 214,
Subject: 'Customer issues',
StartTime: new Date(2025, 3, 12),
EndTime: new Date(2025, 3, 13),
IsAllDay: true,
CalendarId: 2
}, {
Id: 215,
Subject: 'Development related chat',
StartTime: new Date(2025, 3, 15),
EndTime: new Date(2025, 3, 16),
IsAllDay: true,
CalendarId: 2
}, {
Id: 216,
Subject: 'Product meeting',
StartTime: new Date(2025, 3, 18),
EndTime: new Date(2025, 3, 19),
IsAllDay: true,
CalendarId: 2
}, {
Id: 217,
Subject: 'General discussion',
StartTime: new Date(2025, 3, 21),
EndTime: new Date(2025, 3, 22),
IsAllDay: true,
CalendarId: 2
}, {
Id: 218,
Subject: 'Hike discussion',
StartTime: new Date(2025, 3, 24),
EndTime: new Date(2025, 3, 25),
IsAllDay: true,
CalendarId: 2
}, {
Id: 219,
Subject: 'Customer meeting',
StartTime: new Date(2025, 3, 26),
EndTime: new Date(2025, 3, 27),
IsAllDay: true,
CalendarId: 2
}, {
Id: 220,
Subject: 'New launch discussion',
StartTime: new Date(2025, 3, 29),
EndTime: new Date(2025, 3, 30),
IsAllDay: true,
CalendarId: 2
}, {
Id: 221,
Subject: 'Conference Meeting',
StartTime: new Date(2025, 4, 1),
EndTime: new Date(2025, 4, 2),
IsAllDay: true,
CalendarId: 2
}, {
Id: 222,
Subject: 'Product Discussion',
StartTime: new Date(2025, 4, 3),
EndTime: new Date(2025, 4, 4),
IsAllDay: true,
CalendarId: 2
}, {
Id: 223,
Subject: 'Companys growth related issues',
StartTime: new Date(2025, 4, 9),
EndTime: new Date(2025, 4, 10),
IsAllDay: true,
CalendarId: 2
}, {
Id: 224,
Subject: 'Customer issues',
StartTime: new Date(2025, 4, 13),
EndTime: new Date(2025, 4, 14),
IsAllDay: true,
CalendarId: 2
}, {
Id: 225,
Subject: 'Development related chat',
StartTime: new Date(2025, 4, 15),
EndTime: new Date(2025, 4, 16),
IsAllDay: true,
CalendarId: 2
}, {
Id: 226,
Subject: 'Product meeting',
StartTime: new Date(2025, 4, 18),
EndTime: new Date(2025, 4, 19),
IsAllDay: true,
CalendarId: 2
}, {
Id: 227,
Subject: 'General discussion',
StartTime: new Date(2025, 4, 21),
EndTime: new Date(2025, 4, 22),
IsAllDay: true,
CalendarId: 2
}, {
Id: 228,
Subject: 'Hike discussion',
StartTime: new Date(2025, 4, 24),
EndTime: new Date(2025, 4, 25),
IsAllDay: true,
CalendarId: 2
}, {
Id: 229,
Subject: 'Customer meeting',
StartTime: new Date(2025, 4, 26),
EndTime: new Date(2025, 4, 27),
IsAllDay: true,
CalendarId: 2
}, {
Id: 230,
Subject: 'New launch discussion',
StartTime: new Date(2025, 4, 29),
EndTime: new Date(2025, 4, 30),
IsAllDay: true,
CalendarId: 2
}
];
export let personalData: Object[] = [
{
Id: 101,
Subject: 'Father Birthday',
StartTime: new Date(2025, 2, 1),
EndTime: new Date(2025, 2, 2),
IsAllDay: true,
CalendarId: 1
}, {
Id: 102,
Subject: 'Engagement day',
StartTime: new Date(2025, 2, 4),
EndTime: new Date(2025, 2, 5),
IsAllDay: true,
CalendarId: 1
}, {
Id: 103,
Subject: 'Wedding day',
StartTime: new Date(2025, 2, 8),
EndTime: new Date(2025, 2, 9),
IsAllDay: true,
CalendarId: 1
}, {
Id: 104,
Subject: 'Mother Birthday',
StartTime: new Date(2025, 2, 11),
EndTime: new Date(2025, 2, 12),
IsAllDay: true,
CalendarId: 1
}, {
Id: 105,
Subject: 'Peter`s Wedding Day',
StartTime: new Date(2025, 2, 13),
EndTime: new Date(2025, 2, 14),
IsAllDay: true,
CalendarId: 1
}, {
Id: 106,
Subject: 'Family Trip',
StartTime: new Date(2025, 2, 18),
EndTime: new Date(2025, 2, 19),
IsAllDay: true,
CalendarId: 1
}, {
Id: 107,
Subject: 'Cousin Wedding Ceremony',
StartTime: new Date(2025, 2, 21),
EndTime: new Date(2025, 2, 22),
IsAllDay: true,
CalendarId: 1
}, {
Id: 108,
Subject: 'Family Meetup',
StartTime: new Date(2025, 2, 24),
EndTime: new Date(2025, 2, 25),
IsAllDay: true,
CalendarId: 1
}, {
Id: 109,
Subject: 'Grandfather Birthday',
StartTime: new Date(2025, 2, 28),
EndTime: new Date(2025, 2, 29),
IsAllDay: true,
CalendarId: 1
}, {
Id: 110,
Subject: 'Sister-in-law Wedding Ceremony',
StartTime: new Date(2025, 2, 30),
EndTime: new Date(2025, 2, 31),
IsAllDay: true,
CalendarId: 1
}, {
Id: 111,
Subject: 'Family Meetup',
StartTime: new Date(2025, 3, 1),
EndTime: new Date(2025, 3, 2),
IsAllDay: true,
CalendarId: 1
}, {
Id: 112,
Subject: 'Grandparent Wedding Day',
StartTime: new Date(2025, 3, 3),
EndTime: new Date(2025, 3, 4),
IsAllDay: true,
CalendarId: 1
}, {
Id: 113,
Subject: 'Cousin Wedding Ceremony',
StartTime: new Date(2025, 3, 7),
EndTime: new Date(2025, 3, 8),
IsAllDay: true,
CalendarId: 1
}, {
Id: 114,
Subject: 'Family Vacation Trip',
StartTime: new Date(2025, 3, 12),
EndTime: new Date(2025, 3, 13),
IsAllDay: true,
CalendarId: 1
}, {
Id: 115,
Subject: 'Brother-in-law Birthday',
StartTime: new Date(2025, 3, 15),
EndTime: new Date(2025, 3, 16),
IsAllDay: true,
CalendarId: 1
}, {
Id: 116,
Subject: 'Brother`s Birthday',
StartTime: new Date(2025, 3, 18),
EndTime: new Date(2025, 3, 19),
IsAllDay: true,
CalendarId: 1
}, {
Id: 117,
Subject: 'Sister Wedding Anniversary',
StartTime: new Date(2025, 3, 21),
EndTime: new Date(2025, 3, 22),
IsAllDay: true,
CalendarId: 1
}, {
Id: 118,
Subject: 'Family Vacation Trip',
StartTime: new Date(2025, 3, 24),
EndTime: new Date(2025, 3, 25),
IsAllDay: true,
CalendarId: 1
}, {
Id: 119,
Subject: 'Wedding Anniversary',
StartTime: new Date(2025, 3, 26),
EndTime: new Date(2025, 3, 27),
IsAllDay: true,
CalendarId: 1
}, {
Id: 120,
Subject: 'Month end trip',
StartTime: new Date(2025, 3, 29),
EndTime: new Date(2025, 3, 30),
IsAllDay: true,
CalendarId: 1
}, {
Id: 121,
Subject: 'John Birthday',
StartTime: new Date(2025, 4, 1),
EndTime: new Date(2025, 4, 2),
IsAllDay: true,
CalendarId: 1
}, {
Id: 122,
Subject: 'Vishnu Birthday',
StartTime: new Date(2025, 4, 3),
EndTime: new Date(2025, 4, 4),
IsAllDay: true,
CalendarId: 1
}, {
Id: 123,
Subject: 'Family Trip',
StartTime: new Date(2025, 4, 9),
EndTime: new Date(2025, 4, 10),
IsAllDay: true,
CalendarId: 1
}, {
Id: 124,
Subject: 'Revanth Wedding Anniversary',
StartTime: new Date(2025, 4, 13),
EndTime: new Date(2025, 4, 14),
IsAllDay: true,
CalendarId: 1
}, {
Id: 125,
Subject: 'Family Meetup',
StartTime: new Date(2025, 4, 15),
EndTime: new Date(2025, 4, 16),
IsAllDay: true,
CalendarId: 1
}, {
Id: 126,
Subject: 'Family get-together',
StartTime: new Date(2025, 4, 18),
EndTime: new Date(2025, 4, 19),
IsAllDay: true,
CalendarId: 1
}, {
Id: 127,
Subject: 'Friends Reunion',
StartTime: new Date(2025, 4, 21),
EndTime: new Date(2025, 4, 22),
IsAllDay: true,
CalendarId: 1
}, {
Id: 128,
Subject: 'Rahul Wedding Anniversary Celebration',
StartTime: new Date(2025, 4, 24),
EndTime: new Date(2025, 4, 25),
IsAllDay: true,
CalendarId: 1
}, {
Id: 129,
Subject: 'Vacation Trip with friends',
StartTime: new Date(2025, 4, 26),
EndTime: new Date(2025, 4, 27),
IsAllDay: true,
CalendarId: 1
}, {
Id: 130,
Subject: 'Friends Reunion',
StartTime: new Date(2025, 4, 29),
EndTime: new Date(2025, 4, 30),
IsAllDay: true,
CalendarId: 1
}
];
export let schedulerData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2025, 7, 11, 9, 30),
EndTime: new Date(2025, 7, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2025, 7, 12, 12, 0),
EndTime: new Date(2025, 7, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2025, 7, 13, 9, 30),
EndTime: new Date(2025, 7, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2025',
StartTime: new Date(2025, 7, 14, 13, 0),
EndTime: new Date(2025, 7, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2025, 7, 15, 12, 0),
EndTime: new Date(2025, 7, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2025, 7, 15, 9, 30),
EndTime: new Date(2025, 7, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2025, 7, 16, 11, 0),
EndTime: new Date(2025, 7, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2025, 7, 17, 9, 0),
EndTime: new Date(2025, 7, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2025, 7, 19, 11, 0),
EndTime: new Date(2025, 7, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2025, 7, 21, 11, 0),
EndTime: new Date(2025, 7, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2025',
StartTime: new Date(2025, 7, 22, 9, 30),
EndTime: new Date(2025, 7, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2025, 7, 9, 10, 0),
EndTime: new Date(2025, 7, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2025, 7, 7, 10, 30),
EndTime: new Date(2025, 7, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2025, 7, 5, 10, 0),
EndTime: new Date(2025, 7, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2025, 7, 20, 9, 30),
EndTime: new Date(2025, 7, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2025, 7, 23, 11, 0),
EndTime: new Date(2025, 7, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2025, 7, 12, 5, 30),
EndTime: new Date(2025, 7, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2025, 7, 12, 17, 0),
EndTime: new Date(2025, 7, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2025, 7, 15, 6, 0),
EndTime: new Date(2025, 7, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2025, 7, 15, 16, 0),
EndTime: new Date(2025, 7, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];Appointment filtering
Filter appointments based on specific criteria using the query option in eventSettings.
The following example demonstrates filtering to render only selected appointments:
import { CheckBox } from '@syncfusion/ej2-buttons';
import { Query, Predicate } from '@syncfusion/ej2-data';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, EventRenderedArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } 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),
eventSettings: { dataSource: scheduleData },
eventRendered: (args: EventRenderedArgs) => {
switch (args.data.EventType) {
case 'Requested':
(args.element as HTMLElement).style.backgroundColor = '#F57F17';
break;
case 'Confirmed':
(args.element as HTMLElement).style.backgroundColor = '#7fa900';
break;
case 'New':
(args.element as HTMLElement).style.backgroundColor = '#8e24aa';
break;
}
}
});
scheduleObj.appendTo('#Schedule');
function onChange(): void {
let predicate: Predicate;
let checkBoxes: CheckBox[] = [confirm, request, fresh];
checkBoxes.forEach((checkBoxObj: CheckBox) => {
if (checkBoxObj.checked) {
if (predicate) {
predicate = predicate.or('EventType', 'equal', checkBoxObj.label);
} else {
predicate = new Predicate('EventType', 'equal', checkBoxObj.label);
}
}
});
scheduleObj.eventSettings.query = new Query().where(predicate);
}
let confirm: CheckBox = new CheckBox({ label: 'Confirmed', checked: true, change: onChange }, '#confirmed');
let request: CheckBox = new CheckBox({ label: 'Requested', checked: true, change: onChange }, '#requested');
let fresh: CheckBox = new CheckBox({ label: 'New', checked: true, change: onChange }, '#new');<!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'>
<table id="property" title="Filter events">
<tbody>
<tr>
<td>
<input id="confirmed" type="checkbox" />
</td>
<td>
<input id="requested" type="checkbox" />
</td>
<td>
<input id="new" type="checkbox" />
</td>
</tr>
</tbody>
</table>
<div id="Schedule"></div>
</div>
<style>
#property td {
padding: 0 5px;
}
</style>
</body>
</html>export let scheduleData: Object[] = [{
Id: 1,
Subject: "Surgery - Andrew",
EventType: "Confirmed",
StartTime: "2018-02-12T03:30:00.000Z",
EndTime: "2018-02-12T04:30:00.000Z"
}, {
Id: 2,
Subject: "Consulting - John",
EventType: "Confirmed",
StartTime: "2018-02-12T04:30:00.000Z",
EndTime: "2018-02-12T06:00:00.000Z"
}, {
Id: 3,
Subject: "Therapy - Robert",
EventType: "Requested",
StartTime: "2018-02-12T06:00:00.000Z",
EndTime: "2018-02-12T07:00:00.000Z"
}, {
Id: 4,
Subject: "Observation - Steven",
EventType: "Confirmed",
StartTime: "2018-02-12T07:00:00.000Z",
EndTime: "2018-02-12T08:00:00.000Z"
}, {
Id: 5,
Subject: "Extraction - Nancy",
EventType: "Confirmed",
StartTime: "2018-02-12T08:00:00.000Z",
EndTime: "2018-02-12T09:30:00.000Z"
}, {
Id: 6,
Subject: "Surgery - Paul",
EventType: "New",
StartTime: "2018-02-13T03:30:00.000Z",
EndTime: "2018-02-13T04:30:00.000Z"
}, {
Id: 7,
Subject: "Extraction - Josephs",
EventType: "Confirmed",
StartTime: "2018-02-13T04:30:00.000Z",
EndTime: "2018-02-13T05:30:00.000Z"
}, {
Id: 8,
Subject: "Consulting - Mario",
EventType: "Confirmed",
StartTime: "2018-02-13T05:30:00.000Z",
EndTime: "2018-02-13T06:30:00.000Z"
}, {
Id: 9,
Subject: "Therapy - Saveley",
EventType: "Requested",
StartTime: "2018-02-13T06:30:00.000Z",
EndTime: "2018-02-13T08:00:00.000Z"
}, {
Id: 10,
Subject: "Observation - Cartrain",
EventType: "Confirmed",
StartTime: "2018-02-13T08:00:00.000Z",
EndTime: "2018-02-13T10:00:00.000Z"
}, {
Id: 11,
Subject: "Consulting - Yang",
EventType: "New",
StartTime: "2018-02-14T03:30:00.000Z",
EndTime: "2018-02-14T04:30:00.000Z"
}, {
Id: 12,
Subject: "Observation - Michael",
EventType: "New",
StartTime: "2018-02-14T04:30:00.000Z",
EndTime: "2018-02-14T06:00:00.000Z"
}, {
Id: 13,
Subject: "Surgery - Roland",
EventType: "Confirmed",
StartTime: "2018-02-14T06:00:00.000Z",
EndTime: "2018-02-14T07:00:00.000Z"
}, {
Id: 14,
Subject: "Extraction - Francisco",
EventType: "Requested",
StartTime: "2018-02-14T07:00:00.000Z",
EndTime: "2018-02-14T08:00:00.000Z"
}, {
Id: 15,
Subject: "Therapy - Henriette",
EventType: "Confirmed",
StartTime: "2018-02-14T08:00:00.000Z",
EndTime: "2018-02-14T09:30:00.000Z"
}, {
Id: 16,
Subject: "Observation - Bernardo",
EventType: "Confirmed",
StartTime: "2018-02-15T03:30:00.000Z",
EndTime: "2018-02-15T04:30:00.000Z"
}, {
Id: 17,
Subject: "Therapy - Wilson",
EventType: "Confirmed",
StartTime: "2018-02-15T04:30:00.000Z",
EndTime: "2018-02-15T05:30:00.000Z"
}, {
Id: 18,
Subject: "Consulting - Horst",
EventType: "Confirmed",
StartTime: "2018-02-15T05:30:00.000Z",
EndTime: "2018-02-15T06:30:00.000Z"
}, {
Id: 19,
Subject: "Surgery - Limeira",
EventType: "Requested",
StartTime: "2018-02-15T06:30:00.000Z",
EndTime: "2018-02-15T08:00:00.000Z"
}, {
Id: 20,
Subject: "Observation - Victoria",
EventType: "Requested",
StartTime: "2018-02-15T08:00:00.000Z",
EndTime: "2018-02-15T10:00:00.000Z"
}, {
Id: 21,
Subject: "Extraction - Afonso",
EventType: "Confirmed",
StartTime: "2018-02-16T03:30:00.000Z",
EndTime: "2018-02-16T04:30:00.000Z"
}, {
Id: 22,
Subject: "Extraction - Paula",
EventType: "New",
StartTime: "2018-02-16T04:30:00.000Z",
EndTime: "2018-02-16T05:30:00.000Z"
}, {
Id: 23,
Subject: "Observation - George",
EventType: "Requested",
StartTime: "2018-02-16T05:30:00.000Z",
EndTime: "2018-02-16T06:30:00.000Z"
}, {
Id: 24,
Subject: "Therapy - Smith",
EventType: "New",
StartTime: "2018-02-16T06:30:00.000Z",
EndTime: "2018-02-16T08:00:00.000Z"
}, {
Id: 25,
Subject: "Surgery - Jennifer",
EventType: "New",
StartTime: "2018-02-16T08:00:00.000Z",
EndTime: "2018-02-16T10:00:00.000Z"
}];Appointment selection
Select appointments using mouse or keyboard actions. Selected appointments are visually distinguished with a box shadow effect.
| Action | Description |
|---|---|
| Mouse click or Single tap on appointments | Selects a single appointment. |
| Ctrl + [Mouse click] or Ctrl + [Single tap] on appointments | Selects multiple appointments. |
Deleting multiple appointments
After selecting multiple appointments, you can delete them all at once by pressing the delete key.
Note: When deleting multiple selected occurrences of a recurring event series, only the selected occurrences will be deleted, not the entire series.
Retrieve appointment details from UI elements
Access information about an appointment’s fields directly from its UI element using the public method getEventDetails. Pass the appointment element as an argument to this method.
The following example displays the subject of a clicked appointment:
import { Button } from '@syncfusion/ej2-buttons';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, EventClickArgs } 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),
eventSettings: { dataSource: eventData },
eventClick: onEventClick
});
scheduleObj.appendTo('#Schedule');
let btn: Button = new Button();
btn.appendTo('#clear');
document.getElementById('clear').onclick = () => {
document.getElementById('EventLog').innerHTML = '';
};
function onEventClick(args: EventClickArgs): void {
let event: Object = scheduleObj.getEventDetails(args.element);
appendElement(event.Subject + '<hr>');
}
function appendElement(html: string): void {
let span: HTMLElement = document.createElement('span');
span.innerHTML = html;
let log: HTMLElement = document.getElementById('EventLog');
log.insertBefore(span, log.firstChild);
}<!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>
.content-wrapper {
display: flex;
}
.control-section {
padding-right: 10px;
width: 70%;
}
</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' class="col-lg-12">
<div class="content-wrapper">
<div class="col-lg-9 control-section">
<div id="Schedule"></div>
</div>
<div class="col-lg-3 property-section">
<table id="property" title="Event Trace">
<tbody>
<tr>
<td>
<div class="eventarea" style="height: 245px;overflow: auto">
<span class="EventLog" id="EventLog" style="word-break: normal;"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="evtbtn" style="padding-bottom: 10px">
<input id="clear" type="button" value="Clear">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>export let eventData: 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'
}
];Get current view appointments
To retrieve the appointments visible in the current Scheduler view using the getCurrentViewEvents public method. In the following example, the count of current view appointment collection rendered has been traced in dataBound event.
import { Button } from '@syncfusion/ej2-buttons';
import { Schedule, Day, Week, WorkWeek, Month, Agenda } 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),
eventSettings: { dataSource: eventData },
dataBound: onDataBound
});
scheduleObj.appendTo('#Schedule');
let btn: Button = new Button();
btn.appendTo('#clear');
document.getElementById('clear').onclick = () => {
document.getElementById('EventLog').innerHTML = '';
};
function onDataBound(): void {
let event: Object[] = scheduleObj.getCurrentViewEvents();
if (event.length > 0) {
appendElement('Events present on current view <b>' + event.length + '<b><hr>');
} else {
appendElement('No Events available in this view.<hr>');
}
}
function appendElement(html: string): void {
let span: HTMLElement = document.createElement('span');
span.innerHTML = html;
let log: HTMLElement = document.getElementById('EventLog');
log.insertBefore(span, log.firstChild);
}<!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>
.content-wrapper {
display: flex;
}
.control-section {
padding-right: 10px;
width: 70%;
}
</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' class="col-lg-12">
<div class="content-wrapper">
<div class="col-lg-9 control-section">
<div id="Schedule"></div>
</div>
<div class="col-lg-3 property-section">
<table id="property" title="Event Trace">
<tbody>
<tr>
<td>
<div class="eventarea" style="height: 245px;overflow: auto">
<span class="EventLog" id="EventLog" style="word-break: normal;"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="evtbtn" style="padding-bottom: 10px">
<input id="clear" type="button" value="Clear">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>export let eventData: 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'
}
];Get all appointments
To access all appointments rendered on the Scheduler, regardless of the current view, use the getEvents public method. In the following example, the count of entire appointment collection rendered on the Scheduler has been traced in dataBound event.
import { Button } from '@syncfusion/ej2-buttons';
import { Schedule, Day, Week, WorkWeek, Month, Agenda } 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),
eventSettings: { dataSource: eventData },
dataBound: onDataBound
});
scheduleObj.appendTo('#Schedule');
let btn: Button = new Button();
btn.appendTo('#clear');
document.getElementById('clear').onclick = () => {
document.getElementById('EventLog').innerHTML = '';
};
function onDataBound(): void {
let event: Object[] = scheduleObj.getEvents();
appendElement('Events present on scheduler <b>' + event.length + '<b><hr>');
}
function appendElement(html: string): void {
let span: HTMLElement = document.createElement('span');
span.innerHTML = html;
let log: HTMLElement = document.getElementById('EventLog');
log.insertBefore(span, log.firstChild);
}<!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>
.content-wrapper {
display: flex;
}
.control-section {
padding-right: 10px;
width: 70%;
}
</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' class="col-lg-12">
<div class="content-wrapper">
<div class="col-lg-9 control-section">
<div id="Schedule"></div>
</div>
<div class="col-lg-3 property-section">
<table id="property" title="Event Trace">
<tbody>
<tr>
<td>
<div class="eventarea" style="height: 245px;overflow: auto">
<span class="EventLog" id="EventLog" style="word-break: normal;"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="evtbtn" style="padding-bottom: 10px">
<input id="clear" type="button" value="Clear">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>export let eventData: 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'
}
];Refresh appointments
Update only the appointments without refreshing the entire Scheduler using the refreshEvents public method.
scheduleObj.refreshEvents();This method is useful when changes have been made to the appointment data and those changes need to be reflected in the UI without a full Scheduler refresh.
You can refer to our JavaScript Scheduler feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Scheduler example to knows how to present and manipulate data.