---
title: "JQuery Scheduler Event Search Sidebar Example | Mobiscroll"
component: "Scheduler"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/scheduler/searching-events-in-sidebar"
---
# Event Search Sidebar - jQuery Scheduler demo
Add a real-time event search sidebar to the JQuery Scheduler — filter events as you type, with matching results grouped by date in an inline agenda list.
- [Live demo](https://demo.mobiscroll.com/jquery/scheduler/searching-events-in-sidebar)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/eventcalendar/scheduler/searching-events-in-sidebar)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/searching-events-in-sidebar.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/searching-events-in-sidebar.md), [React](https://demo.mobiscroll.com/react/scheduler/searching-events-in-sidebar.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/searching-events-in-sidebar.md)
## Description
Inline search can be easily implemented with the help of a separate [agenda](https://demo.mobiscroll.com/jquery/agenda) instance. This example is relying on a single API endpoint for getting the data onto the primary schedule view and also for getting the filtered data based on the search terms.
[Events can be filtered in real time](https://demo.mobiscroll.com/jquery/scheduler/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 using a similar search box with an [agenda listed in a popup](https://demo.mobiscroll.com/jquery/eventcalendar/searching-events-in-popup) instead of rendered inline.
## What this demo shows
- A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, a scrollable scheduler time grid for the selected week and a search sidebar placed next to it.
- **Search sidebar** The left 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 results** 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 scheduler to the date and hour that contain the selected event.
- **Empty state** When the search returns no matches, a `No events` message appears below the search box.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected week.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.
## Best for
- **Searchable scheduler interfaces** Schedulers where users need to find specific events without leaving the main scheduler 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/jquery/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option
- [`refDate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-refDate) - option
- [`showControls`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-showControls) - option
- [`onEventClick`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventClick) - event
- [`navigateToEvent`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-navigateToEvent) - method
- [`setSelectedEvents`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-setSelectedEvents) - method
- [`clickToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToResize) - option
- [`selectMultipleEvents`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-selectMultipleEvents) - option
- [`onPageLoading`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onPageLoading) - event
- [`setEvents`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-setEvents) - method
## Code
### JS
```js
mobiscroll.setOptions({
theme: 'ios',
themeVariant: 'light'
});
$(function () {
var timer;
var $searchList = $('#demo-search-results');
var list = $searchList
.mobiscroll()
.eventcalendar({
view: {
agenda: { type: 'year', size: 5 },
},
refDate: new Date(),
showControls: false,
onEventClick: function (args) {
calendar.navigateToEvent(args.event);
calendar.setSelectedEvents([args.event]);
},
})
.mobiscroll('getInst');
var calendar = $('#demo-search-events')
.mobiscroll()
.eventcalendar({
clickToCreate: false,
dragToCreate: false,
dragToMove: false,
dragToResize: false,
selectMultipleEvents: true,
view: {
scheduler: { type: 'week' },
},
onPageLoading: function (args) {
var start = mobiscroll.formatDate('YYYY-MM-DD', args.viewStart);
var end = mobiscroll.formatDate('YYYY-MM-DD', args.viewEnd);
$.getJSON(
'https://trial.mobiscroll.com/searchevents/?start=' + start + '&end=' + end + '&callback=?',
function (data) {
calendar.setEvents(data);
},
'jsonp',
);
},
})
.mobiscroll('getInst');
$searchList.hide();
$('#demo-search-input').on('input', function (ev) {
var searchText = ev.target.value;
clearTimeout(timer);
timer = setTimeout(function () {
if (searchText.length > 0) {
$.getJSON(
'https://trial.mobiscroll.com/searchevents/?text=' + searchText + '&callback=?',
function (data) {
list.setEvents(data);
$searchList.show();
},
'jsonp',
);
} else {
$searchList.hide();
}
}, 200);
});
});
```
### HTML
```html
```
### 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
- Use a two-panel layout: a left sidebar with the search input and results, and a right panel with the main scheduler.
- Configure the **search results** `Eventcalendar` with `view: { agenda: { type: 'year', size: 5 } }` and `showControls: false`. Show it only when there are results (React/Vue/Angular: conditional render; JS: `element.style.visibility`; jQuery: `$el.show()`/`$el.hide()`).
- Configure the **main scheduler** `Eventcalendar` with `view: { scheduler: { type: 'week' } }`, all drag/create options off, and `selectMultipleEvents: true`.
- **Debounced search**: on each input change, clear any pending timeout and set a 200ms timer. When it fires with non-empty text, fetch from `https://trial.mobiscroll.com/searchevents/?text=` via JSONP: React/Vue call `getJson(url, callback, 'jsonp')`; JS calls `mobiscroll.getJson(url, callback, 'jsonp')`; jQuery calls `$.getJSON(url + '&callback=?', callback)`; Angular uses `HttpClient.jsonp()`. Imperative API (JS/jQuery): call `list.setEvents(data)` in the callback.
- **Page-level data loading**: handle `onPageLoading` on the main calendar. Format `args.viewStart` and `args.viewEnd` as `'YYYY-MM-DD'` with `formatDate`, then fetch from `https://trial.mobiscroll.com/searchevents/?start=&end=` via JSONP. React/Vue/Angular: wrap the fetch call in a no-delay `setTimeout` to defer past the current rendering cycle. Imperative API (JS/jQuery): call `calendar.setEvents(data)` in the callback.
- **Navigating on result click**: handle `onEventClick` on the search results agenda. Call `navigateToEvent(args.event)` on the main calendar instance to jump to that event's date. Then highlight it: set `selectedEvents` to `[args.event]`; for the imperative API, call `calendar.setSelectedEvents([args.event])`.
## 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-jquery.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 jquery
```
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 jquery --trial`.
Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/jquery/getting-started/installation
## Related demos
- Previous: [Multi-Timezone](https://demo.mobiscroll.com/jquery/scheduler/show-multiple-timezones.md) - Show multiple timezone panels side by side in the JQuery Scheduler — set custom labels per track and compare event times across regions.
- Next: [External Date Navigation](https://demo.mobiscroll.com/jquery/scheduler/navigate-view-from-external-calendar.md) - Use a two-pane layout to sync a date picker and JQuery Scheduler — selecting a date navigates the scheduler automatically.