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

# Custom Event Sort - JavaScript Agenda demo

Control the display order of events in a Javascript agenda view — set per-event priority or use a custom sort function. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/agenda/custom-event-sort)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/agenda/custom-event-sort)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/agenda/custom-event-sort.md), [Angular](https://demo.mobiscroll.com/angular/agenda/custom-event-sort.md), [React](https://demo.mobiscroll.com/react/agenda/custom-event-sort.md), [Vue](https://demo.mobiscroll.com/vue/agenda/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/agenda#event-order)

## What this demo shows

- A weekly agenda view where events are grouped by date and displayed with a custom event order.
- **Header navigation:** The week range label opens date navigation, while the previous and next arrows move between weeks. The Today button returns the agenda to the current date.
- **Agenda list:** The area below the header lists the events for the selected week, grouped under their dates.
- **Sticky day headers:** As the agenda scrolls vertically, each date header remains visible while its events appear underneath.
- **Default event ordering:** Agenda events 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 overrides the default ordering with a custom order value on the event data.
- **Event states:** Events use different visual styles to distinguish states such as `PROPOSED` and `APPROVED`.
- **Event cards:** Events appear as agenda cards with a colored strip on the left and the event title next to it. All-day events show an all-day label on the right.
- **Event interaction:** Hovering an event highlights it.
- **Event selection:** Clicking an event selects and highlights it.

## Best for

- **Approval workflows:** Listing proposed items before approved items, even when the default date or title ordering would place them differently.
- **Priority-based agendas:** Showing higher-priority events first within each day of the agenda view.
- **Status-driven planning:** Grouping agenda items by workflow state, such as pending, proposed, approved, or confirmed.
- **Operational review lists:** Presenting events in the order a team needs to process them instead of relying only on start time or alphabetical sorting.

## 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
- [`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', {
  view: {
    agenda: { 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

- Use `view: { agenda: { type: 'week' } }`.
- Define a static inline event array - all events are all-day (`allDay: true`). Assign an `order` property to each event to control display sequence: `order: 1` for pending/proposed items (yellow, `#e7b300`), `order: 2` for approved items (green, `#00ca10`). Events with equal `order` fall back to default rules (all-day first, then by start time, then alphabetically by title). Use relative dates so events always land on the current week.

## 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

- Next: [Multi-Timezone Display](https://demo.mobiscroll.com/javascript/agenda/setting-the-timezone.md) - Show Javascript Agenda events in any timezone — set data and display timezones, then let users switch with a timezone picker.