---
title: "Vue Timeline Recurring Events Example | Mobiscroll"
component: "Timeline"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/timeline/recurring-events"
---

# Recurring Events - Vue Timeline demo

Configure daily, weekly, monthly, and yearly recurring events on the Vue Timeline — set recurrence rules, exclude dates with the interactive configurator. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/timeline/recurring-events)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/timeline/recurring-events)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/eventcalendar/timeline/recurring-events)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/recurring-events.md), [jQuery](https://demo.mobiscroll.com/jquery/timeline/recurring-events.md), [Angular](https://demo.mobiscroll.com/angular/timeline/recurring-events.md), [React](https://demo.mobiscroll.com/react/timeline/recurring-events.md)

## Description

Configure `daily`, `weekly`, `monthly` and `yearly` recurring events. On top of setting up recurrence, you can exclude specific and recurring days. This is especially useful in cases when a single occurrence of an event is deleted or is moved to a different time.

You can pass the recurrence rule in the `recurring` property of the event as an object or a string in `RRULE` format. [Learn about the event data structure and where to place the recurring rules](https://demo.mobiscroll.com/vue/timeline/event-data-structure).

Use the configurator to experiment, build strings and objects that you can grab and use.

**Interested in adding recurrence configuration to your UI?** [Take a look at this add/edit dialog →](https://demo.mobiscroll.com/vue/eventcalendar/recurring-event-add-edit-dialog)

## What this demo shows

- Shows an interactive recurrence configurator with three selectable sections for defining recurrence rules, excluded dates, and recurring exclusions.
- **Recurring rule** Displays a selectable row with an input that reflects the currently selected recurrence settings and a dark blue `Edit` button.
- **Recurring rule popup** Clicking the input or the `Edit` button opens a popup below the input.
- **Recurrence type** The top of the popup contains a segmented control with `Daily`, `Weekly`, `Monthly`, and `Yearly` options, where the selected option defines the recurrence type.
- **Repeat interval** Below the segmented control, the popup shows a `Repeat every [input] days` field with helper text explaining that the event repeats every day or every `x` days based on the entered value.
- **Stop condition** The bottom part of the popup contains a `Stop condition` section with three options for ending the recurrence.
- **Never stop** Shows an option that repeats the event indefinitely.
- **Run until date** Shows an option with a date input that opens a date picker and repeats the event until a specific date.
- **Run until occurrences** Shows an option with a numeric input that repeats the event until it reaches a specified number of occurrences.
- **Code preview** Next to the recurrence rule configurator, a code snippet updates to show the selected values and how the recurring rule should be configured.
- **Exclude specific dates** Shows a selectable section for excluding dates from recurring events with an `Exclude [input] from recurring events` field.
- **Date exclusion picker** Clicking the exclude input opens a date picker where multiple dates can be selected.
- **Recurring exclusions** Shows a third selectable section for defining a specific recurring rule for the days to exclude.
- **Recurring exclusions code preview** Next to this section, a code snippet shows the selected exclusion values and how that recurring rule should be configured.

## Best for

- **Learning recurrence setup** Explaining to Mobiscroll users how recurring event rules can be configured.

## Tutorial

### Recurring rule

- [x] Recurring Daily; Repeat every 1 day(s); Never stop;

### Add exceptions for specific days

- [ ] Exclude `2026-10-10, 2026-10-23, 2026-10-28` from recurring events

### Specify recurring rule for days to exclude

- [x] Recurring Monthly; Repeat every 1 month(s) on the First; Never stop;

### Recurrence rule

```js
// JS Object
recurring: {
    repeat: 'daily',
    interval: 1
}
                          
// RRULE String
recurring: 'FREQ=DAILY;INTERVAL=1'
```

With "Recurring rule" off:

```js

```

### Recurrence exception rule

```js
// JS Object
recurringExceptionRule: {
    repeat: 'monthly',
    day: 1,
    interval: 1
}
        
// RRULE String
recurringExceptionRule: 'FREQ=MONTHLY;BYMONTHDAY=1;INTERVAL=1'
```

With "Exclude from recurring events" on:

```js
recurringException: ['2026-10-10','2026-10-23','2026-10-28'], // Exact dates can only be passed in an array
// JS Object
recurringExceptionRule: {
    repeat: 'monthly',
    day: 1,
    interval: 1
}
        
// RRULE String
recurringExceptionRule: 'FREQ=MONTHLY;BYMONTHDAY=1;INTERVAL=1'
```

With "Specify recurring rule for days to exclude" off:

```js

```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-eventDelete) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option

## Code

### SFC JS

```vue
<script setup>
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myEvents = [
  {
    recurring: {
      repeat: 'daily', // Possible values: 'daily', 'weekly', 'monthly', 'yearly'
      from: '2021-06-01', // The start date of the occurrences
      until: '2021-07-20' // The end date of the occurrences
    },
    recurringException: ['2021-07-05', new Date(2021, 6, 6)], // Can contain string or date object
    recurringExceptionRule: {
      repeat: 'monthly',
      day: 1
    },
    title: 'Holiday',
    allDay: true,
    resource: [1, 2, 3, 4, 5]
  },
  {
    recurring: {
      repeat: 'weekly',
      weekDays: 'SA', // Comma separated list of the week days, possible values: 'SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'
      interval: 2 // The time interval for the rule (every 2 weeks in this example)
    },
    title: 'Shopping day',
    resource: 4
  },
  {
    recurring: {
      repeat: 'monthly',
      day: 15,
      count: 12 // The number of occurrences
    },
    title: 'Pay day',
    resource: 5
  },
  {
    recurring: {
      repeat: 'yearly',
      day: 1,
      month: 1
    },
    title: "New Year's Eve",
    resource: 2
  }
]

const myResources = [
  {
    id: 1,
    name: 'Resource A',
    color: '#fdf500'
  },
  {
    id: 2,
    name: 'Resource B',
    color: '#ff0101'
  },
  {
    id: 3,
    name: 'Resource C',
    color: '#01adff'
  },
  {
    id: 4,
    name: 'Resource D',
    color: '#239a21'
  },
  {
    id: 5,
    name: 'Resource E',
    color: '#ff4600'
  }
]

const myView = {
  timeline: {
    type: 'week'
  }
}
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :data="myEvents" :resources="myResources" :view="myView" />
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView, MbscResource } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myEvents: MbscCalendarEvent[] = [
  {
    recurring: {
      repeat: 'daily', // Possible values: 'daily', 'weekly', 'monthly', 'yearly'
      from: '2021-06-01', // The start date of the occurrences
      until: '2021-07-20' // The end date of the occurrences
    },
    recurringException: ['2021-07-05', new Date(2021, 6, 6)], // Can contain string or date object
    recurringExceptionRule: {
      repeat: 'monthly',
      day: 1
    },
    title: 'Holiday',
    allDay: true,
    resource: [1, 2, 3, 4, 5]
  },
  {
    recurring: {
      repeat: 'weekly',
      weekDays: 'SA', // Comma separated list of the week days, possible values: 'SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'
      interval: 2 // The time interval for the rule (every 2 weeks in this example)
    },
    title: 'Shopping day',
    resource: 4
  },
  {
    recurring: {
      repeat: 'monthly',
      day: 15,
      count: 12 // The number of occurrences
    },
    title: 'Pay day',
    resource: 5
  },
  {
    recurring: {
      repeat: 'yearly',
      day: 1,
      month: 1
    },
    title: "New Year's Eve",
    resource: 2
  }
]

const myResources: MbscResource[] = [
  {
    id: 1,
    name: 'Resource A',
    color: '#fdf500'
  },
  {
    id: 2,
    name: 'Resource B',
    color: '#ff0101'
  },
  {
    id: 3,
    name: 'Resource C',
    color: '#01adff'
  },
  {
    id: 4,
    name: 'Resource D',
    color: '#239a21'
  },
  {
    id: 5,
    name: 'Resource E',
    color: '#ff4600'
  }
]

const myView: MbscEventcalendarView = {
  timeline: {
    type: 'week'
  }
}
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :data="myEvents" :resources="myResources" :view="myView" />
</template>
```

## Implementation notes

- Use `timeline: { type: 'week' }` - a week view.
- Define 5 resources: Resource A (yellow `#fdf500`), Resource B (red `#ff0101`), Resource C (blue `#01adff`), Resource D (green `#239a21`), Resource E (orange `#ff4600`).
- Define 4 events, each demonstrating a different `recurring` repeat type:

  1. **Daily** - "Holiday" (`allDay: true`, assigned to all 5 resources via `resource: [1, 2, 3, 4, 5]`):
     ```
     recurring: { repeat: 'daily', from: '2021-06-01', until: '2021-07-20' }
     recurringException: ['2021-07-05', new Date(2021, 6, 6)]
     recurringExceptionRule: { repeat: 'monthly', day: 1 }
     ```
     - `from`/`until` bound the occurrence range to June 1-July 20, 2021.
     - `recurringException` removes specific dates: July 5 (ISO string) and July 6 (Date object) - showing that both formats are accepted.
     - `recurringExceptionRule` removes all occurrences that fall on the 1st of any month (in this range, July 1).

  2. **Weekly** - "Shopping day" (resource D):
     ```
     recurring: { repeat: 'weekly', weekDays: 'SA', interval: 2 }
     ```
     Repeats every other Saturday. `weekDays` accepts a comma-separated string of day codes: `'SU'`, `'MO'`, `'TU'`, `'WE'`, `'TH'`, `'FR'`, `'SA'`.

  3. **Monthly** - "Pay day" (resource E):
     ```
     recurring: { repeat: 'monthly', day: 15, count: 12 }
     ```
     Repeats on the 15th of each month for 12 occurrences total.

  4. **Yearly** - "New Year's Eve" (resource B):
     ```
     recurring: { repeat: 'yearly', day: 1, month: 1 }
     ```
     Repeats on January 1st every year.

## 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-vue.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 vue
   ```

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 vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Previous: [Date Formats](https://demo.mobiscroll.com/vue/timeline/date-object-ISO-8601-moment.md) - Pass JavaScript date objects, ISO 8601 strings, or Moment.js dates to events, marked dates, colors, and labels in the Vue Timeline.