---
title: "Javascript Scheduler Custom Event Order Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/custom-event-sort"
---

# Custom Event Order - JavaScript Scheduler demo

Control the event display order in a Javascript Scheduler — set per-event priorities or a custom sort function to override the default ordering rules. Plain JavaScript API.

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

## Description

The rendering engine uses the following two concepts to determine how the events are rendered:

1. Event data order
2. Event layout

The data order is determined by the following logic:

- All-day events are placed at the top
- Non-all-day events follow, sorted by their start times
- Events with the same start time are ordered alphabetically by their title

The event layout process determines the visual positioning and dimensions of events. This is a built-in functionality and cannot be altered externally. The layout algorithm processes the sorted event list and calculates each event's position and size. The algorithm follows these steps:

1. The first event is placed in the first position of the event column
2. If two or more events overlap in their start/end times, the later event is placed in the next event column, positioned after to the previous event
3. If a subsequent event does not overlap with any already added events, it is placed back in the first event column
4. This process continues until all events are positioned within their respective columns

The `order` property of the event data can be used to override the default ordering. The `order` property takes precedence over the default rules. If two events have the same order value, the default rules apply. For a more advanced order logic, the [`eventOrder` option](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventOrder) can be used which expects a function that compares two events and returns an order (-1 or 1).

**Do you want to learn about the event ordering?** [Learn more about it in the documentation →](https://mobiscroll.com/docs/javascript/eventcalendar/scheduler#event-order)

## What this demo shows

- A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week.
- **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.
- **Event styling** Event cards use distinct colors and a colored left stripe to make overlapping or differently ordered events easier to distinguish.
- **Custom event order** The demo shows how the event `order` property can override the default event ordering rules.
- **Default event order** Without a custom `order` value, all-day events are placed first, timed events are sorted by start time, and events with the same start time are sorted alphabetically by title.
- **Layout behavior** The built-in scheduler layout algorithm places overlapping events into adjacent columns and returns non-overlapping events to the first available column.
- **Advanced ordering** The `eventOrder` option can be used when event ordering needs custom comparison logic beyond the `order` property.
- **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

- **Custom event ordering** Demonstrating how to control the order of overlapping events in a scheduler view.
- **Dense weekly schedules** Showing multiple events that share the same day or time range while keeping their visual order predictable.
- **Priority-based scheduling** Displaying events where priority, status, or another business rule should influence render order.

## 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
- [`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
- [`eventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventDelete) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option

## Code

### JS

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

mobiscroll.eventcalendar('#demo-custom-event-sort', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    scheduler: {
      type: 'week',
    },
  },
  data: [
    {
      id: 1,
      start: '2026-10-24T02:00',
      end: '2026-10-24T20:00',
      title: 'Event 1 - order 2',
      order: 2,
      color: '#e7b300',
    },
    {
      id: 2,
      start: '2026-10-24T07:00',
      end: '2026-10-24T19:00',
      title: 'Event 2 - order 4',
      order: 4,
      color: '#eb4034',
    },
    {
      id: 3,
      start: '2026-10-24T10:00',
      end: '2026-10-24T16:00',
      title: 'Event 3 - order 3',
      order: 2,
      color: '#00ca10',
    },
    {
      id: 4,
      start: '2026-10-24T12:00',
      end: '2026-10-24T15:00',
      title: 'Event 4 - order 1',
      order: 1,
      color: '#f5850c',
    },
    {
      id: 5,
      start: '2026-10-25T08:00',
      end: '2026-10-25T11:00',
      title: 'Event 6 - order 1',
      order: 1,
      color: '#f5850c',
    },
    {
      id: 6,
      start: '2026-10-25T11:00',
      end: '2026-10-25T15:00',
      title: 'Event 7 - order 3',
      order: 3,
      color: '#00ca10',
    },
    {
      id: 7,
      start: '2026-10-25T11:00',
      end: '2026-10-25T15:00',
      title: 'Event 8 - order 2',
      order: 2,
      color: '#e7b300',
    },
    {
      id: 8,
      start: '2026-10-25T15:00',
      end: '2026-10-25T20:00',
      title: 'Event 9 - order 2',
      order: 2,
      color: '#e7b300',
    },
    {
      id: 9,
      start: '2026-10-25T15:00',
      end: '2026-10-25T19:00',
      title: 'Event 10 - order 1',
      order: 1,
      color: '#f5850c',
    },
    {
      id: 10,
      start: '2026-10-23T02:00',
      end: '2026-10-23T14:00',
      title: 'event 11 - order 1',
      order: 1,
      color: '#f5850c',
    },
    {
      id: 11,
      start: '2026-10-23T04:00',
      end: '2026-10-23T10:00',
      title: 'Event 12 - order 2',
      order: 2,
      color: '#e7b300',
    },
    {
      id: 12,
      start: '2026-10-23T06:00',
      end: '2026-10-23T12:00',
      title: 'Event 13 - order 2',
      order: 2,
      color: '#e7b300',
    },
  ],
});
```

### HTML

```html
<div id="demo-custom-event-sort"></div>
```

## Implementation notes

- Use `view: { scheduler: { type: 'week' } }`.
- Define 12 events inline using `dyndatetime` offsets, spread across day-1, today, and day+1. Each event carries `id`, `start`, `end`, `title`, `order`, and `color`.
- The `order` property overrides the default event sort. Lower values are rendered first when events overlap in the same time slot. Event titles encode the assigned order value (e.g. `'Event 1 - order 2'`, `'Event 4 - order 1'`) to make the ordering effect immediately visible.
- Each order value maps to a distinct color, so priority groups are visually distinct in the rendered output.

## 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: [Multiple Timezone Support](https://demo.mobiscroll.com/javascript/scheduler/multiple-timezone-support.md) - Show the same events in different timezones in the Javascript Scheduler — add a header dropdown to let users switch the display timezone at runtime.
- Next: [Multi-Timezone](https://demo.mobiscroll.com/javascript/scheduler/show-multiple-timezones.md) - Show multiple timezone panels side by side in the Javascript Scheduler — set custom labels per track and compare event times across regions.