Half yearly view in EJ2 JavaScript Schedule control

12 Aug 20239 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, firstMonthYear is set to 6 and monthsCount is set to 6 to render only 6 months.
index.js
index.html
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="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet"> 
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/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/23.2.4/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>