Search results

Show half-yearly view in React Schedule component

22 Jul 2021 / 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.jsx
index.tsx
index.html
Copied to clipboard
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';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], resourceData, null, true);
        this.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' }
        ];
    }
    getMonthHeaderText(props) {
        return (<div>{props.date.toLocaleString('en-us', { month: 'long' }) + ' ' + props.date.getFullYear()}</div>);
    }
    resourceHeaderTemplate(props) {
        return (<div className="template-wrap">
    <div className="resource-details">
      <div className="resource-name">{props.resourceData.text}</div>
    </div>
  </div>);
    }
    render() {
        return <ScheduleComponent width="100%" height="495px" selectedDate={new Date(2021, 7, 15)} ref={schedule => (this.scheduleObj = schedule)} eventSettings={{ dataSource: this.data }} firstMonthOfYear={6} monthsCount={6} group={{ resources: ['Categories'] }} resourceHeaderTemplate={this.resourceHeaderTemplate.bind(this)} monthHeaderTemplate={this.getMonthHeaderText.bind(this)}>
  <ResourcesDirective>
    <ResourceDirective field="TaskId" title="Category" name="Categories" allowMultiple={true} dataSource={this.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>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
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';

class App extends React.Component<{}, {}>{
   private data: Object[] = extend([], resourceData, null, true) as Object[];
  private 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' }
  ];
  private getMonthHeaderText(props): JSX.Element {
return (<div>{props.date.toLocaleString('en-us', { month: 'long' }) + ' ' + props.date.getFullYear()}</div>);
  }
  private resourceHeaderTemplate(props): JSX.Element {
return (
  <div className="template-wrap">
    <div className="resource-details">
      <div className="resource-name">{props.resourceData.text}</div>
    </div>
  </div>
);
  }
  render() {
return <ScheduleComponent
  width="100%"
  height="495px"
  selectedDate={new Date(2021, 7, 15)}
  ref={schedule => (this.scheduleObj = schedule)}
  eventSettings={{ dataSource: this.data }}
  firstMonthOfYear={6}
  monthsCount={6}
  group={{ resources: ['Categories'] }}
  resourceHeaderTemplate={this.resourceHeaderTemplate.bind(this)}
  monthHeaderTemplate={this.getMonthHeaderText.bind(this)}
>
  <ResourcesDirective>
    <ResourceDirective
      field="TaskId"
      title="Category"
      name="Categories"
      allowMultiple={true}
      dataSource={this.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>
  }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>