dhtmlxScheduler and Google Calendar: Collaboration

| Comments (8)

NOTE: This tutorial is outdated. Please see this post on how to synchronize dhtmlxScheduler with Google Calendar.

When developing dhtmlxScheduler, we were certainly inspired by Google Calendar, one of the most popular online calendars. And I believe (along with many of our users) that dhtmlxScheduler has surpassed it in many ways, not all, but we’re working on it :)

The most noticeable advantage of JavaScript event calendar dhtmlxScheduler is the ability to customize each and every aspect of the calendar and include it as a part of a web application package. Besides, unlike Google Calendar, dhtmlxScheduler can be used within the local network, if such a need arises.

Let’s pretend I convinced you that dhtmlxScheduler is the best option for the scheduling part of your application. But what if you want it to display the events stored in some Google Calendar account? Is there an easy way to do that? Well, don’t worry, there is. We’ve already beem faced with a need to reflect events from Google Calendar in dhtmlxScheduler, so we have a solution to share.


Our task was to facilitate the transition from one calendar to another and to allow the transfer of data from Scheduler to Google Calendar and vice versa. This way we can see events stored in a Google Calendar account through the dhtmlxScheduler interface.

If you don’t like long explanations, you can jump to the bottom of the article and grab the script. The current implementation only fetches events from Google Calendar and displays them in dhtmlxScheduler.

We’ve chosen PHP as a script language because it is the most popular platform for our product, and because I personally like PHP a lot :) (While I love JavaScript even more than PHP, there are serious security problems which preclude a pure JavaScript solution).

The script works as a simple proxy between a client-side application and a Google API. When the load command is executed by the scheduler, it makes a call to the Google API, gets authorization, and requests the data.

scheduler_google_calendar_1

When Google’s API responds with the data, the proxy script converts it to the format of dhtmlxScheduler and sends it back to the client.

scheduler_google_calendar_2

The script consists of two parts:

1) cal_sync.php is the class, which contains all necessary logic. You can use it as is. The only place which may require some modification is the getXML method. It defines how events from Google Calendar are transformed into events of Scheduler. Existing logic converts only basic properties and may be extended to support additional elements of Google’s events.

	public function getXML() {
	$cal = $this->retrieveAllCalendars();

	$xml = '<data>';
	$event_id = 1;
	for ($i = 0; $i < count($cal); $i++) {
		$events = $this->retrieveAllEvents($cal[$i]['id']);
		foreach ($events as $ev) {
			$start_date = $this->parse_gDate($ev['start_time']);
			$end_date = $this->parse_gDate($ev['end_time']);
			$xml .= '<event id="'.$event_id.'">';
			$xml .= '<start_date>'.$start_date.'</start_date>';
			$xml .= '<end_date>'.$end_date.'</end_date>';
			$xml .= '<text>'.$ev['title'].'</text>';
			$xml .= '<rec_type></rec_type>';
			$xml .= '<event_pid>0</event_pid>';
			$xml .= '<event_length>0</event_length>';
			$xml .= '</event>';
			$event_id++;
			
		}
	}
	$xml .= '</data>';
	return $xml;

If you ever need to add extra properties, just add more lines to each loop of the getXML method.

2) The second file, included in the package, is an example of usage.

require_once('./cal_sync.php');

$email = "inga@dhtmlx.com";
$pass = "12344321";

$gcal = new gCalParser($email, $pass);
$xml = $gcal->getXML();

header("Content-type: text/xml");
echo $xml;

?>

As you can see, it just includes the gCalParser class, provides email and password for Google account, and responds with data XML back to client. (I should mention that password info is sent directly to Google. It’s not used for any other operation, so it’s fully safe).

By default, the script is assigned to a test Google Calendar. If you want to access any other calendar, change the credentials in the cal_sync.php.


You can grab the final script here, play with it, and let us know your thoughts. We appreciate your comments and suggestions – as well as ideas on how to use it ;)

The next step in this direction will be adding a way to add and edit events through the scheduler interface so that the changes appear in Google Calendar.

Posted by Paul Smirnov

Comments

  1. Ron Sell June 23, 2011 at 4:45 pm

    Could this be modified to do a two way sync between Google Cal and Scheduler?

    I need a solution really soon.

    Ron

    • Ivan September 10, 2012 at 5:32 pm

      Ron, just wanted to let you know that there is now two-way synchronization between dhtmlxScheduler and Google Calendar:
      https://dhtmlx.com/blog/?p=1759

  2. Marie December 7, 2011 at 7:42 pm

    Hi,

    I downloaded the script and trying opening the sample html, but I get an alert that says “Error: LoadXML and Description: Incorrect XML” so nothing from my google calendar account shows up. I’m not sure what could be wrong, so if you have any ideas, please let me know!

    Thanks!
    Marie

  3. Diana Johns December 17, 2011 at 1:38 am

    Is it possible to suck up data from multiple calendars? We have a several local horse groups in the area, each with separate google calendars. We want to be able to show all equine events in our area but keep the backend calendars separate.

    Also, is it possible to set up calendar or the scheduler to display a minicalendar that when moused over, will pop up the associated event(s) for that day?

    Thank you for your assistance.

  4. Rodrigo Campero Paz March 2, 2012 at 1:40 am

    Hi there, I am currently using oauth authentication and have successfully conected to google calendar, retrieved information, formed the needed xml, 2011-12-01 22:00:00-04:002011-12-01 23:00:00-04:00prueba de rodrigo002011-12-05 10:00:00-04:002011-12-05 11:00:00-04:00rec event002012-02-17 12:00:00-04:002012-02-17 13:00:00-04:00testtt00 but somehow the component does not show anything, just blank page, no javascript error or php error, could you please give me some ideas on what could be possibly wrong? Using your complete example here with the only difference on the authentication.

    Thank you very much in advance for the help and of course for this great component.

  5. Sherrie Roberts June 19, 2012 at 11:26 pm

    I am trying to use the sample.html and google code, but I am getting an alert that says “Error: LoadXML and Description: Incorrect XML” so nothing from my google calendar account shows up. I tried putting a newer dhtmlxscheduler.js in the folder and it stopped the error but nothing is showing up on the calendar it is blank, justs shows dates.

    Has anyone found a solution to these errors?

    Thank you for your help in advance.

    • fcrloch July 20, 2012 at 12:05 pm

      Hi,

      it probably comes from the fact that the curl extension is not enabled in PHP configuration.
      php.ini extension:
      extension = php_curl.dll (windows)
      extension = php_curl.so (linux)

    • Ivan September 10, 2012 at 5:35 pm

      Sherrie, we have updated the sync feature. Please check the new tutorial.

Leave a Reply