Week & Month Views
If you want to enable switching between week & month view, you can do it by adding a segmented control to the header and dynamically change the calendarType option. If you are not looking for dynamic switching you can configure a week calendar or a month calendar.
Demo
jsxconst [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={1}
renderCalendarHeader={calendarHeader}
/>
css.custom-view {
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;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
.mbsc-segmented {
margin: 0;
}
.mbsc-segmented.mbsc-material,
.mbsc-segmented.mbsc-windows {
padding: 0 2px;
}
.mbsc-segmented .mbsc-segmented-button {
padding: 0 1px;
}
.mbsc-segmented .mbsc-icon {
font-size: 20px;
}
.mbsc-segmented-button.mbsc-windows {
border: 0;
}
}
.custom-view-nav .mbsc-calendar-title.mbsc-material {
font-size: 16px;
}
JSXTSXCSS
import {
CalendarNav,
CalendarNext,
CalendarPrev,
Datepicker,
Segmented,
SegmentedGroup,
setOptions ,
} from '@mobiscroll/react';
import { useCallback, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [calendarType, setCalendarType] = useState('week');
const handleChange = useCallback((event) => {
setCalendarType(event.target.value);
}, []);
const calendarHeaderSwitch = useCallback(
() => (
<>
<CalendarNav className="custom-view-nav" />
<div className="custom-view">
<SegmentedGroup value={calendarType} onChange={handleChange}>
<Segmented value="week" icon="material-date-range" />
<Segmented value="month" icon="material-event-note" />
</SegmentedGroup>
</div>
<CalendarPrev />
<CalendarNext />
</>
),
[calendarType, handleChange],
);
return (
<div>
<Datepicker display="inline" calendarType={calendarType} calendarSize={1} renderCalendarHeader={calendarHeaderSwitch} />
</div>
);
}
export default App;
import {
CalendarNav,
CalendarNext,
CalendarPrev,
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' | 'month' | 'year' | undefined>('week');
const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
setCalendarType(event.target.value as 'week' | 'month' | 'year' | undefined);
}, []);
const calendarHeaderSwitch = useCallback(
() => (
<>
<CalendarNav className="custom-view-nav" />
<div className="custom-view">
<SegmentedGroup value={calendarType} onChange={handleChange}>
<Segmented value="week" icon="material-date-range" />
<Segmented value="month" icon="material-event-note" />
</SegmentedGroup>
</div>
<CalendarPrev />
<CalendarNext />
</>
),
[calendarType, handleChange],
);
return (
<div>
<Datepicker display="inline" calendarType={calendarType} calendarSize={1} renderCalendarHeader={calendarHeaderSwitch} />
</div>
);
};
export default App;
.custom-view .mbsc-segmented .mbsc-icon {
font-size: 20px;
}