Custom Header
You can customize how the header of calendar looks and how the components are arranged. Besides that you can also add custom functionality, like a segmented control that lets people switch between week and month view.
Use the renderCalendarHeader option for passing a custom header layout. There are predefined components - shorthands if you will - that can be used to assemble the header:
- Navigation component -
<CalendarNav /> - Today button -
<CalendarToday /> - Previous month button -
<CalendarPrev /> - Next month button -
<CalendarNext />
Demo
Default header
The default header contains the two arrows on the far-right for previous and next months, while the current month indicator with the
CalendarNav
component is placed to the far-left.
<Datepicker
controls={['calendar']}
calendarType="week"
calendarSize={2}
/>Custom header arrangement
You can reorder the controls and place the
CalendarNav
in the middle with the two arrows -
CalendarPrev and CalendarNext
- to the sides.
const calendarHeader = () => {
return <React.Fragment>
<CalendarPrev className="custom-prev" />
<CalendarNav className="custom-nav" />
<CalendarNext className="custom-next" />
</React.Fragment>;
}
<Datepicker
controls={['calendar']}
renderCalendarHeader={calendarHeader}
/>Add a today button
You can also add a custom component, like a
CalendarToday
button.
const calendarHeader = () => {
return <React.Fragment>
<CalendarNav />
<div className="custom-buttons">
<CalendarPrev />
<CalendarToday />
<CalendarNext />
</div>
</React.Fragment>;
}
<Datepicker
controls={['calendar']}
renderCalendarHeader={calendarHeader}
/>Switch between week and month view
Use a segmented component for creating a view switcher.
const [calendarType, setCalendarType] = React.useState('week');
const calendarHeader = () => {
return <React.Fragment>
<CalendarNav className="custom-view-nav" />
<div className="custom-view">
<SegmentedGroup value={view} onChange={changeView}>
<SegmentedItem value="week" icon="material-date-range" />
<SegmentedItem value="month" icon="material-event-note" />
</SegmentedGroup>
</div>
<CalendarPrev />
<CalendarNext />
</React.Fragment>;
}
const changeView = (event) => {
setCalendarType(event.target.value);
}
<Datepicker
controls={['calendar']}
calendarType={calendarType}
calendarSize={2}
renderCalendarHeader={calendarHeader}
/>Preview the selection
Above all that you can give instructions or show the selected {value} in the header
<Datepicker
controls={['calendar']}
calendarType="week"
calendarSize={2}
headerText="You selected {value}"
/>JSXTSXCSS
import {
CalendarNav,
CalendarNext,
CalendarPrev,
CalendarToday,
Datepicker,
Segmented,
SegmentedGroup,
setOptions ,
} from '@mobiscroll/react';
import { useCallback, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [calendarType, setCalendarType] = useState('week');
const calendarHeaderCustom = useCallback(
() => (
<>
<CalendarPrev className="custom-prev" />
<CalendarNav className="custom-nav" />
<CalendarNext className="custom-next" />
</>
),
[],
);
const calendarHeaderToday = useCallback(
() => (
<>
<CalendarNav />
<div className="custom-buttons">
<CalendarPrev />
<CalendarToday />
<CalendarNext />
</div>
</>
),
[],
);
const changeView = useCallback((event) => {
setCalendarType(event.target.value);
}, []);
const calendarHeaderSwitch = useCallback(
() => (
<>
<CalendarNav className="custom-view-nav" />
<div className="custom-view">
<SegmentedGroup value={calendarType} onChange={changeView}>
<Segmented value="week" icon="material-date-range" />
<Segmented value="month" icon="material-event-note" />
</SegmentedGroup>
</div>
<CalendarPrev />
<CalendarNext />
</>
),
[calendarType, changeView],
);
return (
<div>
<Datepicker controls={['calendar']} display="inline" calendarType="week" calendarSize={2} />
<Datepicker controls={['calendar']} display="inline" renderCalendarHeader={calendarHeaderCustom} />
<Datepicker controls={['calendar']} display="inline" renderCalendarHeader={calendarHeaderToday} />
<Datepicker
controls={['calendar']}
display="inline"
calendarType={calendarType}
calendarSize={2}
renderCalendarHeader={calendarHeaderSwitch}
/>
<Datepicker controls={['calendar']} display="inline" calendarType="week" calendarSize={2} headerText="You selected {value}" />
</div>
);
}
export default App;
import {
CalendarNav,
CalendarNext,
CalendarPrev,
CalendarToday,
Datepicker,
Segmented,
SegmentedGroup,
setOptions ,
} from '@mobiscroll/react';
import { ChangeEvent, FC, useCallback, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [calendarType, setCalendarType] = useState<'week' | 'year' | 'month' | undefined>('week');
const calendarHeaderCustom = useCallback(
() => (
<>
<CalendarPrev className="custom-prev" />
<CalendarNav className="custom-nav" />
<CalendarNext className="custom-next" />
</>
),
[],
);
const calendarHeaderToday = useCallback(
() => (
<>
<CalendarNav />
<div className="custom-buttons">
<CalendarPrev />
<CalendarToday />
<CalendarNext />
</div>
</>
),
[],
);
const changeView = useCallback((event: ChangeEvent<HTMLInputElement>) => {
setCalendarType(event.target.value as 'week' | 'year' | 'month' | undefined);
}, []);
const calendarHeaderSwitch = useCallback(
() => (
<>
<CalendarNav className="custom-view-nav" />
<div className="custom-view">
<SegmentedGroup value={calendarType} onChange={changeView}>
<Segmented value="week" icon="material-date-range" />
<Segmented value="month" icon="material-event-note" />
</SegmentedGroup>
</div>
<CalendarPrev />
<CalendarNext />
</>
),
[calendarType, changeView],
);
return (
<div>
<Datepicker controls={['calendar']} display="inline" calendarType="week" calendarSize={2} />
<Datepicker controls={['calendar']} display="inline" renderCalendarHeader={calendarHeaderCustom} />
<Datepicker controls={['calendar']} display="inline" renderCalendarHeader={calendarHeaderToday} />
<Datepicker
controls={['calendar']}
display="inline"
calendarType={calendarType}
calendarSize={2}
renderCalendarHeader={calendarHeaderSwitch}
/>
<Datepicker controls={['calendar']} display="inline" calendarType="week" calendarSize={2} headerText="You selected {value}" />
</div>
);
};
export default App;
.custom-buttons,
.custom-view,
.custom-nav {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-moz-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.custom-buttons {
-webkit-justify-content: flex-end;
-moz-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.custom-view,
.custom-nav {
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.custom-view-nav .mbsc-calendar-title.mbsc-material {
font-size: 16px;
}
.custom-view .mbsc-segmented {
margin: 0;
}
.custom-view .mbsc-segmented.mbsc-material,
.custom-view .mbsc-segmented.mbsc-windows {
padding: 0 2px;
}
.custom-view .mbsc-segmented .mbsc-segmented-button {
padding: 0 1px;
}
.custom-view .mbsc-segmented .mbsc-icon {
font-size: 20px;
}
.custom-view .mbsc-segmented-button.mbsc-windows {
border: 0;
}