Creating a Web Event Calendar Using the Grails Framework

In this tutorial you will learn how to create a web calendar with JavaPlanner using the Grails framework; you will see how to initialize the calendar control, populate it with data and provide client-server logic to save changes made in the app to the server.

The tutorial is one of the trilogy devoted to using JavaPlanner with popular Java frameworks. If you’re interested in finding out more about using JavaPlanner with the Spring framework, flip to the tutorial 'Using JavaPlanner with the Spring framework'. To learn more about using JavaPlanner with the Struts framework, flip to the tutorial 'Using JavaPlanner with the Struts framework'.

The tutorial is intended for developers who have already been familiar with the Grails framework and the JavaPlanner library. If you haven’t, please follow the links below to get the needed information:

All files related to the tutorial you can download here.

Step 1. New project

As your first step, create a new project and name it ‘demoapp’.

Step 2. Required code files

Then, add the required code files to your project. They are:

  • dhtmlxScheduler library files (it’s a client-side library that provides creating JavaPlanner on the page);
  • javaplanner.jar (you can download it here);
  • mysql-connector-java-5.1.17-bin.jar.

The dhtmlxScheduler files must reside in the 'web-app/codebase' folder, the javaplanner.jar and mysql-connector-java-5.1.17-bin.jar files - in the 'lib' folder.

You can find all the mentioned files in the supplied package.

Step 3. Data to load

Before continuing, let’s specify what data we will load to the calendar. You can use any database available or import an SQL dump file demoapp_grails.sql (resided in the root folder of the supplied package) for creating a local database copy.

Watch out! If you decide to use your own database instead of demoapp_grails.sql you will need to adapt the stated in the tutorial code by yourself.

Step 4. Configuring a data source

As establishing connection to a MySQL database is a common practice and you are probably familiar with it, we won’t describe this technique in depth, just some tips.
But if you’re interested in finding out more on the topic, you can refer to the Quick start article in the Grails documentation.


  • Connection is configured in the grails-app/conf/DataSource.groovy file;
  • If you'd like to use the existing database, set dbCreate = “update” to prevent loosing the DB data.
    The dbCreate parameter can also take the 'create' value which recreates the database according to the structure specified in the model. Note, if you set the 'create' value for the parameter, the DB restored from the dump file will be cleared.

Step 5. A domain class

The base of a Grails application is the domain model presenting the persistent data of the app. Let’s create it.

  • in the 'domain/demoapp' folder of your project directory, create a file - Event.groovy and add the following code there:
package demoapp
import com.dhtmlx.planner.DHXEvent
class Event extends DHXEvent{
	static mapping = {
		table 'events'
		id column: 'event_id'
		text column: 'event_name'

Step 6. Loading and storing data

JavaPlanner provides a special class to manage data - DHXEventsManager. It’s used to define the client-side logic and render the response for the calendar. So, to provide the desired behaviour for data loading and processing you should create a new class and extend it from DHXEventsManager. Let’s do this.

  • In the 'src/java/demoapp' folder of your project, create a file - CustomEventsManager.groovy with the following code inside:
package demoapp
import com.dhtmlx.planner.DHXEv
import com.dhtmlx.planner.DHXEventsManager
import com.dhtmlx.planner.DHXStatus
import demoapp.Event
class CustomEventsManager extends DHXEventsManager {
	def CustomEventsManager(request) {
	def Iterable<Event> getEvents() {
		return Event.list();
	def DHXStatus saveEvent(DHXEv event, DHXStatus status) {
		def ev = (Event) event;
		if (status == DHXStatus.UPDATE);
		else if (status == DHXStatus.DELETE)
		else if (status == DHXStatus.INSERT);
		return status;
	def DHXEv createEvent(String id, DHXStatus status) {
		if (status == DHXStatus.INSERT)
			return new Event();
			return Event.get(id);
  • in the class we use a domain model created on the previous step (import demoapp.Event);
  • getEvents() method answers for data loading;
  • saveEvent() method manages the update/insert/delete operations;
  • createEvent() method provide creating new events in the planer.

For a deeper learning of loading and processing data in the web calendar, read:

Step 7. A controller

Controller in a Grails object is responsible for handling web requests.
Let’s create a controller that will initialize JavaPlanner on the page and treat the data model created in the step above.

  • In the 'controllers/demoapp' folder of your project directory, create a file - with the following code inside:
package demoapp
import com.dhtmlx.planner.DHXPlanner
import com.dhtmlx.planner.DHXSkin
import com.dhtmlx.planner.extensions.DHXExtension
class LoadingController {
	def initializing() {
		DHXPlanner p = new DHXPlanner('./codebase/', DHXSkin.TERRACE);
		p.setInitialDate(2013, 1, 7);
		p.load("events", DHXDataFormat.JSON);//sets the function that will provide loading  data to the planner in the specified format.
        	def map = [
			planner: p.render(),
		render(view: "/shared/article", model: map)
	def events() {
		def evs = new CustomEventsManager(request);
  • In the initializing() function we use a standard code initializing JavaPlanner.
  • The events() function instantiates the CustomEventsManager class and retrieve data.

If you doubt what one or another method makes, refer to the following documentation:

Step 8. A view

In the controller file, we refer to ‘article’ as the view for our scheduler. Let’s create such a file (article.gsp) in the 'views/shared' folder of the project directory.

<!DOCTYPE html>
<%@ taglib prefix="c" uri="" %>
        html, body {
            height: 100%;
            width: 100%;
        #content {
            width: 900px;
            height: 700px;
	<div class="content" id="content">
		<div id="planner">${planner}</div>

Step 9. Mapping the controller to the view

To tie the controller and the view together, we need a mapping. Open and modify configuration file UrlMappings.groovy to make the content look like:

class UrlMappings {
	static mappings = {
		"/initializing"(controller: "Loading", action: "initializing")
		"/events"(controller: "Loading", action: "events")

Congratulations! You’ve created a web calendar application using the Grails framework.
The tutorial has demonstrated how easy it is to integrate JavaPlanner with Java frameworks. The built application can be a good start point for creating your custom scheduling web applications.

All related file can be downloaded here.