JQuery Calendar

(4)

Author(s)	Cazacu Mihai (www.macrobit.ro)
Current Release	0.2.3 (2 years ago)
Grails Version	1.1 > *
Tags	day month week
Dependency	compile ":jquery-calendar:0.2.3"

Installation
Description
Faq
Screenshots

Last updated by admin 2 years ago

grails install-plugin jquery-calendar

Last updated by cazacugmihai 2 years ago

JQuery-Calendar Plugin

This plugin provides a full-sized, drag & drop calendar. It is based on jquery-week-calendar and fullcalendar JQuery plugins.

Requirements

Grails Version: 1.0 and above
JDK: 1.5 and above

Installation

grails install-plugin jquery-calendar

CalendarDayView

This component displays domain objects on a calendar day view.

To use the CalendarDayView component include the following markup in your GSP.

<jqueryCalendar:dayResources />
...<jqueryCalendar:day
        date="${date}"
        readonly="${readOnly}"
        allowCalEventOverlap="${true}"
        timeslotsPerHour="${4}"
        startHour="${8}"
        endHour="${18}"
        limitDisplay="${true}"
        height="${600}"/>

CalendarWeekView

This component displays domain objects on a calendar week view.

To use the CalendarWeekView component include the following markup in your GSP.

<jqueryCalendar:weekResources />
...<jqueryCalendar:week
        date="${date}"
        readonly="${readOnly}"
        allowCalEventOverlap="${true}"
        timeslotsPerHour="${4}"
        firstDayOfWeek="${1}"
        startHour="${8}"
        endHour="${18}"
        limitDisplay="${true}"
        height="${600}"/>

CalendarMonthView

This component displays domain objects on a calendar month view.

To use the CalendarMonthView component include the following markup in your GSP.

<jqueryCalendar:monthResources />
...<jqueryCalendar:month
        year="${year}"
        month="${month}"
        weekStart="${1}"
        draggable="${true}"
        readonly="${readOnly}"
        fixedWeeks="${true}"
        abbrevDayHeadings="${false}"
        title="${true}"
        showTime="guess" />

Resource Tag Extra Attributes

skinDir - allow to specify the skin directory for a personal skin (default: 'day', 'week' or 'month')
skin - allow to specify a custom skin (default: 'default')

Day/Week/Month Tag Extra Attributes

controller - the 'controller' to use to retrieve events and make the CRUD operations (default: 'calendar')
includeScripts - include JS scripts (default: 'true')
includeEventDialog - include event dialog (default: 'true')

Internationalization

check the "message.properties" file from the plugin directory.

Version History

0.2.3 - Fixed installation step.
0.2.2 - Added support to specify if an event can be dragged or not.
0.2.1 - Added support to specify what controller to use for tags(via "controller" attribute). Added a configuration file that specify the JSON date converter.
0.2.0 - Added support for reminders.
0.1 - First official release.

Suggestions, comments or bugs

Feel free to submit questions or comments to the Grails users mailing list. Alternatively you can contact me directly - cazacugmihai at gmail dot com

Please report any issues to the Grails users mailing list and/or write up an issue in JIRA at http://jira.codehaus.org/browse/GRAILSPLUGINS under the Grails-JQueryCalendar component.

Last updated by cazacugmihai 2 years ago

1. Small example:

jquery-calendar-sample

2. How to customize the service:

modify your grails-app/conf/BootStrap.groovy file:

def calendarServicedef init = {servletContext ->
        …    
        calendarService.securityDelegate = [
           getCurrentUser: {-> [id: 1]},
           isUserAllowedToCreateEvents: {-> true},
           isUserAllowedToEditEvent: {calendarEvent -> true},
           isUserAllowedToCreateReminder: {calendarEvent -> true}
       ]
        calendarService.mailDelegate = [
            sendReminder: {reminder ->  println 'reminder sent' },
        ]
        …
}

3. How to filter calendar events:

<%@ page import="org.grails.plugins.jquery.calendar.domain.CalendarEventType" %><html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <jqueryCalendar:monthResources />
    </head>
    <body>
        <div id="message" class="ui-corner-all"></div>
        <g:select
                name="eventType"
                from="${CalendarEventType.list()}"
                optionKey="id"
                noSelection="['': message(code: 'view.calendarEvent.eventType.choose')]"
                valueMessagePrefix="calendarEventType" />
        <jqueryCalendar:month
                year="${year}"
                data="javascript:function(start, end, callback) {filterMonthSource(start, end, callback);}"
                month="${month}"
                weekStart="${1}"
                draggable="${true}"
                readonly="${readOnly}"
                fixedWeeks="${true}"
                abbrevDayHeadings="${false}"
                title="${true}"
                showTime="guess" />
        <script type="text/javascript">
            function filterMonthSource(start, end, callback) {
                 var data = {
                    'start': start.getTime(),
                    'end': end.getTime(),
                    'eventType': $('#eventType').val()
                }
                var tmpCallback = function(result) {
                    if (result.length > 0) {
                        hideMessage();
                    } else {
                        monthNoEvents();
                    }
                    callback(result);
                }
                $.post($MONTH_URL['events'], data, tmpCallback, "json");
            }
            $("#eventType").change(function() {
                $monthCalendar.fullCalendar("refresh");
            });
        </script>
    </body>
</html>

4. How can people extend the domain objects?

For now, they can't. Probably in one of the next releases.

5. If I want to add new event type, how do I associate an icon (or none) to that type?

You must create a new class (with this pattern:.CALENDAR_TYPE-EVENT_TYPE-event ) in your css file that will correspond with that event. Look at this example:

.day-conference-event {
    background-image: url(../../images/events/50/conference.png);
}

Last updated by cazacugmihai 2 years ago

Check this sample:

jquery-calendar-sample

and put this line:

grails.converters.json.date = 'javascript'

at the end of Config.groovy file.