---
title: "Javascript Timeline Load Events from Google Calendar Example | Mobiscroll"
component: "Timeline"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/timeline/load-events-from-google-calendar"
---

# Load Events from Google Calendar - JavaScript Timeline demo

Load public Google Calendar events into a Javascript Timeline — show holiday calendars as resource rows using a Calendar ID and API key. Plain JS api for usage everywhere.

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

## Description

Event data can be loaded from remote sources, like public google calendars. Through the [**integration plugin**](https://mobiscroll.com/docs/javascript/eventcalendar/calendar-integrations) you can easily show events that are available in a public calendar. The integration plugin needs to be added to the download package or installed separately from a dedicated NPM package.

You will just need the `CALENDAR_ID` and an `apiKey` from google and you should be ready to roll.

In this example you can see how multiple public holiday calendars are loaded as separate resources into the timeline.

Public calendars are read-only. If you are interested in syncing private google calendars with read/write/delete access, [check out this example](https://demo.mobiscroll.com/javascript/timeline/sync-events-google-calendar).

This example uses the [**integration plugin**](https://mobiscroll.com/docs/javascript/eventcalendar/calendar-integrations) to connect to and load events from Google Calendar and it is not available in the trial. Give the live demo a try and see how it can be configured.

## What this demo shows

- A desktop monthly timeline that loads events from multiple public Google Calendars.
- **Header navigation** The month and year label opens date navigation, while the previous and next arrows move between months and the Today button returns to the current date.
- **Month timeline** Days are arranged horizontally across the selected month, with the current date highlighted.
- **Resources** Public Google holiday calendars are shown as separate resource rows on the left.
- **Holiday calendars** The demo includes public holiday calendars for multiple countries.
- **Event labels** Holidays appear as colored labels with the event title.
- **Date positioning** Events are placed in the row of their assigned Google Calendar resource and across their matching date range.
- **Read-only behavior** Public Google Calendar events can be browsed in the timeline but are not edited in this demo.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through dates and resources.

## Best for

- **Public Google Calendar overlays** Showing events from public Google Calendars inside a Mobiscroll timeline.
- **Holiday calendar timelines** Comparing public holidays across countries in separate resource rows.
- **Read-only event publishing** Sharing organization, team, or community calendars where users need to browse events without editing them.
- **External calendar data** Loading remote calendar events into Mobiscroll by using Google Calendar IDs and an API key.

## 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
- [`onInit`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onInit) - event
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`clickToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-clickToCreate) - option
- [`exclusiveEndDates`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-exclusiveEndDates) - option
- [`resources`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources) - option
- [`onPageLoading`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onPageLoading) - event

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

var googleCalendarSync = mobiscroll.googleCalendarSync;
var calendars = [
  { id: 'en.french#holiday@group.v.calendar.google.com', name: 'Holidays in France', color: '#D81B60' },
  { id: 'en.hungarian#holiday@group.v.calendar.google.com', name: 'Holidays in Hungary', color: '#AD1457' },
  { id: 'en.german#holiday@group.v.calendar.google.com', name: 'Holidays in Germany', color: '#F4511E' },
  { id: 'en.indian#holiday@group.v.calendar.google.com', name: 'Holidays in India', color: '#E4C441' },
  { id: 'en.romanian#holiday@group.v.calendar.google.com', name: 'Holidays in Romania', color: '#0B8043' },
  { id: 'en.uk#holiday@group.v.calendar.google.com', name: 'Holidays in United Kingdom', color: '#3F51B5' },
  { id: 'en.usa#holiday@group.v.calendar.google.com', name: 'Holidays in United States', color: '#8E24AA' },
];
var calendarIds = calendars.map(function (cal) {
  return cal.id;
});
var firstDay;
var lastDay;

googleCalendarSync.init({
  apiKey: '<YOUR_GOOGLE_API_KEY>',
  onInit: loadEvents,
});

function loadEvents() {
  googleCalendarSync
    .getEvents(calendarIds, firstDay, lastDay)
    .then(function (resp) {
      resp.forEach(function (event) {
        event.resource = event.googleCalendarId;
      });
      calInst.setEvents(resp);
    })
    .catch(onError);
}

function onError(resp) {
  mobiscroll.toast({
    message: resp.error ? resp.error : resp.result.error.message,
  });
}

var calInst = mobiscroll.eventcalendar('#demo-google-cal', {
  view: {
    timeline: {
      type: 'month',
      eventDisplay: 'fill',
    },
  },
  dragToCreate: false,
  clickToCreate: false,
  exclusiveEndDates: true,
  resources: calendars,
  onPageLoading: function (args) {
    var start = args.firstDay;
    var end = args.lastDay;

    // Calculate dates
    // (pre-load events for previous and next pages as well)
    firstDay = new Date(start.getFullYear(), start.getMonth() - 1, start.getDate());
    lastDay = new Date(end.getFullYear(), end.getMonth() + 1, end.getDate());

    loadEvents();
  },
});
```

### HTML

```html
<div id="demo-google-cal" class="md-google-calendar"></div>
```

### CSS

```css
.md-google-calendar .mbsc-timeline-day {
    min-width: 150px;
}
```

## Implementation notes

- Use `timeline: { type: 'month', eventDisplay: 'fill' }` - a monthly view where events fill the width of their date cell.
- Set `clickToCreate: false`, `dragToCreate: false`, `exclusiveEndDates: true` - the calendar is read-only.
- No user sign-in required. Public Google Calendars are accessed with an API key only.
- Import `googleCalendarSync` from `@mobiscroll/calendar-integration` (a separately installed package).

- Define 7 public Google Calendar holiday feeds as the resources array. Each entry has `id` (the Google Calendar ID), `name`, and `color`:

  | name | id | color |
  |---|---|---|
  | Holidays in France | `en.french#holiday@group.v.calendar.google.com` | `#D81B60` |
  | Holidays in Germany | `en.german#holiday@group.v.calendar.google.com` | `#F4511E` |
  | Holidays in Hungary | `en.hungarian#holiday@group.v.calendar.google.com` | `#AD1457` |
  | Holidays in India | `en.indian#holiday@group.v.calendar.google.com` | `#E4C441` |
  | Holidays in Romania | `en.romanian#holiday@group.v.calendar.google.com` | `#0B8043` |
  | Holidays in United Kingdom | `en.uk#holiday@group.v.calendar.google.com` | `#3F51B5` |
  | Holidays in United States | `en.usa#holiday@group.v.calendar.google.com` | `#8E24AA` |

  Pass this array as both `resources` on the calendar and the source for `calendarIds` (extracted with `.map(cal => cal.id)`).

- Call `googleCalendarSync.init()` on component mount with:
  - `apiKey` - your Google API key (no `clientId` or `redirectUri` needed for public calendars)
  - `onInit` - callback fired when the integration is ready; call `loadEvents()` from here
- **`loadEvents`**: call `googleCalendarSync.getEvents(calendarIds, firstDay, lastDay)`. On success, map each returned event: `event.resource = event.googleCalendarId`, then replace the events array.
- **`onPageLoading`**: uses `args.firstDay` / `args.lastDay` (month view navigation args). Pre-loads one extra month in each direction to avoid visible loading gaps on navigation:
  ```js
  firstDay = new Date(start.getFullYear(), start.getMonth() - 1, start.getDate())
  lastDay  = new Date(end.getFullYear(),   end.getMonth() + 1,   end.getDate())
  ```
  After updating the date variables, call `loadEvents()`.

## Run it in your project

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: [Outlook Calendar Sync](https://demo.mobiscroll.com/javascript/timeline/sync-events-outlook-calendar.md) - Display Outlook Calendar events on a Javascript Timeline — each calendar as a separate resource row. Plain JS api for usage everywhere.