Half yearly view in React Schedule component
27 Jan 202312 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.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, ViewsDirective, ViewDirective, Resize, DragAndDrop, ResourcesDirective, ResourceDirective, Inject, Year as YearView, TimelineYear } from '@syncfusion/ej2-react-schedule';
import { resourceData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
function App() {
const data = extend([], resourceData, null, true);
const categoriesData = [
{ text: 'Nancy', id: 1, color: '#ffaa00' },
{ text: 'Steven', id: 2, color: '#f8a398' },
{ text: 'Robert', id: 3, color: '#7499e1' },
{ text: 'Smith', id: 4, color: '#5978ee' },
{ text: 'Micheal', id: 5, color: '#df5286' }
];
let scheduleObj;
function getMonthHeaderText(props) {
return (<div>{props.date.toLocaleString('en-us', { month: 'long' }) + ' ' + props.date.getFullYear()}</div>);
}
function resourceHeaderTemplate(props) {
return (<div className="template-wrap">
<div className="resource-details">
<div className="resource-name">{props.resourceData.text}</div>
</div>
</div>);
}
return (<ScheduleComponent width="100%" height="495px" selectedDate={new Date(2021, 7, 15)} ref={schedule => (scheduleObj = schedule)} eventSettings= firstMonthOfYear={6} monthsCount={6} group= resourceHeaderTemplate={resourceHeaderTemplate} monthHeaderTemplate={getMonthHeaderText}>
<ResourcesDirective>
<ResourceDirective field="TaskId" title="Category" name="Categories" allowMultiple={true} dataSource={categoriesData} textField="text" idField="id" colorField="color"/>
</ResourcesDirective>
<ViewsDirective>
<ViewDirective option="Year"/>
<ViewDirective option="TimelineYear" displayName="Horizontal TimelineYear" isSelected={true}/>
<ViewDirective option="TimelineYear" displayName="Vertical TimelineYear" orientation="Vertical"/>
</ViewsDirective>
<Inject services={[YearView, TimelineYear, Resize, DragAndDrop]}/>
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Resize, DragAndDrop, ResourcesDirective, ResourceDirective, Inject, Year as YearView, TimelineYear
} from '@syncfusion/ej2-react-schedule';
import { resourceData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
function App() {
const data: Object[] = extend([], resourceData, null, true) as Object[];
const categoriesData: Object[] = [
{ text: 'Nancy', id: 1, color: '#ffaa00' },
{ text: 'Steven', id: 2, color: '#f8a398' },
{ text: 'Robert', id: 3, color: '#7499e1' },
{ text: 'Smith', id: 4, color: '#5978ee' },
{ text: 'Micheal', id: 5, color: '#df5286' }
];
let scheduleObj: ScheduleComponent;
function getMonthHeaderText(props): JSX.Element {
return (<div>{props.date.toLocaleString('en-us', { month: 'long' }) + ' ' + props.date.getFullYear()}</div>);
}
function resourceHeaderTemplate(props): JSX.Element {
return (
<div className="template-wrap">
<div className="resource-details">
<div className="resource-name">{props.resourceData.text}</div>
</div>
</div>
);
}
return (<ScheduleComponent
width="100%"
height="495px"
selectedDate={new Date(2021, 7, 15)}
ref={schedule => (scheduleObj = schedule)}
eventSettings=
firstMonthOfYear={6}
monthsCount={6}
group=
resourceHeaderTemplate={resourceHeaderTemplate}
monthHeaderTemplate={getMonthHeaderText}
>
<ResourcesDirective>
<ResourceDirective
field="TaskId"
title="Category"
name="Categories"
allowMultiple={true}
dataSource={categoriesData}
textField="text"
idField="id"
colorField="color"
/>
</ResourcesDirective>
<ViewsDirective>
<ViewDirective option="Year" />
<ViewDirective
option="TimelineYear"
displayName="Horizontal TimelineYear"
isSelected={true}
/>
<ViewDirective
option="TimelineYear"
displayName="Vertical TimelineYear"
orientation="Vertical"
/>
</ViewsDirective>
<Inject
services={[YearView, TimelineYear, Resize, DragAndDrop]}
/>
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.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: 18px;
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='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>