Load Inline Events

What is a timeline without any events in it? To populate it with events all you have to do is pass the event array to the data option.

In a real-world scenario you would probably load the events from a remote resource or event better, load them on demand. However the point of this example is to understand how easy it is to add events to the timeline.

Do you want to learn about the event data sctructure?  See how the event object is built →
Get started with this example

Demo

Loading the live demo

Preview in full screen

Add events to a Timeline by passing an inline event array — see how the event object is structured.

Code

View code on GitHub 
<script setup>
import { MbscEventcalendar, setOptions  } from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

const now = new Date()

const myEvents = ref([
  {
    start: '2026-10-21T09:00',
    end: '2026-10-24T18:00',
    title: 'Business of Software Conference',
    resource: 2
  },
  {
    start: '2026-10-21T13:00',
    end: '2026-10-22T21:00',
    title: 'Friends binge marathon',
    resource: 4
  },
  {
    start: '2026-10-28T13:00',
    end: '2026-10-29T21:00',
    title: 'Friends binge marathon',
    resource: 1
  },
  {
    start: '2026-10-21T08:00',
    end: '2026-10-21T10:00',
    title: 'Product team mtg.',
    resource: 5
  },
  {
    start: '2026-10-22T07:00',
    end: '2026-10-22T08:00',
    title: 'Green box to post office',
    resource: 5
  },
  {
    start: '2026-10-20T08:30',
    end: '2026-10-20T10:00',
    title: 'Quick mtg. with Martin',
    resource: 2
  },
  {
    start: '2026-10-08T09:30',
    end: '2026-10-08T12:00',
    title: 'Product team mtg.',
    resource: 4
  },
  {
    start: '2026-10-08T11:00',
    end: '2026-10-08T12:30',
    title: 'Stakeholder mtg.',
    resource: 2
  },
  {
    start: '2026-10-08T13:00',
    end: '2026-10-08T14:30',
    title: "Lunch @ Butcher's",
    resource: 2
  },
  {
    start: '2026-10-08T15:00',
    end: '2026-10-08T17:00',
    title: 'General orientation',
    resource: 4
  },
  {
    recurring: {
      repeat: 'yearly',
      month: now.getMonth() + 1,
      day: 14
    },
    allDay: true,
    title: 'Dexter BD',
    resource: 2
  },
  {
    recurring: {
      repeat: 'yearly',
      month: now.getMonth() + 1,
      day: 25
    },
    allDay: true,
    title: 'Luke BD',
    resource: 2
  },
  {
    recurring: {
      repeat: 'weekly',
      weekDays: 'WE'
    },
    allDay: true,
    title: 'Employment (Semi-weekly)',
    resource: [1, 3]
  },
  {
    start: '2026-10-10T00:00',
    end: '2026-10-15T00:00',
    allDay: true,
    title: 'Sam OFF',
    resource: 4
  },
  {
    start: '2026-10-18T00:00',
    end: '2026-10-29T00:00',
    allDay: true,
    title: 'Europe tour',
    resource: [1, 4, 5]
  },
  {
    start: '2026-02-07T00:00',
    end: '2026-02-25T00:00',
    allDay: true,
    title: 'Dean OFF',
    resource: 5
  },
  {
    start: '2026-03-05T00:00',
    end: '2026-03-14T00:00',
    allDay: true,
    title: 'Mike OFF',
    resource: 2
  },
  {
    start: '2026-05-07T00:00',
    end: '2026-05-16T00:00',
    allDay: true,
    title: 'John OFF',
    resource: 4
  },
  {
    start: '2026-06-01T00:00',
    end: '2026-06-11T00:00',
    allDay: true,
    title: 'Carol OFF',
    resource: 1
  },
  {
    start: '2026-07-02T00:00',
    end: '2026-07-17T00:00',
    allDay: true,
    title: 'Jason OFF',
    resource: 5
  },
  {
    start: '2026-08-06T00:00',
    end: '2026-08-14T00:00',
    allDay: true,
    title: 'Ashley OFF',
    resource: 3
  },
  {
    start: '2026-09-10T00:00',
    end: '2026-09-20T00:00',
    allDay: true,
    title: 'Marisol OFF',
    resource: 2
  },
  {
    start: '2026-10-01T00:00',
    end: '2026-10-12T00:00',
    allDay: true,
    title: 'Sharon OFF',
    resource: 3
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 12,
      day: 25
    },
    allDay: true,
    title: 'Christmas Day',
    resource: [1, 2, 3, 4, 5]
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 1,
      day: 1
    },
    allDay: true,
    title: "New Year's day",
    resource: [1, 2, 3, 4, 5]
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 4,
      day: 1
    },
    allDay: true,
    title: "April Fool's Day",
    resource: [1, 2, 3, 4, 5]
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 720 for the third quarter',
    resource: 5
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 730 and pay tax on wagers accepted during September',
    resource: 1
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 2290 and pay the tax for vehicles first used during September',
    resource: 5
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 941 for the third quarter',
    resource: 2
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'Deposit FUTA owed through Sep if more than $500',
    resource: 14
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 30
    },
    allDay: true,
    title: 'Deposit payroll tax for payments on Nov 21-24 if the semiweekly deposit rule applies',
    resource: 2
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 30
    },
    allDay: true,
    title: 'File Form 730 and pay tax on wagers accepted during October',
    resource: 5
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 30
    },
    allDay: true,
    title: 'File Form 2290 and pay the tax for vehicles first used during October',
    resource: 4
  }
])

const myResources = ref([
  {
    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: 'day' }
}
</script>

<template>
  <MbscEventcalendar :view="myView" :data="myEvents" :resources="myResources" />
</template>

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.