Daily, Weekly, Monthly & Yearly Views
Use the agenda object inside the view option to configure the agenda. type and size can be set as follows:
- day -
agenda: { type: 'day', size: 20 }can be configured for a single day or a range of days - week -
agenda: { type: 'week', size: 3 }can be configured for a single or multiple weeks - month -
agenda: { type: 'month' }can be configured for one or more months - year -
agenda: { type: 'year' }can be configured for one or more years
Interested in combining this with a calendar view? Check out the previous example →
Demo
Daily agenda
days
Weekly agenda
weeks
Monthly agenda
months
Yearly agenda
years
<Eventcalendar
view={{
agenda: { type: 'day ', 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 dayView = useMemo(() => ({ agenda: { type: 'day' } }), []);
const weekView = useMemo(() => ({ agenda: { type: 'week' } }), []);
const monthView = useMemo(() => ({ agenda: { type: 'month' } }), []);
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">Daily agenda</div>
<Eventcalendar view={dayView} 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">Weekly agenda</div>
<Eventcalendar view={weekView} 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">Monthly agenda</div>
<Eventcalendar view={monthView} 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 dayView = useMemo<MbscEventcalendarView>(() => ({ agenda: { type: 'day' } }), []);
const weekView = useMemo<MbscEventcalendarView>(() => ({ agenda: { type: 'week' } }), []);
const monthView = useMemo<MbscEventcalendarView>(() => ({ agenda: { type: 'month' } }), []);
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">Daily agenda</div>
<Eventcalendar view={dayView} 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">Weekly agenda</div>
<Eventcalendar view={weekView} 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">Monthly agenda</div>
<Eventcalendar view={monthView} data={myEvents} />
</div>
</div>
</div>
</div>
</Page>
);
};
export default App;