---
title: "Javascript Event calendar Search Events in Sidebar Example | Mobiscroll"
component: "Event calendar"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/eventcalendar/searching-events-in-sidebar"
---

# Search Events in Sidebar - JavaScript Event calendar demo

Add real-time event search to a Javascript event calendar — display filtered results in a sidebar panel, grouped by date, with click-to-navigate. Plain JS api for usage everywhere.

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

## Description

Inline search can be easily implemented with the help of a separate [agenda](https://demo.mobiscroll.com/javascript/agenda) instance. This example is relying on a single API endpoint for getting the data onto the primary calendar view and also for getting the filtered data based on the search terms.

[Events can be filtered in real time](https://demo.mobiscroll.com/javascript/eventcalendar/resource-filtering-in-header) so using an agenda view for the search results is an easy choice. It provides all the necessary styling and advanced features that you might need to customize the experience.

Alternatively, search can be implemented in the header of the event calendar using a similar search box with an [agenda listed in a popup](https://demo.mobiscroll.com/javascript/eventcalendar/searching-events-in-popup) instead of rendered inline.

## What this demo shows

- A full month event calendar with event labels rendered directly inside the day cells and a search sidebar placed next to it.
- **Event labels** Labels use different visual styles for all-day events, multi-day events, and timed events, with different colors representing different events.
- **Event selection** Hovering over or selecting an event label highlights that event.
- **Day cells** Hovering over a day cell highlights the day number in the top-right corner with a gray background.
- **Date selection** Clicking the empty area of a day cell selects the day and highlights the day number with a blue background.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Header layout** The header shows the current month and year on the left and previous, next, and `Today` controls on the right.
- **Search sidebar** The sidebar contains a search field with a search icon and the `Search events` placeholder text.
- **Search results** Typing in the search field displays matching events in an agenda-style list below the input.
- **Agenda result** Search results are grouped by date, and each event row shows a colored marker, the event title, and the event type, such as all-day or timed.
- **Result selection** Clicking an event in the agenda list navigates the month view to the date that contains the selected event.
- **Empty state** If the search returns no matches, a `No events` message is shown below the search box.

## Best for

- **Busy event calendars** Interfaces where users need to find specific events quickly without leaving the main month view.
- **Employee scheduling** Workforce and shift planning tools where users search for people, absences, or schedule entries across a larger calendar.
- **Project and team planning** Planning tools where users search by keyword, event type, or participant while keeping the broader schedule visible.

## 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
- [`showControls`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-showControls) - option
- [`onEventClick`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventClick) - event
- [`navigateToEvent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-navigateToEvent) - method
- [`setSelectedEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setSelectedEvents) - method
- [`clickToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option
- [`selectMultipleEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-selectMultipleEvents) - option
- [`labels`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-labels) - option
- [`onPageLoading`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onPageLoading) - event
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

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

var timer;
var searchResults = document.getElementById('demo-search-results');

var list = mobiscroll.eventcalendar('#demo-search-results', {
  view: {
    agenda: { type: 'year', size: 5 },
  },
  showControls: false,
  onEventClick: function (args) {
    calendar.navigateToEvent(args.event);
    calendar.setSelectedEvents([args.event]);
  },
});

var calendar = mobiscroll.eventcalendar('#demo-search-events', {
  clickToCreate: false,
  dragToCreate: false,
  dragToMove: false,
  dragToResize: false,
  selectMultipleEvents: true,
  view: {
    calendar: { labels: true },
  },
  onPageLoading: function (args) {
    var start = mobiscroll.formatDate('YYYY-MM-DD', args.viewStart);
    var end = mobiscroll.formatDate('YYYY-MM-DD', args.viewEnd);

    mobiscroll.getJson(
      'https://trial.mobiscroll.com/searchevents/?start=' + start + '&end=' + end,
      function (data) {
        calendar.setEvents(data);
      },
      'jsonp',
    );
  },
});

searchResults.style.visibility = 'hidden';

document.getElementById('demo-search-input').addEventListener('input', function (ev) {
  var searchText = ev.target.value;
  clearTimeout(timer);
  timer = setTimeout(function () {
    if (searchText.length > 0) {
      mobiscroll.getJson(
        'https://trial.mobiscroll.com/searchevents/?text=' + searchText,
        function (data) {
          list.setEvents(data);
          searchResults.style.visibility = 'visible';
        },
        'jsonp',
      );
    } else {
      searchResults.style.visibility = 'hidden';
    }
  }, 200);
});
```

### HTML

```html
<div mbsc-page class="mds-full-height">
  <div class="mds-full-height mbsc-flex">
    <div class="mds-search-sidebar mbsc-flex-col mbsc-flex-none">
      <label>
        <input id="demo-search-input" mbsc-input autocomplete="off" data-start-icon="material-search" data-input-style="outline" placeholder="Search events"></input>
      </label>
      <div id="demo-search-results"></div>
    </div>
    <div class="mds-search-calendar mbsc-flex-1-1">
      <div id="demo-search-events"></div>
    </div>
  </div>
</div>
```

### CSS

```css
.mds-full-height {
  height: 100%;
}

.mds-search-calendar {
  border-left: 1px solid #ccc;
  overflow: hidden;
}

.mds-search-sidebar {
  width: 350px;
}

.mds-search-sidebar .mbsc-textfield-wrapper.mbsc-ios {
  margin-top: 27px;
  margin-bottom: 26px;
}

.mds-search-sidebar .mbsc-textfield-wrapper.mbsc-material {
  margin-top: 26px;
  margin-bottom: 26px;
}

.mds-search-sidebar .mbsc-textfield-wrapper.mbsc-windows {
  margin-top: 35px;
  margin-bottom: 35px;
}

@media (min-width: 1135px) {
  .mds-search-sidebar .mbsc-textfield-wrapper.mbsc-windows {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
```

## Implementation notes

- Build a split layout: a fixed-width sidebar on the left containing a search `Input` and an inline results `Eventcalendar`, and the main month calendar filling the remaining width on the right.
- Set `view: { calendar: { labels: true } }` for the main calendar. Load events via `onPageLoading` using `getJson` with `args.viewStart`/`args.viewEnd` as date range params.
- Place a Mobiscroll `Input` with `startIcon="material-search"` and placeholder "Search events" at the top of the sidebar. On `onChange`, debounce by 200ms, then call `getJson` with the search text appended to the API URL. Pass the returned events to the inline results `Eventcalendar` and show it.
- The results `Eventcalendar` in the sidebar uses `showControls: false` and `view: { agenda: { type: 'year', size: 5 } }`. Render it conditionally - show it only after the first search has been performed.
- On `onEventClick` in the results agenda, call `inst.navigateToEvent(args.event)` on the main calendar instance (Angular: use `@ViewChild`) to jump to that event's date, and set it as `selectedEvents` to highlight it.

## 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 Search Popup](https://demo.mobiscroll.com/javascript/eventcalendar/searching-events-in-popup.md) - Search events in real time from the Javascript event calendar header — results appear in an agenda-style popup as you type, grouped by date.