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, firstMonthYear 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: 'long' }) + ' ' + 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 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="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.38/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/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.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>