Quarter and Year View
Usage
theme="ios" You can turn auto theming on and let it decide based on the platform.
Usage
themeVariant="light" You can turn auto dark mode on based on system settings.
Usage
clickToCreate={true}
// click to create is on dragToCreate={true}
// drag to create is on dragToMove={true}
// reordering is on dragToResize={true}
// resizing is on eventDelete={true}
// deleting is on Fine-tune drag & drop with these options, which are false by default.
Usage
locale={localeEn} Selecting the locale loads the localized settings and the translated UI text.
Quarter and Year View
Besides the single month view, the calendar can be configured to render multiple months or a year. Controlled through the calendar.type and calendar.size properties of the view option.
Depending on the height of the parent container the calendar is rendered in, the header that can be used for navigation is sticky at the top while the months are vertically scrollable.
Demo
Code
View code on GitHub
import {
CalendarNav,
CalendarNext,
CalendarPrev,
CalendarToday,
Eventcalendar,
getJson,
Segmented,
SegmentedGroup,
setOptions ,
} from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [calendarType, setCalendarType] = useState('quarter');
const [myEvents, setEvents] = useState([]);
const myView = useMemo(
() => (calendarType === 'quarter' ? { calendar: { type: 'month', size: 3 } } : { calendar: { type: 'year' } }),
[calendarType],
);
const calendarHeight = useMemo(() => (calendarType === 'quarter' ? 'auto' : '100%'), [calendarType]);
const changeView = useCallback((event) => {
setCalendarType(event.target.value);
}, []);
const calendarHeader = useCallback(
() => (
<>
<CalendarNav />
<div className="quarter-year-header-picker">
<SegmentedGroup value={calendarType} onChange={changeView}>
<Segmented value="quarter">Quarter</Segmented>
<Segmented value="year">Year</Segmented>
</SegmentedGroup>
</div>
<CalendarPrev />
<CalendarToday />
<CalendarNext />
</>
),
[calendarType, changeView],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return <Eventcalendar data={myEvents} view={myView} height={calendarHeight} renderHeader={calendarHeader} />;
}
export default App;
import {
CalendarNav,
CalendarNext,
CalendarPrev,
CalendarToday,
Eventcalendar,
getJson,
MbscCalendarEvent,
MbscEventcalendarView,
Segmented,
SegmentedGroup,
setOptions ,
} from '@mobiscroll/react';
import { ChangeEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [calendarType, setCalendarType] = useState<string>('quarter');
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const myView = useMemo<MbscEventcalendarView>(
() =>
calendarType === 'quarter'
? {
calendar: {
type: 'month',
size: 3,
},
}
: {
calendar: {
type: 'year',
},
},
[calendarType],
);
const calHeight = useMemo<string>(() => (calendarType === 'quarter' ? 'auto' : 'height:100%'), [calendarType]);
const changeView = useCallback((event: ChangeEvent<HTMLInputElement>) => {
setCalendarType(event.target.value);
}, []);
const calendarHeader = useCallback(
() => (
<>
<CalendarNav />
<div className="quarter-year-header-picker">
<SegmentedGroup value={calendarType} onChange={changeView}>
<Segmented value="quarter">Quarter</Segmented>
<Segmented value="year">Year</Segmented>
</SegmentedGroup>
</div>
<CalendarPrev />
<CalendarToday />
<CalendarNext />
</>
),
[calendarType, changeView],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return <Eventcalendar data={myEvents} view={myView} height={calHeight} renderHeader={calendarHeader} />;
};
export default App;
.mbsc-calendar .quarter-year-header-picker .mbsc-segmented {
max-width: 200px;
margin: 0 auto;
}
.quarter-year-header-picker {
flex: 1 0 auto;
}