Header Customization in React Scheduler

The header part of the Scheduler can be customized easily with the built-in options available. This section covers hiding the header bar, adding custom toolbar items, configuring adaptive UI, and customizing date header cells.

Show or hide header bar

By default, the header bar holds the date and view navigation options, through which the user can switch between dates and various views. This header bar can be hidden from the UI by setting false to the showHeaderBar property. Its default value is true.

Note: When the header bar is hidden, programmatic view navigation is still available through the Scheduler’s public methods like selectedDate and the currentView properties.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Inject, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
  const eventSettings = { dataSource: scheduleData };

  return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} showHeaderBar={false} eventSettings={eventSettings}>
    <ViewsDirective>
      <ViewDirective option='Day' />
      <ViewDirective option='Week' />
      <ViewDirective option='WorkWeek' />
    </ViewsDirective>
    <Inject services={[Day, Week, WorkWeek]} />
  </ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from "react-dom";
import {
  ScheduleComponent, Day, Week, WorkWeek, Inject, ViewsDirective, ViewDirective, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

const App = () => {
  const eventSettings: EventSettingsModel = { dataSource: scheduleData };

  return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} showHeaderBar={false} eventSettings={eventSettings} >
    <ViewsDirective>
      <ViewDirective option='Day' />
      <ViewDirective option='Week' />
      <ViewDirective option='WorkWeek' />
    </ViewsDirective>
    <Inject services={[Day, Week, WorkWeek]} />
  </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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.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%;
        }
    </style>
</head>

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

</html>

Customizing header bar using template

Apart from the default date navigation and view options on the header bar, you can add custom items into the Scheduler header bar by making use of the toolbarItems property. To display the default items, it’s Essential^® to assign a name field to each item. The names of the default items are Previous, Next, Today, DateRangeText, NewEvent, and Views. For custom items you can give the name as Custom to the name field.

Default toolbar items and their functions:

Item Name	Description
`Previous`	Navigates to the previous date range
`Next`	Navigates to the next date range
`Today`	Navigates to the current date
`DateRangeText`	Displays the current date range
`NewEvent`	Opens the event editor to create a new event
`Views`	Displays view navigation options
`Custom`	User-defined custom toolbar item

The following example uses the default items Previous, Next, DateRangeText, and Today along with a DropdownList as a custom item.

index.jsx
index.tsx
index.html
datasource.jsx
datasource.tsx
import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, ViewsDirective, ViewDirective, ResourcesDirective, ResourceDirective, Month, Inject, Resize, DragAndDrop, ToolbarItemsDirective, ToolbarItemDirective } from '@syncfusion/ej2-react-schedule';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { Predicate, Query } from '@syncfusion/ej2-data';
import { scheduleData } from './datasource';

