Having trouble getting help?
Contact Support
Contact Support
Half yearly view in EJ2 JavaScript Scheduler control
18 Mar 20259 minutes to read
The year view of our scheduler displays all the 365 days and their related appointments of a particular year. You can customize the year view by using the following properties.
In the following code example, you can see how to render only the last six months of a year in the scheduler. To start with the month of June, firstMonthOfYear
is set to 6 and monthsCount
is set to 6 to render only 6 months.
window.getMonthHeaderText = function (date) {
return date.toLocaleString('en-us', { month: 'short' }) + ' ' + date.getFullYear();
};
var data = new ej.base.extend([], window.resourceData, null, true);
var scheduleObj = new ej.schedule.Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2021, 7, 4),
firstMonthOfYear: 6,
monthsCount: 6,
monthHeaderTemplate: '<div class="date-text">${getMonthHeaderText(data.date)}</div>',
resourceHeaderTemplate: '#resourceTemplate',
views: [
{ option: 'Year' },
{ option: 'TimelineYear', displayName: 'Horizontal Year', isSelected: true },
{ option: 'TimelineYear', displayName: 'Vertical Year', orientation: 'Vertical' }
],
group: {
resources: ['Projects', 'Categories']
},
resources: [
{
field: 'ProjectId', title: 'Choose Project', name: 'Projects',
dataSource: [
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2' },
{ text: 'PROJECT 2', id: 2, color: '#56ca85' },
{ text: 'PROJECT 3', id: 3, color: '#df5286' }
],
textField: 'text', idField: 'id', colorField: 'color'
}, {
field: 'TaskId', title: 'Category',
name: 'Categories', allowMultiple: true,
dataSource: [
{ text: 'Nancy', id: 1, groupId: 1, color: '#df5286' },
{ text: 'Steven', id: 2, groupId: 2, color: '#7fa900' },
{ text: 'Robert', id: 3, groupId: 3, color: '#ea7a57' },
{ text: 'Smith', id: 4, groupId: 1, color: '#5978ee' },
{ text: 'Micheal', id: 5, groupId: 2, color: '#df5286' },
{ text: 'Root', id: 6, groupId: 3, color: '#00bdae' }
],
textField: 'text', idField: 'id', groupIDField: 'groupId', colorField: 'color'
}
],
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/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-schedule/styles/material.css" rel="stylesheet">
<style>
.e-schedule .e-vertical-view .e-resource-cells {
height: 62px;
}
.e-schedule .template-wrap {
display: flex;
text-align: left;
}
.e-schedule .template-wrap .resource-details {
padding-left: 10px;
}
.e-schedule .template-wrap .resource-details .resource-name {
font-size: 14px;
font-weight: 500;
margin-top: 5px;
}
.e-schedule.e-device .template-wrap .resource-details .resource-name {
font-size: inherit;
font-weight: inherit;
}
.e-schedule.e-device .e-resource-tree-popup .e-fullrow {
height: 50px;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/30.1.37/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="resourceTemplate" type="text/x-template">
<div class='template-wrap'>
<div class="resource-details">
<div class="resource-name">${resourceData.text}</div>
</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>