---
title: "Javascript Agenda Event Tooltip Example | Mobiscroll"
component: "Agenda"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/agenda/custom-event-tooltip"
---

# Event Tooltip - JavaScript Agenda demo

Add hover tooltips to Javascript agenda events showing appointment details and inline actions — choose native, custom popup, or third-party tooltip. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/agenda/custom-event-tooltip)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/agenda/custom-event-tooltip)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/agenda/custom-event-tooltip.md), [Angular](https://demo.mobiscroll.com/angular/agenda/custom-event-tooltip.md), [React](https://demo.mobiscroll.com/react/agenda/custom-event-tooltip.md), [Vue](https://demo.mobiscroll.com/vue/agenda/custom-event-tooltip.md)

## Description

There are several approaches to showing a tooltip when hovering events.

**The native tooltip**

By default, the calendar shows the browser native tooltip when hovering over the event. This includes the times and title of the event, which does the job most of the times. For showing a custom text use the [`tooltip`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) property of the data object. This tooltip is specific to every event. If you want to hide the native tooltip, you can set the [`showEventTooltip`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-showEventTooltip) to `false`.

**Fully custom tooltip**

Setting the [`showEventTooltip`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-showEventTooltip) to false gives room for a fully custom tooltip that can be implemented by using the [`onEventHoverIn`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventHoverIn) and [`onEventHoverOut`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventHoverOut) lifecycle events. With the help of the Mobiscroll popup you can show a custom tooltip that holds details, actions applicable to the event it is anchored to.

**Showing a third party popup**

There are cases when you are using a third party library, something like md-boostrap. For those cases, turn the browser native tooltip off with the [`showEventTooltip`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-showEventTooltip) option and use the third-party tooltip accordingly. In case of md-boostrap, you can add the tooltip directive to the [custom event template](https://demo.mobiscroll.com/javascript/agenda/full-event-customization) so that the library knows where and when to show the tooltip.

## What this demo shows

- Shows a weekly agenda view with events listed and grouped by date.
- **Header navigation** The date range 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.
- **Agenda list** The area below the header lists events for the selected week. Events in the agenda are grouped by date.
- **Sticky day headers** As the agenda scrolls vertically, each day stays visible with a sticky date header while its events appear underneath.
- **Events** Events appear as agenda cards with a colored strip on the left and the event title next to it. Start and end times are stacked on the right side of timed events. All-day events show the all-day label on the right.
- **Custom event tooltip** Hovering over an event opens a custom tooltip below the hovered event.
- **Tooltip header** The tooltip header uses the event color and shows the patient name, age, and event start and end time.
- **Tooltip details** The tooltip body shows `Status`, `Reason for visiting`, and `Location` rows.
- **Appointment status** The `Status` row shows whether the appointment is confirmed.
- **Status action** The tooltip shows either a `Confirm appointment` or `Cancel appointment` button based on the current appointment status.
- **Status feedback** Clicking the status action changes the appointment status, closes the tooltip, and shows a toast message on the agenda.
- **Reason for visiting** The tooltip includes a short description of why the patient is visiting.
- **Location** The tooltip shows the appointment location.
- **Footer actions** The footer includes a gray `View patient file` button and a red `Delete appointment` button.
- **View patient action** Clicking `View patient file` shows a toast message with the `View file` text.
- **Delete action** Clicking `Delete appointment` removes the event.
- **Event selection** Clicking an event selects and highlights it.

## Best for

- **Appointment schedulers** Showing patient appointments with status, reason, location, and event-specific actions.
- **Healthcare scheduling** Building agenda views where users need quick access to appointment details without opening a separate page.
- **Desktop workflows** Presenting a weekly agenda layout with hover states, selection states, and header navigation.
- **Event detail previews** Displaying structured event information in a custom tooltip anchored to the hovered event.
- **Inline appointment actions** Letting users confirm, cancel, view, or delete appointments directly from the agenda.

## 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
- [`setOptions`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setOptions) - method
- [`setOptions`](https://mobiscroll.com/docs/javascript/popup/api#method-setOptions) - method
- [`anchor`](https://mobiscroll.com/docs/javascript/popup/api#opt-anchor) - option
- [`open`](https://mobiscroll.com/docs/javascript/popup/api#method-open) - method
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`showEventTooltip`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-showEventTooltip) - option
- [`onEventClick`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventClick) - event
- [`onEventHoverIn`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventHoverIn) - event
- [`onEventHoverOut`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventHoverOut) - event
- [`close`](https://mobiscroll.com/docs/javascript/popup/api#method-close) - method
- [`display`](https://mobiscroll.com/docs/javascript/popup/api#opt-display) - option
- [`scrollLock`](https://mobiscroll.com/docs/javascript/popup/api#opt-scrollLock) - option
- [`showOverlay`](https://mobiscroll.com/docs/javascript/popup/api#opt-showOverlay) - option
- [`touchUi`](https://mobiscroll.com/docs/javascript/popup/api#opt-touchUi) - option
- [`width`](https://mobiscroll.com/docs/javascript/popup/api#opt-width) - option
- [`updateEvent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-updateEvent) - method
- [`removeEvent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-removeEvent) - method

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function openTooltip(args) {
  var formatDate = mobiscroll.formatDate;
  var event = args.event;
  var time = formatDate('hh:mm A', new Date(event.start)) + ' - ' + formatDate('hh:mm A', new Date(event.end));
  var buttonText;
  var buttonType;

  if (event.confirmed) {
    buttonText = 'Cancel appointment';
    buttonType = 'warning';
  } else {
    buttonText = 'Confirm appointment';
    buttonType = 'success';
  }

  appointment = event;
  appointmentInfo.innerHTML = event.title + ', Age: ' + event.age;
  appointmentLocation.innerHTML = event.location;
  appointmentReason.innerHTML = event.reason;
  appointmentTime.innerHTML = time;
  appointmentStatus.innerHTML = event.confirmed ? 'Confirmed' : 'Canceled';

  btnStatus.querySelector('.mbsc-button-txt').innerHTML = buttonText;
  mobiscroll.getInst(btnStatus).setOptions({ color: buttonType });

  tooltipHeader.style.backgroundColor = event.color;

  clearTimeout(timer);
  timer = null;

  tooltip.setOptions({ anchor: args.domEvent.target.closest('.mbsc-event') });
  tooltip.open();
}

var appointment;
var appointmentInfo = document.getElementById('demo-tooltip-info');
var appointmentLocation = document.getElementById('demo-tooltip-location');
var appointmentReason = document.getElementById('demo-tooltip-reason');
var appointmentStatus = document.getElementById('demo-tooltip-status');
var appointmentTime = document.getElementById('demo-tooltip-time');
var btnDelete = document.getElementById('demo-tooltip-delete');
var btnStatus = document.getElementById('demo-tooltip-status-update');
var btnView = document.getElementById('demo-tooltip-view');
var timer;
var tooltipElm = document.getElementById('demo-tooltip-popup');
var tooltipHeader = document.getElementById('demo-tooltip-header');

var calendar = mobiscroll.eventcalendar('#demo-tooltip-calendar', {
  view: { agenda: { type: 'week' } },
  data: [
    {
      title: 'Jude Chester',
      age: 69,
      start: '2026-10-25T08:00',
      end: '2026-10-25T08:45',
      confirmed: false,
      reason: 'Headaches morning & afternoon',
      location: 'Topmed, Building A, Room 203',
      color: '#b33d3d',
    },
    {
      title: 'Leon Porter',
      age: 44,
      start: '2026-10-25T09:00',
      end: '2026-10-25T09:45',
      confirmed: false,
      reason: 'Left abdominal pain',
      location: 'Topmed, Building D, Room 360',
      color: '#b33d3d',
    },
    {
      title: 'Merv Kenny',
      age: 56,
      start: '2026-10-25T10:00',
      end: '2026-10-25T10:45',
      confirmed: true,
      reason: 'Itchy, red rashes',
      location: 'Topmed, Building D, Room 360',
      color: '#b33d3d',
    },
    {
      title: 'Derek Austyn',
      age: 72,
      start: '2026-10-25T13:00',
      end: '2026-10-25T13:45',
      confirmed: false,
      reason: 'Nausea & weakness',
      location: 'Rose Medical Center, Room 18',
      color: '#b33d3d',
    },
    {
      title: 'Jenifer Kalyn',
      age: 65,
      start: '2026-10-25T14:00',
      end: '2026-10-25T14:45',
      confirmed: true,
      reason: 'Cough & fever',
      location: 'Rose Medical Center, Room 18',
      color: '#b33d3d',
    },
    {
      title: 'Lily Racquel',
      age: 54,
      start: '2026-10-25T10:00',
      end: '2026-10-25T10:45',
      confirmed: true,
      reason: 'Dry, persistent cough & headache',
      location: 'Procare, Building C, Room 12',
      color: '#309346',
    },
    {
      title: 'Mia Sawyer',
      age: 59,
      start: '2026-10-25T11:00',
      end: '2026-10-25T11:45',
      confirmed: true,
      reason: 'Difficulty sleeping & loss of appetite',
      location: 'Procare, Building C, Room 12',
      color: '#309346',
    },
    {
      title: 'Fred Valdez',
      age: 62,
      start: '2026-10-25T15:00',
      end: '2026-10-25T15:45',
      confirmed: false,
      reason: 'High blood pressure',
      location: 'Procare, Building C, Room 40',
      color: '#309346',
    },
    {
      title: 'Sylvia Cale',
      age: 41,
      start: '2026-10-25T08:00',
      end: '2026-10-25T08:45',
      confirmed: false,
      reason: 'Fever & sore throat',
      location: 'MedStar, Building A, Room 1',
      color: '#c77c0a',
    },
    {
      title: 'Isadora Lyric',
      age: 30,
      start: '2026-10-25T09:00',
      end: '2026-10-25T09:45',
      confirmed: false,
      reason: 'Constant tiredness & weakness',
      location: 'MedStar, Building A, Room 1',
      color: '#c77c0a',
    },
    {
      title: 'Jon Candace',
      age: 63,
      start: '2026-10-25T12:00',
      end: '2026-10-25T12:45',
      confirmed: true,
      reason: 'Nausea & weakness',
      location: 'MedStar, Building A, Room 1',
      color: '#c77c0a',
    },
    {
      title: 'Layton Drake',
      age: 57,
      start: '2026-10-25T13:00',
      end: '2026-10-25T13:45',
      confirmed: true,
      reason: 'Headaches & loss of appetite',
      location: 'Vitalife, Room 160',
      color: '#c77c0a',
    },
    {
      title: 'Florence Amy',
      age: 73,
      start: '2026-10-25T14:00',
      end: '2026-10-25T14:45',
      confirmed: false,
      reason: 'Dry, persistent cough & headache',
      location: 'Vitalife, Room 160',
      color: '#c77c0a',
    },
    {
      title: 'Willis Kane',
      age: 44,
      start: '2026-10-26T08:00',
      end: '2026-10-26T08:45',
      confirmed: true,
      reason: 'Back pain',
      location: 'Care Cente, Room 320r',
      color: '#b33d3d',
    },
    {
      title: 'Theo Calanthia',
      age: 60,
      start: '2026-10-26T09:00',
      end: '2026-10-26T09:45',
      confirmed: true,
      reason: 'Anxiousness & sleeping disorder',
      location: 'Care Center, Room 320',
      color: '#b33d3d',
    },
    {
      title: 'Ford Kaiden',
      age: 53,
      start: '2026-10-26T14:00',
      end: '2026-10-26T14:45',
      confirmed: true,
      reason: 'Nausea & vomiting',
      location: 'Care Center, Room 206',
      color: '#b33d3d',
    },
    {
      title: 'Jewell Ryder',
      age: 75,
      start: '2026-10-26T15:00',
      end: '2026-10-26T15:45',
      confirmed: false,
      reason: 'High blood pressure',
      location: 'Care Center, Room 206',
      color: '#b33d3d',
    },
    {
      title: 'Antonia Cindra',
      age: 48,
      start: '2026-10-26T12:00',
      end: '2026-10-26T12:45',
      confirmed: true,
      reason: 'Dry, persistent cough',
      location: 'Medica Zone, Building C, Room 2',
      color: '#c77c0a',
    },
    {
      title: 'Gerry Irma',
      age: 50,
      start: '2026-10-26T13:00',
      end: '2026-10-26T13:45',
      confirmed: false,
      reason: 'Fever & sore throat',
      location: 'Medica Zone, Building C, Room 2',
      color: '#c77c0a',
    },
    {
      title: 'Carlyn Dorothy',
      age: 36,
      start: '2026-10-26T14:00',
      end: '2026-10-26T14:45',
      confirmed: true,
      reason: 'Tiredness & muscle pain',
      location: 'Medica Zone, Building C, Room 2',
      color: '#c77c0a',
    },
    {
      title: 'Alma Potter',
      age: 74,
      start: '2026-10-24T10:00',
      end: '2026-10-24T10:45',
      confirmed: true,
      reason: 'High blood pressure',
      location: 'Vitacure, Building D, Room 2',
      color: '#b33d3d',
    },
    {
      title: 'Debra Aguilar',
      age: 47,
      start: '2026-10-24T11:00',
      end: '2026-10-24T11:45',
      confirmed: false,
      reason: 'Fever & sore throat',
      location: 'Vitacure, Building D, Room 2',
      color: '#b33d3d',
    },
    {
      title: 'Tommie Love',
      age: 42,
      start: '2026-10-24T12:00',
      end: '2026-10-24T12:45',
      confirmed: false,
      reason: 'Dry, persistent cough & headache',
      location: 'Vitacure, Building D, Room 2',
      color: '#b33d3d',
    },
    {
      title: 'Marjorie White',
      age: 55,
      start: '2026-10-24T13:00',
      end: '2026-10-24T13:45',
      confirmed: true,
      reason: 'Back pain',
      location: 'Vitacure, Building D, Room 2',
      color: '#b33d3d',
    },
    {
      title: 'Brandon Perkins',
      age: 68,
      start: '2026-10-24T14:00',
      end: '2026-10-24T14:45',
      confirmed: true,
      reason: 'Swollen ankles',
      location: 'Vitacure, Building D, Room 2',
      color: '#b33d3d',
    },
    {
      title: 'Lora Wilson',
      age: 66,
      start: '2026-10-24T15:00',
      end: '2026-10-24T15:45',
      confirmed: false,
      reason: 'Fever & headache',
      location: 'Vitacure, Building D, Room 2',
      color: '#b33d3d',
    },
    {
      title: 'Ismael Bates',
      age: 58,
      start: '2026-10-24T08:00',
      end: '2026-10-24T08:45',
      confirmed: false,
      reason: 'Tiredness & muscle pain',
      location: 'Care Center, Room 300',
      color: '#309346',
    },
    {
      title: 'Archie Wilkins',
      age: 69,
      start: '2026-10-24T09:00',
      end: '2026-10-24T09:45',
      confirmed: true,
      reason: 'Fever & headache',
      location: 'Care Center, Room 300',
      color: '#309346',
    },
    {
      title: 'Christie Baker',
      age: 71,
      start: '2026-10-24T10:00',
      end: '2026-10-24T10:45',
      confirmed: true,
      reason: 'Headaches morning & afternoon',
      location: 'Care Center, Room 300',
      color: '#309346',
    },
    {
      title: 'Laura Shelton',
      age: 45,
      start: '2026-10-24T12:00',
      end: '2026-10-24T12:45',
      confirmed: false,
      reason: 'Dry, persistent cough',
      location: 'Care Center, Room 300',
      color: '#309346',
    },
    {
      title: 'Mary Hudson',
      age: 77,
      start: '2026-10-24T09:00',
      end: '2026-10-24T09:45',
      confirmed: true,
      reason: 'Fever & sore throat',
      location: 'Medica Zone, Room 45',
      color: '#c77c0a',
    },
    {
      title: 'Ralph Rice',
      age: 64,
      start: '2026-10-24T10:00',
      end: '2026-10-24T10:45',
      confirmed: true,
      reason: 'Left abdominal pain',
      location: 'Medica Zone, Room 45',
      color: '#c77c0a',
    },
    {
      title: 'Marc Hoffman',
      age: 53,
      start: '2026-10-24T12:00',
      end: '2026-10-24T12:45',
      confirmed: true,
      reason: 'Dry, persistent cough & headache',
      location: 'Medica Zone, Room 45',
      color: '#c77c0a',
    },
    {
      title: 'Arlene Lyons',
      age: 41,
      start: '2026-10-24T14:00',
      end: '2026-10-24T14:45',
      confirmed: true,
      reason: 'Nausea & weakness',
      location: 'Care Center, Room 202',
      color: '#c77c0a',
    },
    {
      title: 'Thelma Shaw',
      age: 26,
      start: '2026-10-24T15:00',
      end: '2026-10-24T15:45',
      confirmed: true,
      reason: 'Anxiousness & sleeping disorder',
      location: 'Care Center, Room 202',
      color: '#c77c0a',
    },
    {
      title: 'Dory Edie',
      age: 45,
      start: '2026-10-23T09:00',
      end: '2026-10-23T09:45',
      confirmed: true,
      reason: 'Right abdominal pain',
      location: 'Vitacure, Building A, Room 203',
      color: '#309346',
    },
    {
      title: 'Kaylin Toni',
      age: 68,
      start: '2026-10-23T10:00',
      end: '2026-10-23T10:45',
      confirmed: true,
      reason: 'Itchy, red rashes',
      location: 'Vitacure, Building A, Room 203',
      color: '#309346',
    },
    {
      title: 'Gray Kestrel',
      age: 60,
      start: '2026-10-23T12:00',
      end: '2026-10-23T12:45',
      confirmed: true,
      reason: 'Cough & fever',
      location: 'Vitacure, Building A, Room 203',
      color: '#309346',
    },
    {
      title: 'Reg Izabelle',
      age: 41,
      start: '2026-10-23T14:00',
      end: '2026-10-23T14:45',
      confirmed: true,
      reason: 'Fever & headache',
      location: 'Medica Zone, Room 13',
      color: '#309346',
    },
    {
      title: 'Lou Andie',
      age: 76,
      start: '2026-10-23T15:00',
      end: '2026-10-23T15:45',
      confirmed: true,
      reason: 'High blood pressure',
      location: 'Medica Zone, Room 13',
      color: '#309346',
    },
    {
      title: 'Yancy Dustin',
      age: 52,
      start: '2026-10-23T10:00',
      end: '2026-10-23T10:45',
      confirmed: true,
      reason: 'Fever & headache',
      location: 'Vitacure, Building E, Room 50',
      color: '#c77c0a',
    },
    {
      title: 'Terry Clark',
      age: 78,
      start: '2026-10-23T11:00',
      end: '2026-10-23T11:45',
      confirmed: true,
      reason: 'Swollen ankles',
      location: 'Vitacure, Building E, Room 50',
      color: '#c77c0a',
    },
  ],
  showEventTooltip: false,
  onEventClick: openTooltip,
  onEventHoverIn: openTooltip,
  onEventHoverOut: function () {
    if (!timer) {
      timer = setTimeout(function () {
        tooltip.close();
      }, 200);
    }
  },
});

var tooltip = mobiscroll.popup('#demo-tooltip-popup', {
  contentPadding: false,
  display: 'anchored',
  scrollLock: false,
  showOverlay: false,
  touchUi: false,
  width: 350,
});

tooltipElm.addEventListener('mouseenter', function () {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
});

tooltipElm.addEventListener('mouseleave', function () {
  timer = setTimeout(function () {
    tooltip.close();
  }, 200);
});

btnStatus.addEventListener('click', function () {
  appointment.confirmed = !appointment.confirmed;
  calendar.updateEvent(appointment);
  tooltip.close();
  mobiscroll.toast({
    message: 'Appointment ' + (appointment.confirmed ? 'confirmed' : 'canceled'),
  });
});

btnView.addEventListener('click', function () {
  tooltip.close();
  mobiscroll.toast({
    message: 'View file',
  });
});

btnDelete.addEventListener('click', function () {
  calendar.removeEvent(appointment);
  tooltip.close();
  mobiscroll.toast({
    message: 'Appointment deleted',
  });
});
```

### HTML

```html
<div id="demo-tooltip-calendar"></div>
<div id="demo-tooltip-popup" class="mds-tooltip mds-popup">
  <div id="demo-tooltip-header" class="mds-tooltip-header">
    <span id="demo-tooltip-info"></span>
    <span id="demo-tooltip-time" class="mbsc-pull-right"></span>
  </div>
  <div class="mbsc-padding">
    <div class="mds-tooltip-label mbsc-margin">
      Status: <span id="demo-tooltip-status" class="mbsc-light"></span>
      <button id="demo-tooltip-status-update" mbsc-button data-color="warning" data-variant="outline" class="mds-tooltip-button mbsc-pull-right">
      </button>
    </div>
    <div class="mds-tooltip-label mbsc-margin">Reason for visit: <span id="demo-tooltip-reason" class="mbsc-light"></span></div>
    <div class="mds-tooltip-label mbsc-margin">Location: <span id="demo-tooltip-location" class="mbsc-light"></span></div>
    <button id="demo-tooltip-view" mbsc-button data-color="secondary" class="mds-tooltip-button">
      View patient file
    </button>
    <button id="demo-tooltip-delete" mbsc-button data-color="danger" data-variant="outline" class="mds-tooltip-button mbsc-pull-right">
      Delete appointment
    </button>
  </div>
</div>
```

### CSS

```css
.mds-tooltip {
  font-size: 15px;
  font-weight: 600;
}

.mds-tooltip-header {
  padding: 12px 16px;
  color: #eee;
}

.mds-tooltip-label {
  line-height: 32px;
}

.mds-tooltip-button.mbsc-button {
  font-size: 16px;
  margin: 0;
  line-height: 32px;
  padding-top: 0;
  padding-bottom: 0;
}

.mds-tooltip-button .mbsc-button-txt {
  font-size: 14px;
  padding-left: 0;
  padding-right: 0;
}
```

## Implementation notes

- Use `view: { agenda: { type: 'week' } }`. Define a static inline event array with medical-appointment fields: `title`, `age`, `start`, `end`, `confirmed`, `reason`, `location`, `color`. Use relative dates so appointments always appear around the current day.
- Set `showEventTooltip: false` to suppress the native browser tooltip. Handle `onEventHoverIn` to open a Mobiscroll `Popup` anchored to `args.domEvent.target.closest('.mbsc-event')`. Popup options: `display: 'anchored'`, `touchUi: false`, `showOverlay: false`, `scrollLock: false`, `width: 350`, `contentPadding: false`. Handle `onEventHoverOut` with a 200 ms delay before closing - cancel the timer on mouseenter into the Popup, reset it on mouseleave.
- Wire `onEventClick` to the same open logic for touch/mobile support.
- Tooltip content: colored header with patient name+age and formatted time range; status line with a confirm/cancel toggle button; reason for visit; location; "View patient file" and "Delete appointment" action buttons.

## 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: [Customizable Day Headers](https://demo.mobiscroll.com/javascript/agenda/customizing-day-header.md) - Build customizable Javascript agenda day headers — style date labels and add per-day action buttons, including headers for days without events.
- Next: [Empty State](https://demo.mobiscroll.com/javascript/agenda/empty-state.md) - Add a custom empty-state template to the Javascript agenda view — display a message, illustration, or action when no events are scheduled.