Grails - Calendar Plugin

About

Overview:

Calendar Plugin is a lightweight, customizable and cross plataform 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.

Author:

Maxwell Chiareli

Features

  • 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.

Installation

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

Usage

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
  • weekNumbers (optional): If true, show the week number left of picker. default: true
  • 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: 1900,2999
  • singleClick (optional). If false close the date picker only after double click. default: true

Date Formats

Jscalendar uses a own pattern to format dates, there are some values available:
PatternValue
%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 )

Themes

Available Themes

Theme NameExample
aqua
blue
blue2
brown
green
system
tas
tiger
win2k-1
win2k-2
win2k-cold-1
win2k-cold-2

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.

Languages

Available languages

There is three languages supported by default
LanguageFile
EnglishAPPLICATION_DIR/web-app/calendar-x.x.x/js/lang/calendar-en.js
SpanishAPPLICATION_DIR/web-app/calendar-x.x.x/js/lang/calendar-es.js
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"/>

Version

Development