Calendar Plugin

Tags : ui, calendar
- ui
- calendar
Latest : 1.2.1
Last Updated: 27 May 2010
Grails version : 1.2.1 > *

Authors : null

3 votes

4% of Grails users

Dependency :

compile ":calendar:1.2.1"

Documentation

Summary

Description

About

Overview:

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.

Author:

Maxwell Chiareli, Claudio Morgia

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
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:

Pattern	Value
%d	the day of the month ( 00 .. 31 )
%e	the day of the month ( 0 .. 31 )
%H	hour ( 00 .. 23 )
%I	hour ( 01 .. 12 )
%j	day of the year ( 000 .. 366 )
%m	month ( 01 .. 12 )
%M	minute ( 00 .. 59 )
%S	second ( 00 .. 59 )
%p	PM or AM
%P	pm or am
%y	year without the century ( 00 .. 99 )
%Y	year including the century ( ex. 1979 )

Themes

Available Themes

Theme Name	Example
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

Language	File
English	APPLICATION_DIR/web-app/calendar-x.x.x/js/lang/calendar-en.js
Spanish	APPLICATION_DIR/web-app/calendar-x.x.x/js/lang/calendar-es.js
Brazilian Portuguese	APPLICATION_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: