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

# Custom Event Sort Order - JavaScript Event calendar demo

Control event display order in a Javascript event calendar — assign per-event priority values or supply a custom function to override the default ordering. Plain JavaScript API.

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

## Description

When rendering events, the default logic determines the order:

- 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 `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/calendar#event-order)

## What this demo shows

- A weekly event calendar view where events are rendered as labels inside the day cells.
- **Event label ordering** Event labels are normally ordered with all-day events first, followed by non-all-day events sorted by start time, then alphabetically by title when start times match.
- **Custom event order** This demo reorganizes the labels with custom event ordering.
- **Event states** Labels use different visual styles to distinguish states such as `PROPOSED` and `APPROVED`.
- **Event selection** Clicking or hovering over an event label highlights it as the selected event.
- **Day hover state** Hovering over a day cell highlights the day number in the top-right corner with a gray background.
- **Day selection** Clicking the empty area of a day cell selects that day and highlights the day number with a blue background.
- **Calendar navigation** The visible week can be changed by clicking and dragging the calendar left or right.
- **Header controls** The header shows the current month and year on the left, with previous and next navigation arrows and a `Today` button on the right.

## Best for

- **Staff absence planning** Showing multiple time-off requests on the same day in a compact weekly calendar.
- **Leave management** Tracking proposed and approved leave requests with distinct visual states.
- **Team availability overview** Giving HR teams, managers, and team leads a quick view of who is unavailable across the week.

## 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'
});

var now = new Date();
var day = now.getDay();
var monday = now.getDate() - day + (day == 0 ? -6 : 1);

mobiscroll.eventcalendar('#demo-custom-event-sort', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    calendar: {
      type: 'week',
    },
  },
  data: [
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday),
      title: 'Kate OFF (PROPOSED)',
      color: '#e7b300',
      allDay: true,
      accepted: false,
      order: 1,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday),
      title: 'John OFF (APPROVED)',
      color: '#00ca10',
      allDay: true,
      accepted: true,
      order: 2,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday),
      title: 'Mark OFF (PROPOSED)',
      color: '#e7b300',
      allDay: true,
      accepted: false,
      order: 1,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday),
      title: 'Emma OFF (PROPOSED)',
      color: '#e7b300',
      allDay: true,
      accepted: false,
      order: 1,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday + 1),
      title: 'Mark OFF (APPROVED)',
      color: '#00ca10',
      allDay: true,
      accepted: true,
      order: 2,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday + 1),
      title: 'Carol OFF (PROPOSED)',
      color: '#e7b300',
      allDay: true,
      accepted: false,
      order: 1,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday + 2),
      title: 'Luke OFF (PROPOSED)',
      color: '#e7b300',
      allDay: true,
      accepted: false,
      order: 1,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday + 2),
      title: 'Carol OFF (APPROVED)',
      color: '#00ca10',
      allDay: true,
      accepted: true,
      order: 2,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday + 2),
      title: 'Kate OFF (APPROVED)',
      color: '#00ca10',
      allDay: true,
      accepted: true,
      order: 2,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday + 2),
      title: 'Dean OFF (PROPOSED)',
      color: '#e7b300',
      allDay: true,
      accepted: false,
      order: 1,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday + 2),
      title: 'Emma OFF (APPROVED)',
      color: '#00ca10',
      allDay: true,
      accepted: true,
      order: 2,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday + 2),
      title: 'Jason OFF (APPROVED)',
      color: '#00ca10',
      allDay: true,
      accepted: true,
      order: 2,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday + 3),
      title: 'Jason OFF (APPROVED)',
      color: '#00ca10',
      allDay: true,
      accepted: true,
      order: 2,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday + 4),
      title: 'Ryan OFF (PROPOSED)',
      color: '#e7b300',
      allDay: true,
      accepted: false,
      order: 1,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday + 4),
      title: 'John OFF (APPROVED)',
      color: '#00ca10',
      allDay: true,
      accepted: true,
      order: 2,
    },
    {
      start: new Date(now.getFullYear(), now.getMonth(), monday + 4),
      title: 'Dean OFF (PROPOSED)',
      color: '#e7b300',
      allDay: true,
      accepted: false,
      order: 1,
    },
  ],
});
```

### HTML

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

## Implementation notes

- Set `view: { calendar: { type: 'week' } }` to display a weekly calendar with event labels in the day cells.
- Define events with `allDay: true` and assign each a numeric `order` property. PROPOSED requests use `order: 1`; APPROVED use `order: 2` - this places all pending requests above approved ones within each day cell.
- Use `color` to distinguish status visually: yellow for PROPOSED, green for APPROVED.
- For more advanced sorting logic, the `eventOrder` option accepts a compare function that receives two events and returns `-1` or `1`.

## 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 Popover](https://demo.mobiscroll.com/javascript/eventcalendar/event-popover.md) - Keep the month grid clean in a Javascript event calendar — day cells show a dot or event count, and clicking opens a popover listing that day's events.
- Next: [Timezone Configuration](https://demo.mobiscroll.com/javascript/eventcalendar/setting-the-timezone.md) - Set independent data and display timezones in a Javascript event calendar — configure how events are stored and let users switch the visible timezone.