Empty State
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
locale={localeEn} Selecting the locale loads the localized settings and the translated UI text.
Empty State
Customize the look of the empty state through templating or custom render functions. Give a more purposeful feedback to the user and optionally add further actions to it. The template can be totally custom or dynamic based on any criteria.
Use the renderAgendaEmpty function for putting your custom content together.
Demo
Code
View code on GitHub
import { Button, Eventcalendar, setOptions, Toast } from '@mobiscroll/react';
import { useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [isToastOpen, setToastOpen] = useState(false);
const myEvents = useMemo(
() => [
{
title: 'Zumba Class',
start: '2026-10-27T17:00',
end: '2026-10-27T19:00',
},
{
title: 'Silent Party',
start: '2026-10-27T21:00',
end: '2026-10-27T23:00',
},
{
title: 'Garbage Collection',
start: '2026-11-10T15:00',
end: '2026-11-10T17:00',
},
{
title: 'Karaoke Night',
start: '2026-11-10T20:00',
end: '2026-11-10T22:00',
},
],
[],
);
const myView = useMemo(
() => ({
calendar: { type: 'week' },
agenda: { type: 'week' },
}),
[],
);
const handleButtonClick = useCallback(() => {
setToastOpen(true);
}, []);
const handleToastClose = useCallback(() => {
setToastOpen(false);
}, []);
const customAgendaEmpty = useCallback(
() => (
<div className="mbsc-align-center mbsc-padding">
<img className="mds-empty-img" src="https://img.mobiscroll.com/demos/smart-empty-tin-can.png" alt="Empty can" />
<div className="mbsc-margin mbsc-medium mbsc-italic mbsc-txt-muted">Looks like this can is empty</div>
<Button color="primary" variant="outline" onClick={handleButtonClick}>
Add something to it
</Button>
<div className="mds-empty-txt mbsc-txt-xs">
Illustration by <a href="https://icons8.com/illustrations/author/zD2oqC8lLBBA">Icons 8</a>
from <a href="https://icons8.com/illustrations">Ouch!</a>
</div>
</div>
),
[handleButtonClick],
);
return (
<>
<Eventcalendar renderAgendaEmpty={customAgendaEmpty} data={myEvents} view={myView} />
<Toast message="Add button clicked" isOpen={isToastOpen} onClose={handleToastClose} />
</>
);
}
export default App;
import { Button, Eventcalendar, MbscCalendarEvent, MbscEventcalendarView, setOptions, Toast } from '@mobiscroll/react';
import { FC, useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [isToastOpen, setToastOpen] = useState<boolean>(false);
const myEvents = useMemo<MbscCalendarEvent[]>(
() => [
{
title: 'Zumba Class',
start: '2026-10-27T17:00',
end: '2026-10-27T19:00',
},
{
title: 'Silent Party',
start: '2026-10-27T21:00',
end: '2026-10-27T23:00',
},
{
title: 'Garbage Collection',
start: '2026-11-10T15:00',
end: '2026-11-10T17:00',
},
{
title: 'Karaoke Night',
start: '2026-11-10T20:00',
end: '2026-11-10T22:00',
},
],
[],
);
const myView = useMemo<MbscEventcalendarView>(
() => ({
calendar: { type: 'week' },
agenda: { type: 'week' },
}),
[],
);
const handleButtonClick = useCallback(() => {
setToastOpen(true);
}, []);
const handleToastClose = useCallback(() => {
setToastOpen(false);
}, []);
const customAgendaEmpty = useCallback(
() => (
<div className="mbsc-align-center mbsc-padding">
<img className="mds-empty-img" src="https://img.mobiscroll.com/demos/smart-empty-tin-can.png" alt="Empty can" />
<div className="mbsc-margin mbsc-medium mbsc-italic mbsc-txt-muted">Looks like this can is empty</div>
<Button color="primary" variant="outline" onClick={handleButtonClick}>
Add something to it
</Button>
<div className="mds-empty-txt mbsc-txt-xs">
Illustration by <a href="https://icons8.com/illustrations/author/zD2oqC8lLBBA">Icons 8</a>
from <a href="https://icons8.com/illustrations">Ouch!</a>
</div>
</div>
),
[handleButtonClick],
);
return (
<>
<Eventcalendar renderAgendaEmpty={customAgendaEmpty} data={myEvents} view={myView} />
<Toast message="Add button clicked" isOpen={isToastOpen} onClose={handleToastClose} />
</>
);
};
export default App;
.mds-empty-img {
width: 150px;
margin: 50px 0;
}
.mds-empty-txt {
padding-top: 150px;
}