Plugins You can find out about all the publicly available Grails plugins.

Calendar Plugin

  • Tags: calendar, ui
  • Latest: 1.2.1
  • Last Updated: 27 May 2010
  • Grails version: 1.2.1 > *
  • Authors: null
3 votes

3% of Grails users

compile "org.grails.plugins:calendar:1.2.1"






Calendar Plugin is a lightweight, customizable and cross platform date picker.

It's based on jscalendar, and doesn't have any dependence with external JavaScript library.

It provides a tag library to include date picker in your pages , and allow select date and time values easily.


Maxwell Chiareli, Claudio Morgia


  • i18n.
  • Theme system, based in css, creation of custom themes
  • Select date and time in datePicker.
  • Customizing of time format: (12h or 24h)
  • Customizing of date format.
  • Autobinding of Date properties.
  • Customizing of date picker.
  • Customizing of year range.
  • No dependencies with external javascript libraries.
  • Cross platform.


Calendar Plugin has not any dependence with external javascript libraries, to install just type:
grails install-plugin calendar


To use plugin, it must import the calendar resources.The Tag Resources provides a simple way to import it.

Importing resources

Basically there are two ways to import resources:
  • In each page that will use the plugin.
  • In the main layout.
You should use the <calendar:resources/> to do this.

Resources Tag

<calendar:resources lang="en" theme="tiger"/>

Resources attributes

  • theme (optional): Theme to be applied in date picker. default: tiger
  • lang (optional): The language of date picker. default: english
  • sytle (optional): Use a custom css file to change them of datePicker.

Default Themes

There are some themes available by default: (list with pictures)

After import resources, you are ready to use date picker component.

Date Picker Tag

<calendar:datePicker name="date" defaultValue="${new Date()}"/>

Date Picker Attributes

  • name: The name of component, the name can be used to send data on <form>
  • dateFormat (optional): The Date Format. default: %m/%d/%Y
  • showTime (optional): If true, allow to select time on picker. default: false
  • timeFormat (optional): Configure the time format to 12 /24 h. default: 24h
  • value (optional): The value of component. default:null
  • defaultValue (optinal): Default value used if the value is null. default:null
  • years (optional): Range of years that the calendar will allow, in format "first,last".default: 1999,2999
  • singleClick (optional). If false close the date picker only after double click. default: true
  • onChange (optional): allows you to put any valid JavaScript statement (including function calls to functions previously defined) to be called after changing the date
  • showReset (optional): if true, it will show another button on the right of the usual one that opens the calendar. This button will reset the value of the field, optionally triggering the onChange event if defined (see above).
If you want to show the "Reset" button on every calendar tag, instead of adding the showReset tag attribute to every tag in your application, you could specify the value in the Config.groovy file:
calendar.showReset=true or false

The tag attribute, if present, will override the general value (if present). If neither the general parameter nor the tag attribute are specified, the parameter will be set to "false".

Date Formats

Jscalendar uses a own pattern to format dates, there are some values available:
%dthe day of the month ( 00 .. 31 )
%ethe day of the month ( 0 .. 31 )
%Hhour ( 00 .. 23 )
%Ihour ( 01 .. 12 )
%jday of the year ( 000 .. 366 )
%mmonth ( 01 .. 12 )
%Mminute ( 00 .. 59 )
%Ssecond ( 00 .. 59 )
%pPM or AM
%Ppm or am
%yyear without the century ( 00 .. 99 )
%Yyear including the century ( ex. 1979 )


Available Themes

Theme NameExample

Customizing themes

You can use your own theme, just copy a base theme from APPLICATION_DIR/web-app/plugin/calendar-x.x.x/css/ to your css dir, or other folder and use the style property of Resources Tag:

<calendar:resources style="${createLinkTo(dir:'css',file:'custom-calendar.css')}"/>

Would you like to share your theme?

Please open a issue in jira page and attach you css files, and it will be included.


Available languages

There is three languages supported by default
Brazilian PortugueseAPPLICATION_DIR/web-app/calendar-x.x.x/js/lang/calendar-br.js

Customizing languages

You can find more language files in jscalendar site, or create your shelf. To use a custom language, just add the file to LANGUAGE_DIR( APPLICATION_DIR/web-app/calendar-x.x.x/js/lang), with the name in format calendar-LANGUAGE.js, and use the language name in resources tag.

For example, to use tokipona language, create a file named calendar-tp.js in LANGUAGE_DIR, and use:

<calendar:resources lang="tp"/>