Version: 5.35.0

Data binding

The Eventcalendar accepts an array of event objects through the data option of the component. The event array can be either a local static array, or populated on demand with remote requests.

Event data structure

The events of the Eventcalendar are specified as an array of event objects. The event object supports the following properties:

id String, Number - A unique id for the event. If not specifed, the event will get a generated id.
start Date, String, Object - Specifies the start of the event.
end Date, String, Object - Specifies the end of the event.
title String - The title of the event.
color String - The color of the event.
allDay Boolean - Specifies if the event is all day or not.
editable Boolean - specify if an event is editable or not. Setting it to false disables drag & drop, resize and delete, and the event will have the .mbsc-readonly-event css class. With this class, the fixed events will be easily customizable, for example: add opacity or disable the cursor on the fixed events.
dragBetweenResources Boolean - specifies whether the event is movable across resources. It applies for scheduler and timeline views. Has precedence over the eventDragBetweenResources property of the resource and the dragBetweenResources option.
dragInTime Boolean - specifies whether the event is movable in time. Has precedence over the eventDragInTime property of the resource and the dragInTime option.
resize Boolean - specifies whether the event is resizable. Has precedence over the eventResize property of the resource and the dragToResize option.
resource String, Number, Array - specify resource ids for the events. The event will display only in the specified resource group. If there is no resource id defined the event will be displayed at every resource group.
slot String, Number - specify slot ids for the events. The event will display only in the specified slot group. If there is no slot id defined the event will be displayed at every slot group.
recurring String, Object - Recurrence rule for the event.
recurringException String, Object, Array - Represents the exceptions of a recurring event. Useful when specific dates need to be skipped from the rule.
recurringExceptionRule String, Object - Represents the exception rule of a recurring event. Useful when recurring dates need to be skipped from the rule.
timezone String - The timezone of the event. When specified, it takes precedence over dataTimezone. A timezone plugin must be also passed to the component.
tooltip String - Specifies the tooltip text of the event.
cssClass String - Can be used to pass custom CSS classes on an event to event basis. Useful when customization is needed on the event level. For example: setting the width for specific events.
bufferBefore Number - Defines a buffer time in minutes that will be displayed before the start of the event. This buffer area can help you visualise delays or added minutes for tasks. For example travel time for meetings/appointments, briefing before flight, check in time on duty card.
bufferAfter Number - Defines a buffer time in minutes that will be displayed after the end of the event. This buffer area can help you visualise delays or added minutes for tasks. For example travel time after meetings/appointments, debriefing after flight, check out time on duty card.

Simple event object
const myMeeting = {
  start: "2023-07-14T08:00",
  end: "2023-07-14T09:00",
  title: "Meeting with Jenny",
};

info

The dates in the above structure can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects.

Using date object in event objects
const myBirthday = {
  start: new Date(1988, 5, 28), // 1988 June 28th
  allDay: true,
  recurring: {
    repeat: "yearly",
  },
  title: "My Birthday",
};

info

For Javascript Date objects the month numbers are zero based. Like: 0 - January, 1 - February ... 11 - December.

The event objects may have additional custom properties as well. The custom properties are not used by the eventcalendar, but they are kept and will be available anywhere the event objects are used. E.g. the onEventClick event will receive the event object as argument, containing the custom properties as well.

Event object with custom properties
const weeklyMeeting = {
  start: '2023-07-26T15:45',
  end: '2023-07-26T16:00',
  title: 'Daily summary',
  address: 'Main Street 64'
  videoUrl: 'https://myaddress.com/location',
  recipients: ['Jack', 'Sam', 'Teal`c']
}

Recurring events

The recurring, recurringException and recurringExceptionRule properties of the event object are used to define events that happen again over time. Check out the recurrence section for a more comprehensive description on recurring rules.

Local data

To bind local data to the event calendar, you can simply assign a JavaScript array of objects to the data option of the component.

import { Eventcalendar } from "@mobiscroll/react";

const myData = [
  {
    id: "event_id1",
    start: "2023-07-09",
    end: "2023-07-13",
    title: "My First Event",
  },
  {
    id: "event_id2",
    start: "2023-08-01",
    end: "2023-08-03",
    title: "My Second Event",
  },
];

function App() {
  return <Eventcalendar data={myData} />
}

Remote data

You can load the data through an external request and assign it to the data option of the component.

import { useEffect, useState } from "react";
import { Eventcalendar, getJson } from "@mobiscroll/react";

const MYVIEW = {
  calendar: { type: "month" },
  agenda: { type: "month" },
};

function App() {
  const [events, setEvents] = useState([]); // store events in the state

  // after render get the event data
  useEffect(() => {
    getJson(
      "https://trial.mobiscroll.com/events/?vers=5",
      (events) => {
        setEvents(events); // put the returned events into the state
      },
      "jsonp"
    );
  });

  return <Eventcalendar view={MYVIEW} data={events} />
}

On demand loading

Use the onPageLoading event to load the data relevant to the currently active view. The event fires every time the date range of the view changes, for example when someone navigates the event calendar. Getting the events in real time as the user interacts with the UI improves load performance and always serves the most recent data.

tip

You can pass the view variables - like month and year - in the URL and handle the filtering inside the API implementation.

import { useCallback, useState } from 'react'
import { Eventcalendar, getJson } from '@mobiscroll/vue'

const MY_VIEW = {
  schedule: { type: 'day' }
};

function App() {
  const [myEvents, setEvents] = useState([]);

  const myLoadPage = useCallback((args) => {
    const year = args.month.getFullYear();
    const month = args.month.getMonth();
    const day = args.month.getDate();

    getJson(
      'https://trial.mobiscroll.com/weeklyevents/?year=' + year + '&month=' + month + '&day=' + day,
      (data) => {
        setEvents(data);
      },
      'jsonp'
    )
  }, []);

  return <Eventcalendar data={myEvents} onPageLoading={myLoadPage} view={MY_VIEW} />
}

In case of the timeline view, data can also be loaded dynamically during scrolling. Scrolling vertically or horizontally triggers the onVirtualLoading lifecycle event, which can be used to load data incrementally during scrolling.

Event data structure​

Recurring events​

Local data

Remote data

On demand loading

Event data structure

Recurring events