Header Bar in JavaScript Scheduler
The Scheduler header can be customized using the built-in options.
Show or Hide header bar
By default, the header bar displays date and view navigation options to switch between dates and views. Hide the header bar by setting the showHeaderBar property to false. Its default value is true.
var scheduleObj = new ej.schedule.Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'WorkWeek'],
showHeaderBar: false,
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Schedule Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Schedule"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>var scheduleData = [
{
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'
}
];Customizing header bar using template
In addition to the default date navigation and view options, you can add custom items to the Scheduler header using the toolbarItems property. To display the default items, assign a name field to each item. The names of the default items are Previous, Next, Today, DateRangeText, NewEvent, and Views. For a custom item, use the name Custom. The example below uses default items together with an external dropdown as a custom item.
var ownerCollections = [
{ OwnerText: 'Margaret', OwnerId: 1, Color: '#ea7a57' },
{ OwnerText: 'Robert', OwnerId: 2, Color: '#df5286' },
{ OwnerText: 'Laura', OwnerId: 3, Color: '#865fcf' }
];
var scheduleObj = new ej.schedule.Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2023, 10, 15),
views: ['Month'],
currentView: 'Month',
resources: [{
field: 'OwnerId', title: 'Owners',
name: 'Owners', allowMultiple: true,
dataSource: ownerCollections,
textField: 'OwnerText', idField: 'OwnerId', colorField: 'Color', query: new ej.data.Query().where('OwnerId', 'equal', 1)
}],
toolbarItems: [{ name: 'Previous', align: 'Left' }, { name: 'Next', align: 'Left' }, { name: 'DateRangeText', align: 'Left' },
{
type: 'Input', align: 'Center', template: new ej.dropdowns.DropDownList({
value: 1, showClearButton: false, width: 125,
fields: { text: 'OwnerText', value: 'OwnerId' },
dataSource: ownerCollections,
change: onChange
})
}, { name: 'Today', align: 'Right' }],
eventSettings: { dataSource: scheduleData, query: new ej.data.Query().where('OwnerId', 'equal', 1) }
});
scheduleObj.appendTo('#Schedule');
function onChange(args) {
var value = args.value;
var resourcePredicate;
resourcePredicate = new ej.data.Predicate('OwnerId', 'equal', value);
scheduleObj.resources[0].query = resourcePredicate ? new ej.data.Query().where(resourcePredicate) :
new ej.data.Query().where('OwnerId', 'equal', 1);
scheduleObj.eventSettings.query = new ej.data.Query().where('OwnerId', 'equal', value);
}<!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/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Schedule"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>var scheduleData = [
{
Id: 1,
Subject: 'Paris',
StartTime: new Date(2023, 9, 29, 10, 0),
EndTime: new Date(2023, 9, 29, 11, 30),
IsAllDay: false,
OwnerId: 1
}, {
Id: 2,
Subject: 'Meeting - 1',
StartTime: new Date(2023, 9, 30, 10, 0),
EndTime: new Date(2023, 9, 30, 12, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 3,
Subject: 'Meeting - 2',
StartTime: new Date(2023, 9, 30, 11, 0),
EndTime: new Date(2023, 9, 30, 14, 30),
IsAllDay: false,
OwnerId: 3
}, {
Id: 4,
StartTime: new Date(2023, 9, 31),
EndTime: new Date(2023, 10, 1),
IsAllDay: true,
OwnerId: 1
}, {
Id: 5,
Subject: 'Conference - 2',
StartTime: new Date(2023, 9, 31, 22, 0),
EndTime: new Date(2023, 10, 1, 0, 0),
IsAllDay: false,
OwnerId: 2
}, {
Id: 6,
Subject: 'Conference - 3',
StartTime: new Date(2023, 10, 1, 9, 30),
EndTime: new Date(2023, 10, 1, 11, 45),
IsAllDay: false,
OwnerId: 3
}, {
Id: 7,
Subject: 'Conference - 4',
StartTime: new Date(2023, 10, 1, 10, 30),
EndTime: new Date(2023, 10, 1, 12, 45),
IsAllDay: false,
OwnerId: 1
}, {
Id: 8,
Subject: 'Travelling',
StartTime: new Date(2023, 10, 1, 11, 30),
EndTime: new Date(2023, 10, 1, 13, 45),
IsAllDay: false,
OwnerId: 2
}, {
Id: 9,
Subject: 'Vacation',
StartTime: new Date(2023, 10, 2, 10, 0),
EndTime: new Date(2023, 10, 2, 12, 30),
IsAllDay: false,
OwnerId: 3
}, {
Id: 10,
Subject: 'Conference',
StartTime: new Date(2023, 10, 2, 15, 30),
EndTime: new Date(2023, 10, 2, 18, 45),
IsAllDay: false,
OwnerId: 1
}, {
Id: 11,
Subject: 'Vacation',
StartTime: new Date(2023, 10, 3, 10, 15),
EndTime: new Date(2023, 10, 3, 14, 45),
IsAllDay: false,
OwnerId: 2
}, {
Id: 12,
Subject: 'Conference',
StartTime: new Date(2023, 10, 4, 9, 30),
EndTime: new Date(2023, 10, 5, 5, 45),
IsAllDay: false,
OwnerId: 3
}, {
Id: 13,
StartTime: new Date(2023, 10, 5, 10, 0),
EndTime: new Date(2023, 10, 5, 11, 30),
IsAllDay: false,
OwnerId: 1
}, {
Id: 14,
Subject: 'Same Time',
StartTime: new Date(2023, 10, 5, 10, 0),
EndTime: new Date(2023, 10, 5, 11, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 15,
Subject: 'Same Time',
StartTime: new Date(2023, 10, 5, 10, 0),
EndTime: new Date(2023, 10, 5, 11, 30),
IsAllDay: false,
OwnerId: 3
}, {
Id: 16,
Subject: 'Same Time',
StartTime: new Date(2023, 10, 5, 10, 0),
EndTime: new Date(2023, 10, 5, 11, 30),
IsAllDay: false,
OwnerId: 1
}, {
Id: 17,
Subject: 'Same Time',
StartTime: new Date(2023, 10, 5, 10, 0),
EndTime: new Date(2023, 10, 5, 11, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 18,
Subject: 'Same Time',
StartTime: new Date(2023, 10, 5, 10, 0),
EndTime: new Date(2023, 10, 5, 11, 30),
IsAllDay: false,
OwnerId: 3
}, {
Id: 19,
Subject: 'Meeting - 1',
StartTime: new Date(2023, 10, 6),
EndTime: new Date(2023, 10, 7),
IsAllDay: true,
OwnerId: 1
}, {
Id: 20,
Subject: 'Meeting - 2',
StartTime: new Date(2023, 10, 6, 11, 0),
EndTime: new Date(2023, 10, 6, 14, 30),
IsAllDay: false,
OwnerId: 3
}, {
Id: 21,
Subject: 'Conference - 1',
StartTime: new Date(2023, 10, 7, 22, 0),
EndTime: new Date(2023, 10, 8, 20, 0),
IsAllDay: true,
OwnerId: 2
}, {
Id: 22,
Subject: 'Conference - 2',
StartTime: new Date(2023, 10, 7, 22, 0),
EndTime: new Date(2023, 10, 14, 23, 0),
IsAllDay: false,
OwnerId: 1
}, {
Id: 23,
Subject: 'Conference - 3',
StartTime: new Date(2023, 10, 8, 9, 30),
EndTime: new Date(2023, 10, 9, 11, 45),
IsAllDay: true,
OwnerId: 2
}, {
Id: 24,
Subject: 'Conference - 3 - A',
StartTime: new Date(2023, 10, 8, 9, 30),
EndTime: new Date(2023, 10, 8, 10, 0),
IsAllDay: true,
OwnerId: 3
}, {
Id: 25,
Subject: 'Conference - 3 - B',
StartTime: new Date(2023, 10, 8, 10, 0),
EndTime: new Date(2023, 10, 8, 10, 30),
IsAllDay: false,
OwnerId: 1
}, {
Id: 26,
Subject: 'Conference - 4',
StartTime: new Date(2023, 10, 8, 10, 30),
EndTime: new Date(2023, 10, 8, 12, 45),
IsAllDay: false,
OwnerId: 2
}, {
Id: 27,
Subject: 'Travelling',
StartTime: new Date(2023, 10, 8, 11, 30),
EndTime: new Date(2023, 10, 8, 13, 45),
IsAllDay: false,
OwnerId: 3
}
];Customizing header bar using events
You can also add header items dynamically using the actionBegin event. The example below adds an employee image to the header; clicking it opens a popup with the person’s profile information.
var scheduleObj = new ej.schedule.Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
views: ['Month'],
currentView: 'Month',
actionBegin: function (args) {
if (args.requestType === 'toolbarItemRendering') {
var userIconItem = {
align: 'Right', prefixIcon: 'user-icon', text: 'Nancy', cssClass: 'e-schedule-user-icon'
};
args.items.push(userIconItem);
}
},
actionComplete: function (args) {
if (args.requestType === 'toolBarItemRendered') {
var userIconEle = scheduleObj.element.querySelector('.e-schedule-user-icon');
userIconEle.onclick = function() {
profilePopup.relateTo = userIconEle;
profilePopup.dataBind();
if (profilePopup.element.classList.contains('e-popup-close')) {
profilePopup.show();
} else {
profilePopup.hide();
}
};
}
},
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');
var userContentEle = new ej.base.createElement('div', {
className: 'e-profile-wrapper'
});
scheduleObj.element.parentElement.appendChild(userContentEle);
var userIconEle = scheduleObj.element.querySelector('.e-schedule-user-icon');
var getDOMString = new ej.base.compile('<div class="profile-container"><div class="profile-image">' +
'</div><div class="content-wrap"><div class="name">Nancy</div>' +
'<div class="destination">Product Manager</div><div class="status">' +
'<div class="status-icon"></div>Online</div></div></div>');
var output = getDOMString({});
var profilePopup = new ej.popups.Popup(userContentEle, {
content: output[0],
relateTo: userIconEle,
position: { X: 'left', Y: 'bottom' },
collision: { X: 'flip', Y: 'flip' },
targetType: 'relative',
viewPortElement: scheduleObj.element,
width: 185,
height: 80
});
profilePopup.hide();<!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/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<style>
.e-schedule .e-schedule-toolbar .user-icon,
.e-profile-wrapper .profile-image {
background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/nancy.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
}
/* csslint ignore:start */
.e-schedule .e-schedule-toolbar .user-icon {
height: 24px;
min-width: 24px !important;
width: 24px !important;
}
/* csslint ignore:end */
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-schedule-user-icon .e-tbar-btn:hover {
background-color: inherit;
}
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-schedule-user-icon .e-tbar-btn-text {
display: none;
}
/* csslint ignore:start */
.e-schedule .e-schedule-toolbar .e-toolbar-pop .e-schedule-user-icon .e-tbar-btn-text {
padding-left: 8px !important;
}
/* csslint ignore:end */
.e-profile-wrapper {
width: 210px;
height: 80px;
background-color: #fafafa;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.e-profile-wrapper .profile-container {
display: flex;
padding: 10px;
}
.e-profile-wrapper .profile-image {
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
width: 60px;
height: 60px;
}
.e-profile-wrapper .content-wrap {
padding-left: 10px;
}
.e-profile-wrapper .name {
font-size: 14px;
line-height: 20px;
font-weight: 500;
margin-top: 2px;
}
.e-profile-wrapper .destination {
font-size: 12px;
}
.e-profile-wrapper .status-icon {
height: 6px;
width: 6px;
background: green;
border-radius: 100%;
float: left;
margin-right: 4px;
margin-top: 4px;
}
.e-profile-wrapper .status {
font-size: 11px;
}
</style>
</head>
<body>
<div id="container">
<div id="Schedule"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>var scheduleData = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 9, 30),
EndTime: new Date(2018, 1, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 19, 11, 0),
EndTime: new Date(2018, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 12, 17, 0),
EndTime: new Date(2018, 1, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 6, 0),
EndTime: new Date(2018, 1, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 16, 0),
EndTime: new Date(2018, 1, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];How to display the view options within the header bar popup
By default, the header bar displays view navigation options. Move the view options into the header bar popup by setting the enableAdaptiveUI property to true.
var scheduleObj = new ej.schedule.Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 1, 15),
enableAdaptiveUI: true,
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Schedule Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Schedule"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>var scheduleData = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 9, 30),
EndTime: new Date(2018, 1, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 19, 11, 0),
EndTime: new Date(2018, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 12, 17, 0),
EndTime: new Date(2018, 1, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 6, 0),
EndTime: new Date(2018, 1, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 16, 0),
EndTime: new Date(2018, 1, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];Refer to Adaptive UI to learn more about adaptive UI in Scheduler.
Date header customization
The date text shown in the Scheduler views is rendered in the date header cells. Customize these cells using the dateHeaderTemplate option or the renderCell event.
Using date header template
The dateHeaderTemplate option is used to customize the date header cells of day, week and work-week views.
var instance = new ej.base.Internationalization();
window.getDateHeaderText = function (value) {
return instance.formatDate(value, { skeleton: 'Ed' });
};
window.getWeather = function (value) {
switch (value.getDay()) {
case 0:
return '<div class="weather-text">25°C</div>';
case 1:
return '<div class="weather-text">18°C</div>';
case 2:
return '<div class="weather-text">10°C</div>';
case 3:
return '<div class="weather-text">16°C</div>';
case 4:
return '<div class="weather-text">8°C</div>';
case 5:
return '<div class="weather-text">27°C</div>';
case 6:
return '<div class="weather-text">17°C</div>';
default:
return null;
}
};
var scheduleObj = new ej.schedule.Schedule({
width: '100%',
height: '550px',
dateHeaderTemplate: '<div class="date-text">${getDateHeaderText(data.date)}</div>${getWeather(data.date)}',
views: ['Day', 'Week', 'Agenda', 'TimelineWorkWeek', 'TimelineMonth'],
selectedDate: new Date(2018, 1, 15),
cssClass: 'schedule-date-header-template',
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/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<style>
.weather-text {
padding: 5px;
color: #e3165b;
font-weight: 500;
}
</style>
</head>
<body>
<div id="container">
<div id="Schedule"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>var scheduleData = [
{
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'
}
];Using renderCell event
In month view, the date header template is not applicable and therefore the same customization can be added beside the date text in month cells by making use of the renderCell event.
window.getWeather = function (value) {
switch (value.getDay()) {
case 0:
return '<div class="weather-text">25°C</div>';
case 1:
return '<div class="weather-text">18°C</div>';
case 2:
return '<div class="weather-text">10°C</div>';
case 3:
return '<div class="weather-text">16°C</div>';
case 4:
return '<div class="weather-text">8°C</div>';
case 5:
return '<div class="weather-text">27°C</div>';
case 6:
return '<div class="weather-text">17°C</div>';
default:
return null;
}
};
var scheduleObj = new ej.schedule.Schedule({
width: '100%',
height: '550px',
views: ['Month'],
selectedDate: new Date(2018, 1, 15),
renderCell: function (args) {
if (args.elementType === 'monthCells' && this.currentView === 'Month') {
var ele = document.createElement('div');
ele.innerHTML = getWeather(args.date);
(args.element).appendChild(ele.firstChild);
}
},
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/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<style>
.weather-text {
float: right;
margin: -20px 2px 0 0;
color: #EA7A57;
}
</style>
</head>
<body>
<div id="container">
<div id="Schedule"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>var scheduleData = [
{
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'
}
];Customizing the date range text
The dateRangeTemplate option allows you to customize the date range text displayed in the Scheduler. By default, the date range text is derived from the current view. Use the dateRangeTemplate options — startDate, endDate, and currentView — to provide custom text.
window.getDateRange = function (value) {
return value.toLocaleString('en-us', { month: 'long' }) + ' ' + value.getFullYear();
};
var scheduleObj = new ej.schedule.Schedule({
width: '100%',
height: '550px',
dateRangeTemplate: '<div class="date-text">${getDateRange(data.startDate)}-${getDateRange(data.endDate)}</div>',
});
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, 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/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Schedule"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>var scheduleData = [
{
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'
}
];
var schedulerData = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2021, 7, 11, 9, 30),
EndTime: new Date(2021, 7, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2021, 7, 12, 12, 0),
EndTime: new Date(2021, 7, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2021, 7, 13, 9, 30),
EndTime: new Date(2021, 7, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2021, 7, 14, 13, 0),
EndTime: new Date(2021, 7, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2021, 7, 15, 12, 0),
EndTime: new Date(2021, 7, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2021, 7, 15, 9, 30),
EndTime: new Date(2021, 7, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2021, 7, 16, 11, 0),
EndTime: new Date(2021, 7, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2021, 7, 17, 9, 0),
EndTime: new Date(2021, 7, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2021, 7, 19, 11, 0),
EndTime: new Date(2021, 7, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2021, 7, 21, 11, 0),
EndTime: new Date(2021, 7, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2021, 7, 22, 9, 30),
EndTime: new Date(2021, 7, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2021, 7, 9, 10, 0),
EndTime: new Date(2021, 7, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2021, 7, 7, 10, 30),
EndTime: new Date(2021, 7, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2021, 7, 5, 10, 0),
EndTime: new Date(2021, 7, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2021, 7, 20, 9, 30),
EndTime: new Date(2021, 7, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2021, 7, 23, 11, 0),
EndTime: new Date(2021, 7, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2021, 7, 12, 5, 30),
EndTime: new Date(2021, 7, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2021, 7, 12, 17, 0),
EndTime: new Date(2021, 7, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2021, 7, 15, 6, 0),
EndTime: new Date(2021, 7, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2021, 7, 15, 16, 0),
EndTime: new Date(2021, 7, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];Customizing header indent cells
Customize the header indent cells using the headerIndentTemplate option and change the look and appearance in both the vertical and timeline views. In vertical views, the template customizes the indent area at the top-left corner where the time column header meets the date headers. In timeline views, it customizes the left indent area that appears before the resource headers.
Example: To customize the header left indent cell to display resources text, refer to the below code example.
var scheduleObj = new ej.schedule.Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 3, 1),
headerIndentTemplate: '#indentTemplate',
views: [
{ option: 'Day' },
{ option: 'Week' },
{ option: 'WorkWeek' },
{ option: 'TimelineWeek' },
{ option: 'TimelineMonth' }
],
group: {
resources: ['Owners']
},
resources: [
{
field: 'OwnerId', title: 'Owner',
name: 'Owners', allowMultiple: true,
dataSource: [
{ OwnerText: 'Nancy', Id: 1, OwnerGroupId: 1, OwnerColor: '#ffaa00' },
{ OwnerText: 'Steven', Id: 2, OwnerGroupId: 2, OwnerColor: '#f8a398' },
{ OwnerText: 'Michael', Id: 3, OwnerGroupId: 1, OwnerColor: '#7499e1' }
],
textField: 'OwnerText', idField: 'Id', groupIDField: 'OwnerGroupId', colorField: 'OwnerColor'
}
],
eventSettings: { dataSource: resourceData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Schedule Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
<style>
.e-schedule .e-timeline-view .e-resource-left-td {
vertical-align: bottom;
}
.e-schedule .e-timeline-view .e-resource-left-td .e-resource-text,
.e-schedule .e-timeline-month-view .e-resource-left-td .e-resource-text {
font-weight: 500;
padding: 0;
}
.e-schedule .e-timeline-view .e-resource-left-td .e-resource-text>div {
border-right: 1px solid rgba(0, 0, 0, 0.12);
border-top: 1px solid rgba(0, 0, 0, 0.12);
flex: 0 0 33.3%;
font-weight: 500;
height: 36px;
line-height: 34px;
padding-left: 50px;
}
.e-schedule .e-timeline-month-view .e-resource-left-td .e-resource-text>div {
border-right: 1px solid rgba(0, 0, 0, 0.12);
flex: 0 0 33.3%;
font-weight: 500;
height: 36px;
line-height: 34px;
padding-left: 50px;
}
/* csslint ignore:start */
.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-resource-cells {
border-bottom-color: rgba(0, 0, 0, 0.12);
}
.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-resource-cells .e-resource-text {
font-weight: 500;
}
.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-header-cells .e-resource-text,
.e-schedule .e-vertical-view .e-left-indent-wrap table tbody td.e-all-day-cells .e-resource-text {
display: none;
}
/* csslint ignore:end */
</style>
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<script id="indentTemplate" type="text/x-template">
<div class='e-resource-text'>
<div class="text">Resources</div>
</div>
</script>
<div id="container">
<div id="Schedule"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>/**
* Schedule datasource spec
*/
var resourceData = [
{
Id: 1,
Subject: 'Workflow Analysis',
StartTime: new Date(2018, 3, 1, 9, 30),
EndTime: new Date(2018, 3, 1, 12, 0),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 2,
Subject: 'Requirement planning',
StartTime: new Date(2018, 3, 1, 12, 30),
EndTime: new Date(2018, 3, 1, 14, 45),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 3,
Subject: 'Quality Analysis',
StartTime: new Date(2018, 3, 2, 10, 0),
EndTime: new Date(2018, 3, 2, 12, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 4,
Subject: 'Resource planning',
StartTime: new Date(2018, 3, 2, 13, 0),
EndTime: new Date(2018, 3, 2, 15, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 5,
Subject: 'Timeline estimation',
StartTime: new Date(2018, 3, 3, 9, 0),
EndTime: new Date(2018, 3, 3, 11, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 6,
Subject: 'Developers Meeting',
StartTime: new Date(2018, 3, 3, 14, 0),
EndTime: new Date(2018, 3, 3, 16, 45),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 7,
Subject: 'Project Review',
StartTime: new Date(2018, 3, 4, 11, 15),
EndTime: new Date(2018, 3, 4, 13, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 8,
Subject: 'Manual testing',
StartTime: new Date(2018, 3, 4, 9, 15),
EndTime: new Date(2018, 3, 4, 11, 45),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 9,
Subject: 'Project Preview',
StartTime: new Date(2018, 3, 5, 9, 30),
EndTime: new Date(2018, 3, 5, 12, 45),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 10,
Subject: 'Cross-browser testing',
StartTime: new Date(2018, 3, 5, 13, 45),
EndTime: new Date(2018, 3, 5, 16, 30),
IsAllDay: false,
OwnerId: 2
}, {
Id: 11,
Subject: 'Bug Automation',
StartTime: new Date(2018, 3, 6, 10, 0),
EndTime: new Date(2018, 3, 6, 12, 15),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 12,
Subject: 'Functionality testing',
StartTime: new Date(2018, 3, 6, 9, 0),
EndTime: new Date(2018, 3, 6, 11, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 13,
Subject: 'Resolution-based testing',
StartTime: new Date(2018, 3, 7, 13, 0),
EndTime: new Date(2018, 3, 7, 15, 15),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 14,
Subject: 'Test report Validation',
StartTime: new Date(2018, 3, 7, 9),
EndTime: new Date(2018, 3, 7, 11),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 15,
Subject: 'Test case correction',
StartTime: new Date(2018, 3, 8, 9, 45),
EndTime: new Date(2018, 3, 8, 11, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 16,
Subject: 'Run test cases',
StartTime: new Date(2018, 3, 8, 10, 30),
EndTime: new Date(2018, 3, 8, 13, 0),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 17,
Subject: 'Quality Analysis',
StartTime: new Date(2018, 3, 9, 12),
EndTime: new Date(2018, 3, 9, 15, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 18,
Subject: 'Debugging',
StartTime: new Date(2018, 3, 9, 9, 0),
EndTime: new Date(2018, 3, 9, 11, 15),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 19,
Subject: 'Exception handling',
StartTime: new Date(2018, 3, 10, 10, 10),
EndTime: new Date(2018, 3, 10, 13, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 20,
Subject: 'Decoding',
StartTime: new Date(2018, 3, 10, 10, 30),
EndTime: new Date(2018, 3, 10, 12, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 21,
Subject: 'workflow Analysis',
StartTime: new Date(2018, 3, 11, 9, 30),
EndTime: new Date(2018, 3, 11, 11, 30),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 22,
Subject: 'Requirement planning',
StartTime: new Date(2018, 3, 11, 12, 30),
EndTime: new Date(2018, 3, 11, 14, 45),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 23,
Subject: 'Quality Analysis',
StartTime: new Date(2018, 3, 12, 10),
EndTime: new Date(2018, 3, 12, 12, 30),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 24,
Subject: 'Resource planning',
StartTime: new Date(2018, 3, 12, 13),
EndTime: new Date(2018, 3, 12, 14, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 25,
Subject: 'Timeline estimation',
StartTime: new Date(2018, 3, 13, 9),
EndTime: new Date(2018, 3, 13, 11),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 26,
Subject: 'Developers Meeting',
StartTime: new Date(2018, 3, 13, 14),
EndTime: new Date(2018, 3, 13, 15, 45),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 27,
Subject: 'Project Review',
StartTime: new Date(2018, 3, 14, 11),
EndTime: new Date(2018, 3, 14, 13),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 28,
Subject: 'Manual testing',
StartTime: new Date(2018, 3, 14, 9),
EndTime: new Date(2018, 3, 14, 11, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 29,
Subject: 'Project Preview',
StartTime: new Date(2018, 3, 15, 9, 30),
EndTime: new Date(2018, 3, 15, 11),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 30,
Subject: 'Cross-browser testing',
StartTime: new Date(2018, 3, 15, 14),
EndTime: new Date(2018, 3, 15, 16, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 31,
Subject: 'Bug Automation',
StartTime: new Date(2018, 3, 16, 10),
EndTime: new Date(2018, 3, 16, 11),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 32,
Subject: 'Functionality testing',
StartTime: new Date(2018, 3, 16, 9),
EndTime: new Date(2018, 3, 16, 11, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 33,
Subject: 'Resolution-based testing',
StartTime: new Date(2018, 3, 17, 14),
EndTime: new Date(2018, 3, 17, 15),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 34,
Subject: 'Test report Validation',
StartTime: new Date(2018, 3, 17, 9),
EndTime: new Date(2018, 3, 17, 11),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 35,
Subject: 'Test case correction',
StartTime: new Date(2018, 3, 18, 10),
EndTime: new Date(2018, 3, 18, 11, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 36,
Subject: 'Run test cases',
StartTime: new Date(2018, 3, 18, 10),
EndTime: new Date(2018, 3, 18, 10, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 37,
Subject: 'Bug fixing',
StartTime: new Date(2018, 3, 9, 10),
EndTime: new Date(2018, 3, 9, 10, 30),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 38,
Subject: 'Debugging',
StartTime: new Date(2018, 3, 19, 9),
EndTime: new Date(2018, 3, 19, 10, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 39,
Subject: 'Exception handling',
StartTime: new Date(2018, 3, 20, 10),
EndTime: new Date(2018, 3, 20, 11),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 40,
Subject: 'Decoding',
StartTime: new Date(2018, 3, 20, 10, 30),
EndTime: new Date(2018, 3, 20, 12, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 41,
Subject: 'workflow Analysis',
StartTime: new Date(2018, 3, 21, 9, 30),
EndTime: new Date(2018, 3, 21, 11, 30),
IsAllDay: false,
OwnerId: 1,RoomId: 1
}, {
Id: 42,
Subject: 'Requirement planning',
StartTime: new Date(2018, 3, 21, 12, 30),
EndTime: new Date(2018, 3, 21, 13, 45),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 43,
Subject: 'Quality Analysis',
StartTime: new Date(2018, 3, 22, 10),
EndTime: new Date(2018, 3, 22, 11, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 44,
Subject: 'Resource planning',
StartTime: new Date(2018, 3, 22, 13),
EndTime: new Date(2018, 3, 22, 14, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 45,
Subject: 'Timeline estimation',
StartTime: new Date(2018, 3, 23, 9),
EndTime: new Date(2018, 3, 23, 10),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 46,
Subject: 'Developers Meeting',
StartTime: new Date(2018, 3, 23, 14),
EndTime: new Date(2018, 3, 23, 15, 45),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 47,
Subject: 'Project Review',
StartTime: new Date(2018, 3, 24, 11),
EndTime: new Date(2018, 3, 24, 12),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 48,
Subject: 'Manual testing',
StartTime: new Date(2018, 3, 24, 9),
EndTime: new Date(2018, 3, 24, 11, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 49,
Subject: 'Project Preview',
StartTime: new Date(2018, 3, 25, 9, 30),
EndTime: new Date(2018, 3, 25, 11),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 50,
Subject: 'Cross-browser testing',
StartTime: new Date(2018, 3, 25, 14),
EndTime: new Date(2018, 3, 25, 15, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 51,
Subject: 'Bug Automation',
StartTime: new Date(2018, 3, 26, 10),
EndTime: new Date(2018, 3, 26, 11),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 52,
Subject: 'Functionality testing',
StartTime: new Date(2018, 3, 26, 9),
EndTime: new Date(2018, 3, 26, 11, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 53,
Subject: 'Resolution-based testing',
StartTime: new Date(2018, 3, 27, 14),
EndTime: new Date(2018, 3, 27, 15),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 54,
Subject: 'Test report Validation',
StartTime: new Date(2018, 3, 27, 9),
EndTime: new Date(2018, 3, 27, 11),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 55,
Subject: 'Test case correction',
StartTime: new Date(2018, 3, 28, 10),
EndTime: new Date(2018, 3, 28, 11, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 56,
Subject: 'Run test cases',
StartTime: new Date(2018, 3, 28, 10),
EndTime: new Date(2018, 3, 28, 10, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 57,
Subject: 'Bug fixing',
StartTime: new Date(2018, 3, 29, 12),
EndTime: new Date(2018, 3, 29, 12, 30),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 58,
Subject: 'Debugging',
StartTime: new Date(2018, 3, 29, 9),
EndTime: new Date(2018, 3, 29, 10, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 59,
Subject: 'Exception handling',
StartTime: new Date(2018, 3, 30, 10),
EndTime: new Date(2018, 3, 30, 11),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 60,
Subject: 'Decoding',
StartTime: new Date(2018, 3, 30, 10, 30),
EndTime: new Date(2018, 3, 30, 12, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}
];Refer to the JavaScript Scheduler feature tour page for comprehensive feature demonstrations. You can also explore the JavaScript Scheduler example for practical implementations of data presentation and manipulation.