Half yearly view in React Schedule component

30 Aug 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.

• firstMonthOfYear
• monthsCount
• monthHeaderTemplate

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.jsx

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';
const App = () => {
  const eventSettings = { dataSource: resourceData };
  const group = { resources: ['Categories'] };

  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' }
  ];
  const getMonthHeaderText = (props) => {
    return (<div>{props.date.toLocaleString('en-us', { month: 'long' }) + ' ' + props.date.getFullYear()}</div>);
  }
  const 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)} eventSettings={eventSettings} firstMonthOfYear={6} monthsCount={6} group={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 />);

index.tsx

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';

const App = () => {
  const eventSettings = { dataSource: resourceData };
  const group = { resources: ['Categories'] };


  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' }
  ];
  const getMonthHeaderText = (props): JSX.Element => {
    return (<div>{props.date.toLocaleString('en-us', { month: 'long' }) + ' ' + props.date.getFullYear()}</div>);
  }
  const 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)}
    eventSettings={eventSettings}
    firstMonthOfYear={6}
    monthsCount={6}
    group={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 />);

index.html

<!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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/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>