Week and Month View
The calendar view supports variable weeks. Save space by only displaying one or two weeks or go for a full month where it makes sense. Use the type and size properties of the view option to set the size of the month or week view.
You can also set the first day of the week using the firstDay option, where Sunday is 0, Monday is 1, etc.
Demo
Configure month or week view
Month view
Week view
weeks
Set the first day of week to
<Eventcalendar
firstDay={1 }
view={{
calendar:
{
labels: true,
type: 'week ',
size: 2
}
}}
/>
JSXTSX
import { Eventcalendar, getJson, Page, setOptions } from '@mobiscroll/react';
import { useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [myEvents, setEvents] = useState([]);
const oneWeekView = useMemo(() => ({ calendar: { type: 'week' } }), []);
const twoWeekView = useMemo(() => ({ calendar: { type: 'week', size: 2 } }), []);
const threeWeekView = useMemo(() => ({ calendar: { type: 'week', size: 3 } }), []);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<Page>
<div className="mbsc-grid">
<div className="mbsc-row">
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">One week view</div>
<Eventcalendar view={oneWeekView} data={myEvents} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Two week view</div>
<Eventcalendar view={twoWeekView} data={myEvents} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Three week view</div>
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
view={threeWeekView}
data={myEvents}
/>
</div>
</div>
</div>
</div>
</Page>
);
}
export default App;
import { Eventcalendar, getJson, MbscCalendarEvent, MbscEventcalendarView, Page, setOptions } from '@mobiscroll/react';
import { FC, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const oneWeekView = useMemo<MbscEventcalendarView>(
() => ({
calendar: { type: 'week' },
}),
[],
);
const twoWeekView = useMemo<MbscEventcalendarView>(
() => ({
calendar: { type: 'week', size: 2 },
}),
[],
);
const threeWeekView = useMemo<MbscEventcalendarView>(
() => ({
calendar: { type: 'week', size: 3 },
}),
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<Page>
<div className="mbsc-grid">
<div className="mbsc-row">
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">One week view</div>
<Eventcalendar view={oneWeekView} data={myEvents} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Two week view</div>
<Eventcalendar view={twoWeekView} data={myEvents} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Three week view</div>
<Eventcalendar view={threeWeekView} data={myEvents} />
</div>
</div>
</div>
</div>
</Page>
);
};
export default App;