Header bar in EJ2 JavaScript Schedule control
12 Jul 202424 minutes to read
The header part of Scheduler can be customized easily with the built-in options available.
Show or Hide header bar
By default, the header bar holds the date and view navigation options, through which the user can switch between the dates and various views. This header bar can be hidden from the UI by setting false to the showHeaderBar property. It’s 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 Component</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Schedule Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-schedule/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>Customizing header bar using template
Apart from the default date navigation and view options available on the header bar, you can add custom items into the Scheduler header bar by making use of the toolbarItems property. To display the default items, it’s essential to assign a name field to each item. The names of the default items are Previous, Next, Today, DateRangeText, NewEvent, and Views. For custom items you can give the name as Custom to the name field. Here, the default items such as previous, next, date range text, and today have been used along with external icon as custom items.
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 Component</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Schedule Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-schedule/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>Customizing header bar using events
Apart from the default date navigation and view options available on the header bar, you can add custom items into the Scheduler header bar by making use of the actionBegin event. Here, an employee image is added to the header bar, clicking on which will open the popup showing that person’s short 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 Component</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Schedule Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-schedule/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>How to display the view options within the header bar popup
By default, the header bar holds the view navigation options, through which the user can switch between various views. You can move this view options to the header bar popup by setting true to the enableAdaptiveUI property.
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 Component</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Schedule Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-schedule/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>Refer here to know more about adaptive UI in resources scheduler.
Date header customization
The Scheduler UI that displays the date text on all views are considered as the date header cells. You can customize the date header cells of Scheduler either using dateRangeTemplate or renderCell event.
Using date header template
The dateRangeTemplate 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 Component</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Schedule Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-schedule/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>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 Component</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Schedule Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-schedule/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>Customizing the date range text
The dateRangeTemplate option allows you to customize the text content of the date range displayed in the scheduler. By default, the date range text is determined by the scheduler view being used. However, you can use the dateRangeTemplate option to override the default text and specify your own custom text to be displayed.
The dateRangeTemplate property includes startDate, endDate and currentView options, you can customize the date range text using these available options.
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 Component</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="Typescript Schedule Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-schedule/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>Customizing header indent cells
It is possible to 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, You can customize the header indent cells at the hierarchy level and you can customize the resource header left indent cell in timeline views using the template option.
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 Component</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Schedule Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-schedule/styles/material.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/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>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.