# Header Customization in React Scheduler
The header part of Scheduler can be customized easily with the built-in options available.
## 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`](https://ej2.syncfusion.com/react/documentation/api/schedule#showheaderbar) property. It's default value is `true`.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
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 ();
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
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 ()
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Syncfusion React Schedule
Loading....
{% endhighlight %}
{% endtabs %}
## 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`](https://ej2.syncfusion.com/react/documentation/api/schedule#toolbaritems) property. To display the default items, it's Essential® to assign a [`name`](https://ej2.syncfusion.com/react/documentation/api/schedule/toolbarItem#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. Here, the default items such as previous, next, date range text, and today have been used along with dropdownlist as custom items.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
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 ();
};
const OnChange = (args) => {
let predicate;
predicate = new Predicate('OwnerId', 'equal', parseInt(args.value, 10));
schedule.current.eventSettings.query = new Query().where(predicate);
};
return ()
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
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(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 ();
};
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 ()
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Syncfusion React Schedule
Loading....
{% endhighlight %}
{% highlight html tabtitle="datasource.jsx" %}
/**
* 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
}
];
{% endhighlight %}
{% highlight html tabtitle="datasource.tsx" %}
/**
* 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
}
];
{% endhighlight %}
{% endtabs %}
## 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`](https://ej2.syncfusion.com/react/documentation/api/schedule#actionbegin) event. Here, an employee image is added to the header bar, clicking on which will open the popup showing that person's short profile information.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
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('
{% endhighlight %}
{% endtabs %}
## How to display the view options within the header bar popup
By default, the header bar holds the view navigation options, through which the user can switch between various views. You can move this view options to the header bar popup by setting `true` to the [`enableAdaptiveUI`](https://ej2.syncfusion.com/react/documentation/api/schedule#enableadaptiveui) property.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
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 ();
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
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 ()
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render();
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Syncfusion React Schedule
Loading....
{% endhighlight %}
{% endtabs %}
> Refer [here](./resources#adaptive-ui-in-desktop) to know more about adaptive UI in resources scheduler.
## 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 Scheduler either using [`dateHeaderTemplate`](https://ej2.syncfusion.com/react/documentation/api/schedule#dateheadertemplate) or [`renderCell`](https://ej2.syncfusion.com/react/documentation/api/schedule#rendercell) event.
### Using date header template
The [`dateHeaderTemplate`](https://ej2.syncfusion.com/react/documentation/api/schedule#dateheadertemplate) option is used to customizes the date header cells of day, week, work-week and timeline views.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
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 '
{% endhighlight %}
{% highlight css tabtitle="index.css" %}
/* 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 */
{% endhighlight %}
{% endtabs %}
## Customizing the date range text
The [`dateRangeTemplate`](https://ej2.syncfusion.com/react/documentation/api/schedule#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`](https://ej2.syncfusion.com/react/documentation/api/schedule#daterangetemplate) option to override the default text and specify your own custom text to be displayed.
The [`dateRangeTemplate`](https://ej2.syncfusion.com/react/documentation/api/schedule#daterangetemplate) property includes `startDate`, `endDate` and `currentView` options, you can customize the date range text using these available options.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
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 (
{% endhighlight %}
{% endtabs %}
> You can refer to our [React Scheduler](https://www.syncfusion.com/react-components/react-scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [React Scheduler example](https://ej2.syncfusion.com/react/demos/#/tailwind3/schedule/overview) to knows how to present and manipulate data.