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 Scheduler 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 faced 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.
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.
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.
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