JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Show half-yearly view in JavaScript Schedule control

08 May 2023 / 2 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.

Source
Preview
index.ts
index.html
Copied to clipboard
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');
Copied to clipboard
<!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/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" /> 
    <link href="//cdn.syncfusion.com/ej2/21.2.3/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>
</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>
Previous
Next