const App = () => {
    const schedule = useRef(null);
    const eventSettings = { dataSource: scheduleData, query: new Query().where('OwnerId', 'equal', 1) };
    const ownerData = [
        { OwnerText: 'Margaret', OwnerId: 1, Color: '#ea7a57' },
        { OwnerText: 'Robert', OwnerId: 2, Color: '#df5286' },
        { OwnerText: 'Laura', OwnerId: 3, Color: '#865fcf' }
    ];
    const fields = { text: 'OwnerText', value: 'OwnerId' };

    const template = () => {
        return (<DropDownListComponent id='ddlelement' dataSource={ownerData} fields={fields} value={1} change={OnChange} />);
    };

    const OnChange = (args) => {
        let predicate;
        predicate = new Predicate('OwnerId', 'equal', parseInt(args.value, 10));
        schedule.current.eventSettings.query = new Query().where(predicate);
    };

    return (<ScheduleComponent cssClass='schedule-header-bar' width='100%' height='650px' id='schedule' ref={schedule} selectedDate={new Date(2024, 11, 15)} eventSettings={eventSettings}>
        <ResourcesDirective>
            <ResourceDirective field='OwnerId' title='Owner' name='Owners' dataSource={ownerData} textField='OwnerText' idField='OwnerId' groupIDField='GroupId' colorField='Color'>
            </ResourceDirective>
        </ResourcesDirective>
        <ViewsDirective>
            <ViewDirective option='Month' />
        </ViewsDirective>
        <Inject services={[Month, Resize, DragAndDrop]} />
        <ToolbarItemsDirective>
            <ToolbarItemDirective name='Previous' align='Left'></ToolbarItemDirective>
            <ToolbarItemDirective name='Next' align='Left'></ToolbarItemDirective>
            <ToolbarItemDirective name='DateRangeText' align='Left'></ToolbarItemDirective>
            <ToolbarItemDirective name='Today' align='Right'></ToolbarItemDirective>
            <ToolbarItemDirective align='Center' template={template}></ToolbarItemDirective>
        </ToolbarItemsDirective>
    </ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, EventSettingsModel, ViewsDirective, ViewDirective, ResourcesDirective, ResourceDirective, Month, Inject, Resize, DragAndDrop, ToolbarItemsDirective, ToolbarItemDirective } from '@syncfusion/ej2-react-schedule';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { Predicate, Query } from '@syncfusion/ej2-data';
import { scheduleData } from './datasource';

const App = () => {
  const schedule = useRef<ScheduleComponent>(null);
  const eventSettings: EventSettingsModel = { dataSource: scheduleData, query: new Query().where('OwnerId', 'equal', 1) };
  const ownerData: { [key: string]: Object }[] = [
    { OwnerText: 'Margaret', OwnerId: 1, Color: '#ea7a57' },
    { OwnerText: 'Robert', OwnerId: 2, Color: '#df5286' },
    { OwnerText: 'Laura', OwnerId: 3, Color: '#865fcf' }
  ];
  const fields: object = { text: 'OwnerText', value: 'OwnerId' };

  const template = () => {
    return (<DropDownListComponent id='ddlelement' dataSource={ownerData} fields={fields} value={1} change={OnChange} />);
  };

  const OnChange = (args: ChangeEventArgs) => {
    let predicate: Predicate;
    predicate = new Predicate('OwnerId', 'equal', parseInt(args.value as string, 10));
    if (schedule.current) {
      schedule.current.eventSettings.query = new Query().where(predicate);
    }
  };

  return (<ScheduleComponent width='100%' height='650px' id='schedule' ref={schedule} selectedDate={new Date(2024, 11, 15)} eventSettings={eventSettings}>
    <ResourcesDirective>
      <ResourceDirective field='OwnerId' title='Owner' name='Owners' dataSource={ownerData} textField='OwnerText' idField='OwnerId' groupIDField='GroupId' colorField='Color'>
      </ResourceDirective>
    </ResourcesDirective>
    <ViewsDirective>
      <ViewDirective option='Month' />
    </ViewsDirective>
    <Inject services={[Month, Resize, DragAndDrop]} />
    <ToolbarItemsDirective>
      <ToolbarItemDirective name='Previous' align='Left'></ToolbarItemDirective>
      <ToolbarItemDirective name='Next' align='Left'></ToolbarItemDirective>
      <ToolbarItemDirective name='DateRangeText' align='Left'></ToolbarItemDirective>
      <ToolbarItemDirective name='Today' align='Right'></ToolbarItemDirective>
      <ToolbarItemDirective align='Center' template={template}></ToolbarItemDirective>
    </ToolbarItemsDirective>
  </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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.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%;
        }
    </style>
</head>

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

</html>
/**
 * Schedule datasource spec
 */
export let scheduleData = [
    {
        Id: 1,
        Subject: 'Paris',
        StartTime: new Date(2024, 11, 5, 10, 0),
        EndTime: new Date(2024, 11, 5, 11, 30),
        IsAllDay: false,
        OwnerId: 1
    },
    {
        Id: 2,
        Subject: 'Meeting - 1',
        StartTime: new Date(2024, 11, 6, 10, 0),
        EndTime: new Date(2024, 11, 6, 12, 30),
        IsAllDay: false,
        OwnerId: 2
    },
    {
        Id: 3,
        Subject: 'Meeting - 2',
        StartTime: new Date(2024, 11, 6, 11, 0),
        EndTime: new Date(2024, 11, 6, 14, 30),
        IsAllDay: false,
        OwnerId: 3
    },
    {
        Id: 4,
        StartTime: new Date(2024, 11, 7),
        EndTime: new Date(2024, 11, 8),
        IsAllDay: true,
        OwnerId: 1
    },
    {
        Id: 5,
        Subject: 'Conference - 2',
        StartTime: new Date(2024, 11, 7, 22, 0),
        EndTime: new Date(2024, 11, 8, 0, 0),
        IsAllDay: false,
        OwnerId: 2
    },
    {
        Id: 6,
        Subject: 'Conference - 3',
        StartTime: new Date(2024, 11, 8, 9, 30),
        EndTime: new Date(2024, 11, 8, 11, 45),
        IsAllDay: false,
        OwnerId: 3
    },
    {
        Id: 7,
        Subject: 'Conference - 4',
        StartTime: new Date(2024, 11, 8, 10, 30),
        EndTime: new Date(2024, 11, 8, 12, 45),
        IsAllDay: false,
        OwnerId: 1
    },
    {
        Id: 8,
        Subject: 'Travelling',
        StartTime: new Date(2024, 11, 8, 11, 30),
        EndTime: new Date(2024, 11, 8, 13, 45),
        IsAllDay: false,
        OwnerId: 2
    },
    {
        Id: 9,
        Subject: 'Vacation',
        StartTime: new Date(2024, 11, 9, 10, 0),
        EndTime: new Date(2024, 11, 9, 12, 30),
        IsAllDay: false,
        OwnerId: 3
    },
    {
        Id: 10,
        Subject: 'Conference',
        StartTime: new Date(2024, 11, 9, 15, 30),
        EndTime: new Date(2024, 11, 9, 18, 45),
        IsAllDay: false,
        OwnerId: 1
    },
    {
        Id: 11,
        Subject: 'Vacation',
        StartTime: new Date(2024, 11, 10, 10, 15),
        EndTime: new Date(2024, 11, 10, 14, 45),
        IsAllDay: false,
        OwnerId: 2
    },
    {
        Id: 12,
        Subject: 'Conference',
        StartTime: new Date(2024, 11, 11, 9, 30),
        EndTime: new Date(2024, 11, 12, 5, 45),
        IsAllDay: false,
        OwnerId: 3
    },
    {
        Id: 13,
        Subject: 'Same Time',
        StartTime: new Date(2024, 11, 12, 10, 0),
        EndTime: new Date(2024, 11, 12, 11, 30),
        IsAllDay: false,
        OwnerId: 1
    },
    {
        Id: 14,
        Subject: 'Same Time',
        StartTime: new Date(2024, 11, 12, 10, 0),
        EndTime: new Date(2024, 11, 12, 11, 30),
        IsAllDay: false,
        OwnerId: 2
    },
    {
        Id: 15,
        Subject: 'Meeting - 1',
        StartTime: new Date(2024, 11, 13),
        EndTime: new Date(2024, 11, 14),
        IsAllDay: true,
        OwnerId: 3
    }
];
/**
 * Schedule datasource spec
 */

export let scheduleData: Object[] = [
    {
        Id: 1,
        Subject: 'Paris',
        StartTime: new Date(2024, 11, 5, 10, 0),
        EndTime: new Date(2024, 11, 5, 11, 30),
        IsAllDay: false,
        OwnerId: 1
    },
    {
        Id: 2,
        Subject: 'Meeting - 1',
        StartTime: new Date(2024, 11, 6, 10, 0),
        EndTime: new Date(2024, 11, 6, 12, 30),
        IsAllDay: false,
        OwnerId: 2
    },
    {
        Id: 3,
        Subject: 'Meeting - 2',
        StartTime: new Date(2024, 11, 6, 11, 0),
        EndTime: new Date(2024, 11, 6, 14, 30),
        IsAllDay: false,
        OwnerId: 3
    },
    {
        Id: 4,
        StartTime: new Date(2024, 11, 7),
        EndTime: new Date(2024, 11, 8),
        IsAllDay: true,
        OwnerId: 1
    },
    {
        Id: 5,
        Subject: 'Conference - 2',
        StartTime: new Date(2024, 11, 7, 22, 0),
        EndTime: new Date(2024, 11, 8, 0, 0),
        IsAllDay: false,
        OwnerId: 2
    },
    {
        Id: 6,
        Subject: 'Conference - 3',
        StartTime: new Date(2024, 11, 8, 9, 30),
        EndTime: new Date(2024, 11, 8, 11, 45),
        IsAllDay: false,
        OwnerId: 3
    },
    {
        Id: 7,
        Subject: 'Conference - 4',
        StartTime: new Date(2024, 11, 8, 10, 30),
        EndTime: new Date(2024, 11, 8, 12, 45),
        IsAllDay: false,
        OwnerId: 1
    },
    {
        Id: 8,
        Subject: 'Travelling',
        StartTime: new Date(2024, 11, 8, 11, 30),
        EndTime: new Date(2024, 11, 8, 13, 45),
        IsAllDay: false,
        OwnerId: 2
    },
    {
        Id: 9,
        Subject: 'Vacation',
        StartTime: new Date(2024, 11, 9, 10, 0),
        EndTime: new Date(2024, 11, 9, 12, 30),
        IsAllDay: false,
        OwnerId: 3
    },
    {
        Id: 10,
        Subject: 'Conference',
        StartTime: new Date(2024, 11, 9, 15, 30),
        EndTime: new Date(2024, 11, 9, 18, 45),
        IsAllDay: false,
        OwnerId: 1
    },
    {
        Id: 11,
        Subject: 'Vacation',
        StartTime: new Date(2024, 11, 10, 10, 15),
        EndTime: new Date(2024, 11, 10, 14, 45),
        IsAllDay: false,
        OwnerId: 2
    },
    {
        Id: 12,
        Subject: 'Conference',
        StartTime: new Date(2024, 11, 11, 9, 30),
        EndTime: new Date(2024, 11, 12, 5, 45),
        IsAllDay: false,
        OwnerId: 3
    },
    {
        Id: 13,
        Subject: 'Same Time',
        StartTime: new Date(2024, 11, 12, 10, 0),
        EndTime: new Date(2024, 11, 12, 11, 30),
        IsAllDay: false,
        OwnerId: 1
    },
    {
        Id: 14,
        Subject: 'Same Time',
        StartTime: new Date(2024, 11, 12, 10, 0),
        EndTime: new Date(2024, 11, 12, 11, 30),
        IsAllDay: false,
        OwnerId: 2
    },
    {
        Id: 15,
        Subject: 'Meeting - 1',
        StartTime: new Date(2024, 11, 13),
        EndTime: new Date(2024, 11, 14),
        IsAllDay: true,
        OwnerId: 3
    }
];

Customizing header bar using event

Apart from the default date navigation and view options available on the header bar, you can add custom items into the Scheduler header bar by making use of the actionBegin event. Here, an employee image is added to the header bar. Clicking on this image will open a popup showing that person’s short profile information.

Tip: The actionBegin event fires before any toolbar action is processed. Use this event to inject custom UI elements dynamically when the toolbar is rendered.

index.jsx
index.tsx
index.html
import { useRef, useEffect } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, ViewsDirective, ViewDirective, Month, Inject } from '@syncfusion/ej2-react-schedule';
import { createElement, compile } from '@syncfusion/ej2-base';
import { Popup } from '@syncfusion/ej2-popups';
import { scheduleData } from './datasource';

const App = () => {
    const schedule = useRef(null);
    const eventSettings = { dataSource: scheduleData };
    let profilePopup;
    const onActionBegin = (args) => {
        if (args.requestType === 'toolbarItemRendering') {
            const userIconItem = {
                align: 'Right', prefixIcon: 'user-icon', text: 'Nancy', cssClass: 'e-schedule-user-icon'
            };
            args.items.push(userIconItem);
        }
    }

    const onActionComplete = (args) => {
        const scheduleElement = document.getElementById('schedule');
        if (args.requestType === 'toolBarItemRendered' && scheduleElement) {
            const userIconEle = scheduleElement.querySelector('.e-schedule-user-icon');
            if (userIconEle) {
                userIconEle.onclick = () => {
                    if (profilePopup) {
                        profilePopup.relateTo = userIconEle;
                        profilePopup.dataBind();
                        if (profilePopup.element.classList.contains('e-popup-close')) {
                            profilePopup.show();
                        } else {
                            profilePopup.hide();
                        }
                    }
                };
            }
        }
    }

    useEffect(() => {
        const scheduleElement = schedule.current.element;
        let profilePopup;
        if (scheduleElement) {
            const userContentEle = createElement('div', {
                className: 'e-profile-wrapper'
            });
            scheduleElement.parentElement?.appendChild(userContentEle);
            const userIconEle = scheduleElement.querySelector('.e-schedule-user-icon');
            const getDOMString = compile('<div class="profile-container"><div class="profile-image">' +
                '</div><div class="content-wrap"><div class="name">Nancy</div>' +
                '<div class="destination">Product Manager</div><div class="status">' +
                '<div class="status-icon"></div>Online</div></div></div>');
            const output = getDOMString({});
            profilePopup = new Popup(userContentEle, {
                content: output[0],
                relateTo: userIconEle,
                position: { X: 'left', Y: 'bottom' },
                collision: { X: 'flip', Y: 'flip' },
                targetType: 'relative',
                viewPortElement: scheduleElement,
                width: 185,
                height: 80
            });
            profilePopup.hide();
        }
    }, []);
    return (<ScheduleComponent cssClass='schedule-header-bar' width='100%' height='550px' ref={schedule}
        selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}
        actionBegin={onActionBegin} actionComplete={onActionComplete}>
        <ViewsDirective>
            <ViewDirective option='Month' />
        </ViewsDirective>
        <Inject services={[Month]} />
    </ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import { useRef, useEffect } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, ViewsDirective, ViewDirective, Month, Inject, ActionEventArgs, ToolbarActionArgs, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { createElement, compile } from '@syncfusion/ej2-base';
import { ItemModel } from '@syncfusion/ej2-react-navigations';
import { Popup } from '@syncfusion/ej2-popups';
import { scheduleData } from './datasource';

const App = () => {
  const schedule = useRef<ScheduleComponent>(null);
  const eventSettings: EventSettingsModel = { dataSource: scheduleData };
  let profilePopup: Popup;
  const onActionBegin = (args: ActionEventArgs & ToolbarActionArgs): void => {
    if (args.requestType === 'toolbarItemRendering') {
      const userIconItem: ItemModel = {
        align: 'Right', prefixIcon: 'user-icon', text: 'Nancy', cssClass: 'e-schedule-user-icon'
      };
      args.items.push(userIconItem);
    }
  }

  const onActionComplete = (args: ActionEventArgs): void => {
    const scheduleElement: HTMLElement = document.getElementById('schedule');
    if (args.requestType === 'toolBarItemRendered' && scheduleElement) {
      const userIconEle: HTMLElement = scheduleElement.querySelector('.e-schedule-user-icon');
      if (userIconEle) {
        userIconEle.onclick = () => {
          if (profilePopup) {
            profilePopup.relateTo = userIconEle;
            profilePopup.dataBind();
            if (profilePopup.element.classList.contains('e-popup-close')) {
              profilePopup.show();
            } else {
              profilePopup.hide();
            }
          }
        };
      }
    }
  }

  useEffect(() => {
    const scheduleElement: HTMLElement = schedule.current.element;
    let profilePopup: Popup;
    if (scheduleElement) {
      const userContentEle: HTMLElement = createElement('div', {
        className: 'e-profile-wrapper'
      });
      scheduleElement.parentElement.appendChild(userContentEle);
      const userIconEle: HTMLElement | null = scheduleElement.querySelector('.e-schedule-user-icon');
      const getDOMString: (data: object) => NodeList = compile('<div class="profile-container"><div class="profile-image">' +
        '</div><div class="content-wrap"><div class="name">Nancy</div>' +
        '<div class="destination">Product Manager</div><div class="status">' +
        '<div class="status-icon"></div>Online</div></div></div>');
      const output: NodeList = getDOMString({});
      profilePopup = new Popup(userContentEle, {
        content: output[0] as HTMLElement,
        relateTo: userIconEle,
        position: { X: 'left', Y: 'bottom' },
        collision: { X: 'flip', Y: 'flip' },
        targetType: 'relative',
        viewPortElement: scheduleElement,
        width: 185,
        height: 80
      });
      profilePopup.hide();
    }
  }, []);
  return (<ScheduleComponent cssClass='schedule-header-bar' width='100%' height='550px' ref={schedule}
    selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}
    actionBegin={onActionBegin} actionComplete={onActionComplete}>
    <ViewsDirective>
      <ViewDirective option='Month' />
    </ViewsDirective>
    <Inject services={[Month]} />
  </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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.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%;
        }
    </style>
</head>

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

</html>

By default, the header bar holds the view navigation options, through which the user can switch between various views. You can move these view options to the header bar popup by setting true to the enableAdaptiveUI property.

Note: When enableAdaptiveUI is true, the view options appear in a popup menu accessible from the header bar. This is particularly useful for compact layouts or when the Scheduler is rendered in a smaller container.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
  const eventSettings = { dataSource: scheduleData };

  return (<ScheduleComponent width='100%' height='500px' selectedDate={new Date(2018, 1, 15)} enableAdaptiveUI={true} eventSettings={eventSettings}>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
  </ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

const App = () => {
  const eventSettings: EventSettingsModel = { dataSource: scheduleData };

  return (<ScheduleComponent width='100%' height='500px' selectedDate={new Date(2018, 1, 15)} enableAdaptiveUI={true} eventSettings={eventSettings}>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
  </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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.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%;
        }
    </style>
</head>

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

</html>

Refer here to know more about adaptive UI in resources scheduler.

Tip: Adaptive UI automatically adjusts the Scheduler’s layout based on the available screen space, providing a better user experience on smaller devices.

Date header customization

The Scheduler UI that displays the date text on all views are considered as the date header cells. You can customize the date header cells of the Scheduler either using dateHeaderTemplate or renderCell event.

Available customization approaches:

Approach	Applicable Views	Use Case
`dateHeaderTemplate`	Day, Week, Work Week, Timeline	Template-based customization with full HTML control
`renderCell` event	All views including Month	Programmatic customization based on cell data

Using date header template

The dateHeaderTemplate option is used to customize the date header cells of day, week, work-week and timeline views.

index.jsx
index.tsx
index.html
index.css
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Inject, TimelineViews } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { Internationalization } from '@syncfusion/ej2-base';
const App = () => {
    const eventSettings = { dataSource: scheduleData };
    const instance = new Internationalization();
    const getDateHeaderText = (value) => {
        return instance.formatDate(value, { skeleton: 'Ed' });
    }
    const getWeather = (value) => {
        switch (value.getDay()) {
            case 0:
                return '<div class="weather-text">25°C</div>';
            case 1:
                return '<div class="weather-text">18°C</div>';
            case 2:
                return '<div class="weather-text">10°C</div>';
            case 3:
                return '<div class="weather-text">16°C</div>';
            case 4:
                return '<div class="weather-text">8°C</div>';
            case 5:
                return '<div class="weather-text">27°C</div>';
            case 6:
                return '<div class="weather-text">17°C</div>';
            default:
                return null;
        }
    }
    const dateHeaderTemplate = (props) => {
        return (<div><div>{getDateHeaderText(props.date)}</div><div className="date-text" dangerouslySetInnerHTML=></div></div>);
    }
    return (<ScheduleComponent width='100%' height='550px' cssClass='schedule-date-header-template' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} dateHeaderTemplate={dateHeaderTemplate}>
        <ViewsDirective>
            <ViewDirective option='Day' />
            <ViewDirective option='Week' />
            <ViewDirective option='WorkWeek' />
            <ViewDirective option='TimelineWeek' />
        </ViewsDirective>
        <Inject services={[Day, Week, WorkWeek, TimelineViews]} />
    </ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Inject, TimelineViews } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { Internationalization } from '@syncfusion/ej2-base';

const App = () => {
  const eventSettings = { dataSource: scheduleData };
  const instance: Internationalization = new Internationalization();
  const getDateHeaderText = (value: Date): string => {
    return instance.formatDate(value, { skeleton: 'Ed' });
  }
  const getWeather = (value: Date) => {
    switch (value.getDay()) {
      case 0:
        return '<div class="weather-text">25°C</div>';
      case 1:
        return '<div class="weather-text">18°C</div>';
      case 2:
        return '<div class="weather-text">10°C</div>';
      case 3:
        return '<div class="weather-text">16°C</div>';
      case 4:
        return '<div class="weather-text">8°C</div>';
      case 5:
        return '<div class="weather-text">27°C</div>';
      case 6:
        return '<div class="weather-text">17°C</div>';
      default:
        return null;
    }
  }
  const dateHeaderTemplate = (props): JSX.Element => {
    return (<div><div>{getDateHeaderText(props.date)}</div><div className="date-text" dangerouslySetInnerHTML=></div></div>);
  }

  return (<ScheduleComponent width='100%' height='550px' cssClass='schedule-date-header-template'
    selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}
    dateHeaderTemplate={dateHeaderTemplate}>
    <ViewsDirective>
      <ViewDirective option='Day' />
      <ViewDirective option='Week' />
      <ViewDirective option='WorkWeek' />
      <ViewDirective option='TimelineWeek' />
    </ViewsDirective>
    <Inject services={[Day, Week, WorkWeek, TimelineViews]} />
  </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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.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%;
        }
    </style>
</head>

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

</html>
/* csslint ignore:start */

.schedule-date-header-template.e-schedule .e-vertical-view .e-header-cells {
    padding: 0;
    text-align: center !important;
}   

.schedule-date-header-template.e-schedule .date-text {
    font-size: 14px;
}

.schedule-date-header-template.e-schedule.e-device .date-text {
    font-size: 12px;
}

.schedule-date-header-template.e-schedule .weather-text {
    font-size: 11px;
}

.schedule-date-header-template.e-schedule .e-month-view .weather-text {
    float: right;
    margin: -20px 2px 0 0;
    width: 20px;
    height: 20px;
}

/* csslint ignore:end */

Using renderCell event

In month view, the date header template is not applicable and therefore the same customization can be added beside the date text in month cells by making use of the renderCell event.

Note: The renderCell event provides access to cell details such as the date, current view, and element type, allowing dynamic customization based on context.

index.jsx
index.tsx
index.html
index.css
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Month, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
    const eventSettings = { dataSource: scheduleData };
    const getWeather = (value) => {
        switch (value.getDay()) {
            case 0:
                return '<div class="weather-text">25°C</div>';
            case 1:
                return '<div class="weather-text">18°C</div>';
            case 2:
                return '<div class="weather-text">10°C</div>';
            case 3:
                return '<div class="weather-text">16°C</div>';
            case 4:
                return '<div class="weather-text">8°C</div>';
            case 5:
                return '<div class="weather-text">27°C</div>';
            case 6:
                return '<div class="weather-text">17°C</div>';
            default:
                return null;
        }
    }
    const onRenderCell = (args) => {
        if (args.elementType === 'monthCells') {
            let ele = document.createElement('div');
            ele.innerHTML = getWeather(args.date);
            (args.element).appendChild(ele.firstChild);
        }
    }
    return (<ScheduleComponent width='100%' height='550px' cssClass='schedule-date-header-template' renderCell={onRenderCell} selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
        <ViewsDirective>
            <ViewDirective option='Month' />
        </ViewsDirective>
        <Inject services={[Month]} />
    </ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, View, Month, RenderCellEventArgs, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

const App = () => {
  const eventSettings = { dataSource: scheduleData };
  const getWeather = (value: Date) => {
    switch (value.getDay()) {
      case 0:
        return '<div class="weather-text">25°C</div>';
      case 1:
        return '<div class="weather-text">18°C</div>';
      case 2:
        return '<div class="weather-text">10°C</div>';
      case 3:
        return '<div class="weather-text">16°C</div>';
      case 4:
        return '<div class="weather-text">8°C</div>';
      case 5:
        return '<div class="weather-text">27°C</div>';
      case 6:
        return '<div class="weather-text">17°C</div>';
      default:
        return null;
    }
  }
  const onRenderCell = (args: RenderCellEventArgs): void => {
    if (args.elementType === 'monthCells') {
      let ele: Element = document.createElement('div');
      ele.innerHTML = getWeather(args.date);
      (args.element).appendChild(ele.firstChild);
    }
  }

  return (<ScheduleComponent width='100%' height='550px' cssClass='schedule-date-header-template'
    renderCell={onRenderCell} selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
    <ViewsDirective>
      <ViewDirective option='Month' />
    </ViewsDirective>
    <Inject services={[Month]} />
  </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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.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%;
        }
    </style>
</head>

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

</html>
/* csslint ignore:start */

.schedule-date-header-template.e-schedule .e-vertical-view .e-header-cells {
    padding: 0;
    text-align: center !important;
}   

.schedule-date-header-template.e-schedule .date-text {
    font-size: 14px;
}

.schedule-date-header-template.e-schedule.e-device .date-text {
    font-size: 12px;
}

.schedule-date-header-template.e-schedule .weather-text {
    font-size: 11px;
}

.schedule-date-header-template.e-schedule .e-month-view .weather-text {
    float: right;
    margin: -20px 2px 0 0;
    width: 20px;
    height: 20px;
}

/* csslint ignore:end */

Customizing the date range text

The dateRangeTemplate option allows you to customize the text content of the date range displayed in the scheduler. By default, the date range text is determined by the scheduler view being used. However, you can use the dateRangeTemplate option to override the default text and specify your own custom text to be displayed.

The dateRangeTemplate property includes the following options for customizing the date range text:

startDate: The start date of the current view range
endDate: The end date of the current view range
currentView: The currently active view (Day, Week, Month, etc.)

Tip: Use these template parameters to format the date range text according to your application’s locale or business requirements.

index.jsx
index.tsx
index.html
index.css
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Inject, TimelineViews } from '@syncfusion/ej2-react-schedule';
import { Internationalization } from '@syncfusion/ej2-base';
const App = () => {
  const instance = new Internationalization();
  const getDateRange = (startDate, endDate) => {
    return instance.formatDate(startDate, { skeleton: 'yMd' }) + ' - ' + instance.formatDate(endDate, { skeleton: 'yMd' });
  }
  const dateRangeTemplate = (props) => {
    return (<div>{getDateRange(props.startDate, props.endDate)}</div>);
  }
  return (<ScheduleComponent width='100%' height='550px' dateRangeTemplate={dateRangeTemplate}>
    <ViewsDirective>
      <ViewDirective option='Day' />
      <ViewDirective option='Week' />
      <ViewDirective option='WorkWeek' />
      <ViewDirective option='TimelineWeek' />
    </ViewsDirective>
    <Inject services={[Day, Week, WorkWeek, TimelineViews]} />
  </ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, View, Day, Week, WorkWeek, Month, RenderCellEventArgs, Inject, TimelineViews } from '@syncfusion/ej2-react-schedule';
import { Internationalization } from '@syncfusion/ej2-base';
const App = () => {
  const instance: Internationalization = new Internationalization();
  const getDateRange = (startDate: Date, endDate: Date): string => {
    return instance.formatDate(startDate, { skeleton: 'yMd' }) + ' - ' + instance.formatDate(endDate, { skeleton: 'yMd' });
  }
  const dateRangeTemplate = (props): JSX.Element => {
    return (<div>{getDateRange(props.startDate, props.endDate)}</div>);
  }
  return (
    <ScheduleComponent width='100%' height='550px'
      dateRangeTemplate={dateRangeTemplate}>
      <ViewsDirective>
        <ViewDirective option='Day' />
        <ViewDirective option='Week' />
        <ViewDirective option='WorkWeek' />
        <ViewDirective option='TimelineWeek' />
      </ViewsDirective>
      <Inject services={[Day, Week, WorkWeek, TimelineViews]} />
    </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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.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%;
        }
    </style>
</head>

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

</html>
/* csslint ignore:start */

.schedule-date-header-template.e-schedule .e-vertical-view .e-header-cells {
    padding: 0;
    text-align: center !important;
}   

.schedule-date-header-template.e-schedule .date-text {
    font-size: 14px;
}

.schedule-date-header-template.e-schedule.e-device .date-text {
    font-size: 12px;
}

.schedule-date-header-template.e-schedule .weather-text {
    font-size: 11px;
}

.schedule-date-header-template.e-schedule .e-month-view .weather-text {
    float: right;
    margin: -20px 2px 0 0;
    width: 20px;
    height: 20px;
}

/* csslint ignore:end */

Customizing header indent cells

It is possible to customize the header indent cells using the headerIndentTemplate option and change the look and appearance in both the vertical and timeline views. In vertical views, you can customize the header indent cells at the hierarchy level and you can customize the resource header left indent cell in timeline views using the template option.

Header indent customization by view type:

View Type	Customization Area	Purpose
Vertical views (Day, Week, Month)	Hierarchy-level indent cells	Display resource hierarchy information
Timeline views	Resource header left indent cell	Show resource group labels

Example: To customize the header left indent cell to display resources text, refer to the below code example.

index.jsx
index.tsx
index.html
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { Week, TimelineViews, TimelineMonth, Day, ScheduleComponent, ViewsDirective, ViewDirective, ResourcesDirective, ResourceDirective, Inject } from '@syncfusion/ej2-react-schedule';
import { resourceData } from './datasource';
const App = () => {
  const eventSettings = { dataSource: resourceData };
  const group = { resources: ['Owners'] };
  const ownerData = [
    { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },
    { OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' },
    { OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' }
  ];
  const headerIndentTemplate = () => {
    return (<div className='e-resource-text'>
      <div className="text">Resources</div></div>);
  }
  return (<ScheduleComponent width='100%' height='550px' currentView='Week' headerIndentTemplate={headerIndentTemplate} selectedDate={new Date(2018, 3, 1)} eventSettings={eventSettings} group={group}>
    <ViewsDirective>
      <ViewDirective option='Day' />
      <ViewDirective option='Week' />
      <ViewDirective option='TimelineWeek' />
      <ViewDirective option='TimelineMonth' />
    </ViewsDirective>
    <ResourcesDirective>
      <ResourceDirective field='OwnerId' title='Owner' name='Owners' allowMultiple={true} dataSource={ownerData} textField='OwnerText' idField='Id' colorField='OwnerColor'>
      </ResourceDirective>
    </ResourcesDirective>
    <Inject services={[Day, Week, TimelineViews, TimelineMonth]} />
  </ScheduleComponent>);
}
  ;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  Week, TimelineViews, TimelineMonth, Day, ScheduleComponent, GroupModel, ViewsDirective, ViewDirective, ResourcesDirective, EventSettingsModel,
  ResourceDirective, Inject
} from '@syncfusion/ej2-react-schedule';
import { resourceData } from './datasource';

const App = () => {
  const eventSettings: EventSettingsModel = { dataSource: resourceData };
  const group: GroupModel = { resources: ['Owners'] };
  const ownerData: object[] = [
    { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },
    { OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' },
    { OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' }
  ];

  const headerIndentTemplate = () => {
    return (
      <div className='e-resource-text'>
        <div className="text">Resources</div></div>
    );
  }

  return (<ScheduleComponent width='100%' height='550px' currentView='Week' headerIndentTemplate={headerIndentTemplate} selectedDate={new Date(2018, 3, 1)} eventSettings={eventSettings} group={group}>
    <ViewsDirective>
      <ViewDirective option='Day' />
      <ViewDirective option='Week' />
      <ViewDirective option='TimelineWeek' />
      <ViewDirective option='TimelineMonth' />
    </ViewsDirective>
    <ResourcesDirective>
      <ResourceDirective field='OwnerId' title='Owner' name='Owners' allowMultiple={true} dataSource={ownerData} textField='OwnerText' idField='Id' colorField='OwnerColor'>
      </ResourceDirective>
    </ResourcesDirective>
    <Inject services={[Day, Week, TimelineViews, TimelineMonth]} />
  </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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.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%;
        }
    </style>
</head>

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

</html>

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Header Customization in React Scheduler

Show or hide header bar

Customizing header bar using template

Customizing header bar using event

Date header customization

Using date header template

Using renderCell event

Customizing the date range text

Customizing header indent cells

See also

Header Customization in React Scheduler

Show or hide header bar

Customizing header bar using template

Customizing header bar using event

How to display the view options within the header bar popup

Date header customization

Using date header template

Using renderCell event

Customizing the date range text

Customizing header indent cells

See also