How To Synchronize dhtmlxScheduler with Google Calendar

| Comments (28)

Update: The proxy script for synchronization with Google Calendar has been updated to work correctly with Google API v.3. Download it from GitHub.

Today we want to show you an effortless way to synchronize dhtmlxScheduler and Google Calendar. So if you need to store your events and appointments in both calendars, you won’t miss any appointed event ever.

Google Calendar is one of the most popular online web calendars and that’s why it’s so essential to give developers a quick and simple way to synchronize dhtmlxScheduler with it. The synchronization feature has been available before, but now it became really easy.

The technique of synchronization is pretty simple and based on using a PHP proxy script:

Synchronization with Google Calendar

The synchronization script works as a simple proxy between a client-side application (containing dhtmlxScheduler) and Google Calendar. To load events, the scheduler makes a call to the proxy script, which in its turn, makes a call to Google Calendar API. Retrieved data is converted to the scheduler format and loaded to the client side.

 

One-Way Synchronization

 
To start synchronization, check whether the php_curl.dll extension is enabled. If it’s not, activate it by adding the following line in the php.ini file used by your web server:

extension=php_curl.dll

To provide one-way synchronization that will allow you to automatically fetch data from Google Calendar to dhtmlxScheduler, do the following:

1. Download the gCal_proxy_v2 package.

2. Unzip the package into the root directory of your web server.

3. Open the 01_proxy.php file located at [rootFolder]\gCal_proxy\server\ . The file contains the standard proxy initialization code:

<?php
 
$email = "";
$pass = "";
$cal = "";
 
include('google_proxy.php');
$calendar = new GoogleCalendarProxy($email, $pass, $cal);
$calendar->connect();
 
?>

NOTE: For Google API v.3 the code should be different:

<?php

include('../src/google_proxy.php');

$calendar = new GoogleCalendarProxy(
    "<account>@developer.gserviceaccount.com",
    "<account>.apps.googleusercontent.com",
    file_get_contents("<key>"),
    "<calendar id>"
);

$calendar->connect();
?>

4. Set values for the following 3 variables and leave the rest of the code as is:

  • $email – the user name of your Gmail account
  • $pass – the password of your Gmail account
  • $cal – the name of your Google Calendar

 
NOTE: Be sure to provide the correct values. For example, if the name of your calendar is test@googlemail.com, the value test@gmail.com will result in an error.

After that, all events from your Google Calendar will be reflected in dhtmlxScheduler. When you add or edit an event in Google Calendar, these changes will appear in dhtmlxScheduler when the page is refreshed.

 
Synchronization between Google Calendar and dhtmlxScheduler

 

Two-Way Synchronization between Google Calendar and dhtmlxScheduler

 
You can also add two-way synchronization and integrate dhtmlxScheduler with Google Calendar so you can edit your events and appointments in either calendar, and the other stays up-to-date. This will require some ‘magic’ on the client-side page.

1. Open the HTML file that contains the initialization code for the scheduler. In the load() method, specify the path to the 01_proxy.php file (that includes your Google Calendar info) – it will replace the data file that you used to load events from.

scheduler.load("../gCal_proxy/server/01_proxy.php");

2. Initialize dataProcessor (if you haven’t done it before) and specify the path to the same PHP file 01_proxy.php as a parameter of the constructor.

<script src="../gCal_proxy/sample/codebase/dhtmlxdataprocessor.js" type="text/javascript" charset="utf-8"></script>
...
var dp =  new dataProcessor("../gCal_proxy/server/01_proxy.php");
dp.init(scheduler); // 'scheduler' is the name of the scheduler instance

The two-way synchronization is ready, and now changes you make in dhtmlxScheduler or Google Calendar will be synchronized between these two calendars. To see the changes, you need to refresh the page. Note that it took us less than 10 minutes to integrate dhtmlxScheduler with Google Calendar. Pretty good result, huh?

For more details on this topic, refer to our documentation.

