Half yearly view in EJ2 TypeScript 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.ts
index.html
import { Schedule, Year, TimelineYear, DragAndDrop, Resize } from '@syncfusion/ej2-schedule';
import { Internationalization } from '@syncfusion/ej2-base';
import { resourceData } from './datasource.ts';

Schedule.Inject(Year, TimelineYear, DragAndDrop, Resize);

interface TemplateFunction extends Window {
    getMonthHeaderText?: Function;
}
(window as TemplateFunction).getMonthHeaderText = (date: Date) => { return date.toLocaleString("en-us", { month: "long" }) + " " + date.getFullYear(); };

let scheduleObj: Schedule = new Schedule({
    width: '100%',
    height: '555px',
    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: 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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" /> 
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-schedule/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
    <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/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <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>
</body>

</html>