Labels on the event calendar go hand in hand with the height of the event calendar rows (representing weeks). It is possible to render as many labels as fit and keep the row heights equal. The row height is liquid and determined by the height of the calendar.
If you would like to render all labels, then passing labels: 'all' will do just that. This can make the row heights variable.
Alternatively a maximum number of labels can be set by passing a number to the labels property of the view.calendar option.
If there are more events than the number of labels for a particular day, an "x more" label will help users list out all events for the day.
By default the width of the labels fill the day cells (eventDisplay: 'fill') but alternatively eventDisplay: 'exact' can be used to display the labels with exact times.
Demo
Render labels:
<Eventcalendar
view={{
calendar:
{
labels: 'all' ,
type: 'month '
eventDisplay: 'fill '
}
}}
/>
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 allLabelsView = useMemo(() => ({ calendar: { type: 'month', labels: 'all' } }), []);
const nrLabelsView = useMemo(() => ({ calendar: { type: 'month', labels: 3 } }), []);
const fitLabelsView = useMemo(() => ({ calendar: { labels: true } }), []);
const allLabelsWeekView = useMemo(() => ({ calendar: { type: 'week', labels: 'all' } }), []);
const nrLabelsWeekView = useMemo(() => ({ calendar: { type: 'week', labels: 3 } }), []);
const fitLabelsWeekView = useMemo(() => ({ calendar: { type: 'week', labels: true } }), []);
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">All labels</div>
<Eventcalendar data={myEvents} view={allLabelsView} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Up to 3 labels</div>
<Eventcalendar data={myEvents} view={nrLabelsView} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Labels fitting the row</div>
<Eventcalendar data={myEvents} view={fitLabelsView} />
</div>
</div>
</div>
<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">All labels</div>
<Eventcalendar data={myEvents} view={allLabelsWeekView} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Up to 3 labels</div>
<Eventcalendar data={myEvents} view={nrLabelsWeekView} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Labels fitting the row</div>
<Eventcalendar data={myEvents} view={fitLabelsWeekView} />
</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 allLabelsView = useMemo<MbscEventcalendarView>(() => ({ calendar: { type: 'month', labels: 'all' } }), []);
const nrLabelsView = useMemo<MbscEventcalendarView>(() => ({ calendar: { type: 'month', labels: 3 } }), []);
const fitLabelsView = useMemo<MbscEventcalendarView>(() => ({ calendar: { labels: true } }), []);
const allLabelsWeekView = useMemo<MbscEventcalendarView>(() => ({ calendar: { type: 'week', labels: 'all' } }), []);
const nrLabelsWeekView = useMemo<MbscEventcalendarView>(() => ({ calendar: { type: 'week', labels: 3 } }), []);
const fitLabelsWeekView = useMemo<MbscEventcalendarView>(() => ({ calendar: { type: 'week', labels: true } }), []);
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">All labels</div>
<Eventcalendar data={myEvents} view={allLabelsView} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Up to 3 labels</div>
<Eventcalendar data={myEvents} view={nrLabelsView} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Labels fitting the row</div>
<Eventcalendar data={myEvents} view={fitLabelsView} />
</div>
</div>
</div>
<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">All labels</div>
<Eventcalendar data={myEvents} view={allLabelsWeekView} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Up to 3 labels</div>
<Eventcalendar data={myEvents} view={nrLabelsWeekView} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Labels fitting the row</div>
<Eventcalendar data={myEvents} view={fitLabelsWeekView} />
</div>
</div>
</div>
</div>
</Page>
);
};
export default App;