---
title: "JQuery Scheduler Multi-Resource Shared Events Example | Mobiscroll"
component: "Scheduler"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/scheduler/shared-events-across-resources"
---
# Multi-Resource Shared Events - jQuery Scheduler demo
Schedule event across multiple resources in the JQuery Scheduler — for shared work calendars, mixed resource types like instructor and aircraft.
- [Live demo](https://demo.mobiscroll.com/jquery/scheduler/shared-events-across-resources)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/eventcalendar/scheduler/shared-events-across-resources)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/shared-events-across-resources.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/shared-events-across-resources.md), [React](https://demo.mobiscroll.com/react/scheduler/shared-events-across-resources.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/shared-events-across-resources.md)
## Description
Events can be shared among resources. This can easily be the same resource type, like **people** in a **shared work calendar** scenario or different resource types, like **aircraft** and **instructor** in a **flight training** scenario where you'll have to schedule an instructor and an aircraft for a class which is the event.
Shared events will render correctly in the appropriate resource columns with drag & drop, validation across invalid dates and times will work out of the box. All you need to do is to add both `resourceIDs` to the event.
## What this demo shows
- A desktop weekly scheduler from Monday to Friday, with a fixed resource and week strip, and a vertically scrollable time grid running from 5 AM to 10 PM.
- **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.
- **Resource grouping** The selected week is repeated under each resource, so every resource has its own week view in the scheduler grid.
- **Time grid** The scheduler shows 17-hours range from 5 AM to 10 PM and can be scrolled vertically.
- **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.
- **Multi-resource events** Events assigned to more than one resource appear in each involved resource column for the same day.
- **Synchronized multi-resource updates** Dragging or resizing a multi-resource event updates the corresponding event instance for the other assigned resources.
- **Repeated event examples** The demo includes multi-resource events such as Impact Training for Kate and John on Monday, General orientation for Ryan, Kate, and John on Wednesday, and Product team mtg. for Kate and John on Thusday.
- **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.
- **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 and opens a popup below the event card.
- **Popup form** The popup includes a `Title` text field prefilled with `New event` and a multi-select segmented control with the resource names Ryan, Kate, and John. The same popup opens when an event card is double-clicked.
- **Popup confirmation** The popup footer includes an `Ok` button to confirm the event details and a `Cancel` button to discard them.
## Best for
- **Shared work calendars** Scheduling meetings, training sessions, or other events that involve more than one person while keeping the event visible under each assigned resource.
- **Mixed resource scheduling** Modeling scenarios where an event needs multiple resource types, such as scheduling both an instructor and an aircraft for a flight training class.
- **Multi-resource event editing** Keeping shared events in sync when users drag, resize, create, or edit events across resource columns.
## 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
- [`setOptions`](https://mobiscroll.com/docs/jquery/popup/api#method-setOptions) - method
- [`anchor`](https://mobiscroll.com/docs/jquery/popup/api#opt-anchor) - option
- [`open`](https://mobiscroll.com/docs/jquery/popup/api#method-open) - 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
- [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-resources) - option
- [`extendDefaultEvent`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-extendDefaultEvent) - option
- [`onEventCreated`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventCreated) - event
- [`onEventDoubleClick`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventDoubleClick) - event
- [`display`](https://mobiscroll.com/docs/jquery/popup/api#opt-display) - option
- [`touchUi`](https://mobiscroll.com/docs/jquery/popup/api#opt-touchUi) - option
- [`width`](https://mobiscroll.com/docs/jquery/popup/api#opt-width) - option
- [`buttons`](https://mobiscroll.com/docs/jquery/popup/api#opt-buttons) - option
- [`updateEvent`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-updateEvent) - method
- [`close`](https://mobiscroll.com/docs/jquery/popup/api#method-close) - method
- [`cssClass`](https://mobiscroll.com/docs/jquery/popup/api#opt-cssClass) - option
- [`onClose`](https://mobiscroll.com/docs/jquery/popup/api#event-onClose) - event
- [`removeEvent`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-removeEvent) - method
## Code
### JS
```js
mobiscroll.setOptions({
theme: 'ios',
themeVariant: 'light'
});
$(function () {
function showPopup(args) {
var event = args.event;
var resources = Array.isArray(event.resource) ? event.resource : [event.resource];
// Store temporary event
tempEvent = event;
// Fill popup with the current event data
$title.mobiscroll('getInst').value = event.title;
$segmented.each(function () {
var segmented = $(this);
var value = +segmented.val();
var segmentedInst = segmented.mobiscroll('getInst');
segmentedInst.checked = resources.indexOf(value) !== -1;
});
// Set anchor for the popup
popup.setOptions({ anchor: args.target ? args.target : args.domEvent.target });
popup.open();
}
var tempEvent;
var deleteEvent;
var $title = $('#demo-shared-events-title');
var $segmented = $('[name="demo-shared-events-select"]');
var calendar = $('#demo-shared-events-across-resources')
.mobiscroll()
.eventcalendar({
clickToCreate: true,
dragToCreate: true,
dragToMove: true,
dragToResize: true,
view: {
scheduler: {
type: 'week',
allDay: false,
startDay: 1,
endDay: 5,
startTime: '05:00',
endTime: '22:00',
},
},
data: [
{
start: '2026-10-21T10:00',
end: '2026-10-21T15:00',
title: 'Impact Training',
resource: [2, 3],
color: '#35bb5a',
},
{
start: '2026-10-22T10:00',
end: '2026-10-22T15:00',
title: 'Impact Training',
resource: [2, 3],
color: '#35bb5a',
},
{
start: '2026-10-24T08:30',
end: '2026-10-24T10:00',
title: 'Quick mtg. with Martin',
resource: 3,
color: '#913aa7',
},
{
start: '2026-10-24T12:00',
end: '2026-10-24T13:00',
title: 'General orientation',
resource: [1, 2, 3],
color: '#a71111',
},
{
start: '2026-10-25T10:00',
end: '2026-10-25T11:00',
title: 'Product team mtg.',
resource: [2, 3],
color: '#6e7f29',
},
{
start: '2026-10-26T14:00',
end: '2026-10-26T16:00',
title: 'Stakeholder mtg.',
resource: 1,
color: '#dcd234',
},
{
start: '2026-10-27T10:00',
end: '2026-10-27T14:00',
title: 'Innovation mtg.',
resource: [1, 2],
color: '#de3d83',
},
],
resources: [
{
id: 1,
name: 'Ryan',
color: '#f7c4b4',
},
{
id: 2,
name: 'Kate',
color: '#c6f1c9',
},
{
id: 3,
name: 'John',
color: '#e8d0ef',
},
],
extendDefaultEvent: function () {
return { color: '#4a9e42' };
},
onEventCreated: function (args) {
deleteEvent = true;
showPopup(args);
},
onEventDoubleClick: function (args) {
deleteEvent = false;
showPopup(args);
},
})
.mobiscroll('getInst');
var popup = $('#demo-shared-events-popup')
.mobiscroll()
.popup({
display: 'anchored',
contentPadding: false,
touchUi: false,
width: 350,
buttons: [
'cancel',
{
text: 'OK',
keyCode: 'enter',
handler: function () {
var selected = [];
$segmented.each(function () {
var segmented = $(this);
var segmentedInst = segmented.mobiscroll('getInst');
if (segmentedInst.checked) {
selected.push(+segmented.val());
}
});
tempEvent.resource = selected;
deleteEvent = false;
// Update event with the new properties on OK button click
calendar.updateEvent(tempEvent);
popup.close();
},
cssClass: 'mbsc-popup-button-primary',
},
],
onClose: function () {
if (deleteEvent) {
calendar.removeEvent(tempEvent);
}
},
})
.mobiscroll('getInst');
$title.on('input', function (ev) {
tempEvent.title = ev.target.value;
});
});
```
### HTML
```html
```
## Implementation notes
- Use `view: { scheduler: { type: 'week', allDay: false, startDay: 1, endDay: 5, startTime: '05:00', endTime: '22:00' } }` - Mon-Fri, 5am-10pm, no all-day row. Enable `clickToCreate: true`, `dragToCreate: true`, `dragToMove: true`, `dragToResize: true`.
- Define 3 resources: Ryan (id: 1), Kate (id: 2), John (id: 3), each with a pastel background color.
- Define 7 inline events with relative dates (today ±3 days). Set `resource` as a single id or an array of ids to share an event across multiple resources: e.g. `resource: [2, 3]` renders the event in both Kate's and John's column. One event uses all three: `resource: [1, 2, 3]`.
- Set `extendDefaultEvent` to return `{ color: '#4a9e42' }` so newly created events default to green.
- On `onEventCreated`, store the event as `tempEvent`, set a "new event" flag, and open the popup. On `onEventDoubleClick`, clear the flag and open the popup to edit the existing event. React additionally registers `onEventDeleted` to filter the deleted event from the events array.
- The popup (anchored to `args.target ?? args.domEvent.target`, width 350) contains a title `Input` and a multi-select `SegmentedGroup` with one segment per resource name. Bind the title input to state and apply it on OK; for the imperative API, also keep `tempEvent.title` in sync live via an `input` listener on the title input. On OK: apply the selected resource ids to `tempEvent.resource`, then replace the event in the events array (React/Angular/Vue: update the bound events array/state with the modified event); for the imperative API, call `inst.updateEvent(tempEvent)`. On cancel/close without confirming: if the event was new, filter it from the events array; for the imperative API, call `inst.removeEvent(tempEvent)` in the popup's `onClose`.
## 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: [Group by Resource or Date](https://demo.mobiscroll.com/jquery/scheduler/group-by-resource-by-day.md) - Show resources as the primary group in a JQuery Scheduler and toggle between resource and date grouping using the built-in segmented control.
- Next: [Dynamic Resource Filtering](https://demo.mobiscroll.com/jquery/scheduler/dynamic-add-remove-resources-filter.md) - Show or hide resources in a JQuery Scheduler at runtime using a checklist — filter people, teams, or rooms without changing event data.