DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy
    Your search did not match any results.
    Scheduler

    Google Calendar Integration

    To display appointments from Google Calendar in the Scheduler, follow the steps below:

    1. Get Google API key
      Follow the instructions from step 1 in the Browser Quickstart tutorial.

    2. Restrict the API key
      Set application and API restrictions.

    3. Make your calendar public
      Refer to the following help topic: Create & manage a public Google calendar.

    4. Get the calendar ID
      Open Google Calendar settings, choose the calendar to be integrated, and copy its ID from the Integrate calendar section.

    5. Set up the Scheduler
      Configure the CustomStore to load data from Google Calendar as shown in this demo. If a timeZone is specified in the Scheduler, ensure it is the same as in Google Calendar.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    const DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', ($scope) => { const PUBLIC_KEY = 'AIzaSyBnNAISIUKe6xdhq1_rjor2rxoI3UlMY7k'; const CALENDAR_ID = 'f7jnetm22dsjc3npc2lu3buvu4@group.calendar.google.com'; $scope.options = { dataSource: new DevExpress.data.DataSource({ store: new DevExpress.data.CustomStore({ load() { const result = $.Deferred(); $.ajax({ data: { showDeleted: false }, dataType: 'json', url: [ 'https://www.googleapis.com/calendar/v3/calendars/', CALENDAR_ID, '/events?key=', PUBLIC_KEY, ].join(''), }).done((response) => { result.resolve(response.items); }); return result.promise(); }, }), }), editing: false, startDateExpr: 'start.dateTime', endDateExpr: 'end.dateTime', textExpr: 'summary', startDayHour: 7, timeZone: 'America/Los_Angeles', showAllDayPanel: false, views: ['day', 'workWeek', 'month'], currentView: 'workWeek', currentDate: new Date(2017, 4, 25), height: 500, }; });
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div class="long-title"><h3>Tasks for Employees (USA Office)</h3></div> <div dx-scheduler="options"></div> </div> </body> </html>
    .note { color: rgba(128, 128, 128, 0.75); float: right; margin-top: 20px; font-size: 12px; } .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }