---
title: "Javascript Agenda Empty State Example | Mobiscroll"
component: "Agenda"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/agenda/empty-state"
---
# Empty State - JavaScript Agenda demo
Add a custom empty-state template to the Javascript agenda view — display a message, illustration, or action when no events are scheduled. Plain JavaScript API.
- [Live demo](https://demo.mobiscroll.com/javascript/agenda/empty-state)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/agenda/empty-state)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/agenda/empty-state.md), [Angular](https://demo.mobiscroll.com/angular/agenda/empty-state.md), [React](https://demo.mobiscroll.com/react/agenda/empty-state.md), [Vue](https://demo.mobiscroll.com/vue/agenda/empty-state.md)
## Description
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`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderAgendaEmpty) function for putting your custom content together.
## What this demo shows
- Shows a mobile-friendly week calendar paired with an agenda list in a single view.
- **Header navigation** The month and year label in the top left opens date navigation. The previous and next arrows and the Today button on the right move between weeks and jump back to the current date.
- **Week view** A week calendar is displayed at the top of the view.
- **Week navigation** The week strip can be changed by clicking and dragging left or right.
- **Day cell states** Hovering a day highlights the day number with a gray background. Selecting a day highlights the day number with a blue background. The current date is highlighted by default.
- **Agenda list** By default, no events are displayed in the agenda,and a customized empty state is shown instead. In this example, anillustration of an empty can is displayed with the text "Lookslike this can is empty" and a blue "Add something to it"button below it.
- **Date selection** Selecting a day in the week calendar updates the agenda.
## Best for
- **First-time use** Explain that no events have been scheduled yet and provide a clear action for adding the first one.
- **Appointment booking** Prompt users to create an appointment when the selected period has no bookings.
- **Workforce planning** Offer a direct next step for adding a shift or assignment to an empty schedule.
- **Filtered calendars** Clarify that the current filters return no events and provide an action for adjusting them.
## API used in this demo
- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`renderAgendaEmpty`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderAgendaEmpty) - renderer
## Code
### JS
```js
mobiscroll.setOptions({
theme: 'ios',
themeVariant: 'light'
});
var myElement = document.getElementById('demo-agenda-empty');
mobiscroll.eventcalendar(myElement, {
view: {
calendar: { type: 'week' },
agenda: { type: 'week' },
},
data: [
{
title: 'Zumba Class',
start: '2026-10-18T17:00',
end: '2026-10-18T19:00',
},
{
title: 'Silent Party',
start: '2026-10-18T21:00',
end: '2026-10-18T23:00',
},
{
title: 'Garbage Collection',
start: '2026-11-01T15:00',
end: '2026-11-01T17:00',
},
{
title: 'Karaoke Night',
start: '2026-11-01T20:00',
end: '2026-11-01T22:00',
},
],
renderAgendaEmpty: function () {
return (
'
'
);
},
});
myElement.addEventListener('click', function (e) {
if (e.target.id === 'demo-agenda-empty-add') {
mobiscroll.toast({ message: 'Add button clicked' });
}
});
```
### HTML
```html
```
### CSS
```css
.mds-empty-img {
width: 150px;
margin: 50px 0;
}
.mds-empty-txt {
padding-top: 150px;
}
```
## Implementation notes
- Use `view: { calendar: { type: 'week' }, agenda: { type: 'week' } }`. Define a static event array with events placed 7 days before and 7 days after the current date using relative date helpers - this ensures the current week in the agenda is always empty and consistently triggers the empty state.
- Pass a custom empty state template via `renderAgendaEmpty` (Angular: `agendaEmptyTemplate`, Vue: `agendaEmpty` slot). The template contains a centered illustration image, a short italic message, and an "Add something to it" Button. On button click, show a Toast.
## Run it in your project
1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).
2. Clone the repository:
```
git clone https://github.com/acidb/mobiscroll-demos-javascript.git
```
3. If not installed yet, install the Mobiscroll CLI from NPM:
```
npm install -g @mobiscroll/cli
```
4. Config Mobiscroll - open a terminal window in the root directory and run:
```
mobiscroll config javascript
```
5. Install dependencies - open a terminal window in the root directory and run:
```
npm install
```
6. Run the project:
```
npm run dev
```
On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.
Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation
## Related demos
- Previous: [Event Tooltip](https://demo.mobiscroll.com/javascript/agenda/custom-event-tooltip.md) - Add hover tooltips to Javascript agenda events showing appointment details and inline actions — choose native, custom popup, or third-party tooltip.
' +
'