Comments

  1. Mike O September 10, 2012 at 5:42 pm

    Any way of doing this without asking for the google password?
    Asking for passwords makes this unusable for anybody else other than myself, which is pointless…

    • Ivan September 10, 2012 at 6:01 pm

      Mike, the current implementation solves a different use case where you want your events to be synced up between Google Calendar and dhtmlxScheduler. Asking for passwords is of course not an option. Thank you for your feedback, we will into this case.

  2. Mike O September 13, 2012 at 8:55 pm

    thanks for the reply!

    any way of doint 2 way sync right now?

    Keep up the great work guys!

    • Ivan September 14, 2012 at 4:14 pm

      Mike, the second part of the tutorial explains how to implement 2-way synchronization. Or it’s not what you mean?

      • Mike O September 21, 2012 at 1:41 pm

        I meant without asking for passwords

        • Ivan September 21, 2012 at 6:14 pm

          Mike, unfortunately it’s not possible now.

  3. John Kennedy October 18, 2012 at 6:28 pm

    I tried this the old way about a year ago and was shocked to see that the entire dataset is passed from Google calendar – every time!

    From what I’m reading, it looks like this is still the case. Is it?

    Surely there is a way to just get a range of dates – so you could load up a day or a week at a time?

    I have about 5 years of data on google calendar and when you multiply that by customers using a system, that’s a lot of unnecessary bandwidth.

    • Ivan October 24, 2012 at 8:42 pm

      Yes, it works the old way. Unfortunately there is no the functionality that you need but we will look into it and try to implement it in the next update.
      Thank you for your question and suggestion.

  4. Pawel December 14, 2012 at 2:34 am

    Yeah, I think that there is a huge need of accessors for current displayed time range of scheduler. There also should appear some options to configurate start_date and end_date params name for custom backend scripts.
    I can’t either find option to get dynamic json data and setup events from some json response object property.

  5. Mat December 18, 2012 at 12:09 am

    is there also a sync for outlook users available ?

    • Inga December 18, 2012 at 7:24 pm

      Mat, there is no ready-to-use solution for Outlook but you can check iCal export/import tool:
      http://www.dhtmlx.com/blog/?p=612

      • Mat December 19, 2012 at 2:07 am

        Thank you Inga, what is the plan for the scheduler in the future. Will there be any such feature included ?

        Mat

        • Inga December 22, 2012 at 10:45 am

          Mat, there are no such plans in the moment but we will consider adding feature in the future.

  6. Govind January 25, 2013 at 5:49 pm

    Hi,

    I have an issue, scheduler is displaying even google_proxy.php throws exception. For example, If we are giving wrong username/password its throws exception.

    I am wondering, is there any solution for this?

    Govind

    • Ivan January 28, 2013 at 3:55 pm

      The problem with data loading must not prevent showing scheduler’s UI – it is by design.

      You can attach custom code to one of scheduler’s custom events handlers and provide any custom reacton on invalid data loading operation.

  7. Mateo August 30, 2013 at 9:08 pm

    Hi,

    When I try to run the sample.html (downloaded from GitHub) appears in the firebug
    “SyntaxError: syntax error (“

    • Stanislav September 6, 2013 at 6:57 pm

      There was issues with code, it didn’t work for older php versions.
      Try to grab the latest code from github, now it works for any version of php 5.x

  8. sam September 8, 2013 at 2:48 am

    How can we implement this google calendar integration for multiple users?

    How it works:
    Multiple users that share appointment information in a Unit View Calendar are each emailed a personalized link where each user enters their email/password in order to configure the synch between their apointments in the shared dhtmlxscheduler Unit View calendar and their personal gcalendar .

    Is this possible?

    • Davi January 31, 2014 at 8:47 pm

      This is exactly what I need…
      Any answer guys?

  9. Afzal March 13, 2014 at 2:04 pm

    It is not working for me :(
    please elaborate how to implement 01_proxy.php with the sample.html because i am unable to understand :(
    please help me out

  10. laxman March 13, 2014 at 2:13 pm

    Hi
    i want to synchronize the events from scheduler to google calendar
    i want to do in html only can you help me on it

  11. Niss August 27, 2014 at 7:18 am

    Hi. I keep getting error message ‘Unknown gCal calendar’.
    Username & email password are correct.
    Is it because I give the wrong value for : $cal – the name of your Google Calendar ?
    Do google-calendar-name is refering to https://support.google.com/calendar/answer/45702?hl=en

    ? thanks for your reply

  12. minimi January 16, 2017 at 4:42 am

    Hi I would like to synchronize Google Calendar with dhtml now but it will not work even if I use the source as it. How do I do it?

    • Aras Kairys (DHTMLX team) January 16, 2017 at 12:53 pm

      Can you please elaborate on your problem?
      Please create a topic with your question on our forum: https://forum.dhtmlx.com/

      • minimi January 17, 2017 at 4:27 am

        l wonder where the key for the file gets.
        Also,execute geurigo and save calendar schedule if save schedule is saved.
        If refreshing, it will be lost.
        hple me…

  13. Aras Kairys (DHTMLX team) January 17, 2017 at 12:51 pm

Leave a Reply