Function

The calendar control is a simplified implementation of Full Calendar by Adam Shaw. We have exposed common settings that you may want to use, but you can easily edit the source unplugged.js to make more complex changes to meet your requirements.

For an example of the Calendar in action download the samples database and open the XPage called Calendar

Usage

defaultviewphone

The default view to open when viewing the calendar with a phone. Default is basicWeek, options are month, basicWeek, basicDay, agendaWeek, agendaDay

defaultviewtablet

The default view to open when viewing the calendar with a tablet. Default is month, options are month, basicWeek, basicDay, agendaWeek, agendaDay

enddatefield

The field on documents that stores the end date for the event (must be a date field)

headerbuttonsleft

The buttons to display top left, comma separated without spaces. Default is prev,today,next. options are: title, prev, next, prevYear, nextYear, today, month, basicWeek, basicDay, agendaWeek, agendaDay

headerbuttonsrightphone

The buttons to display top right when using a phone. Default is none. Options are: title, prev, next, prevYear, nextYear, today, month, basicWeek, basicDay, agendaWeek, agendaDay

headerbuttonsrighttablet

The buttons to display top right when using a tablet. Default is agendaDay,agendaWeek,month. Options are: title, prev, next, prevYear, nextYear, today, month, basicWeek, basicDay, agendaWeek, agendaDay

highlightfield

The name of the field to test a condition against to decide whether to highlight the event

highlighttest

A logical boolean test to run against the contents of the highlightfield to decide whether to highlight the event

startdatefield

The field on the documents that stores the start date for the event (must be a date field)

titlefield

The field on the documents to get the display text for the event from

viewname

The view to get the data from. It must be categorized with the first column in the format yyyymm

viewxpage

The XPage to open when a user taps a calendar entry

Multi Day Events

There are two ways to display multi day events.

Option 1 is to set the start and end time of the event. So for example 01/03/2014 13:00 and 04/03/2014 13:00 would see the event start at 1pm on 1st March 2014 and finish at 1pm on 4th March.

If you don't want to have the event show up with a start time, then set the times to 00:00 (ie midnight) and make the end date the day after the actual finish. So 01/03/2014 00:00 and 05/03/2014 00:00 would show a multi day event starting on 1st March and finishing on 4th March. (From the 3.4 controls this adjustment of the end date will not be necessary)

Required Resources

On the assumption you are using UnpHeader in your application then the only extra resource required is fullcalendar.css.

If you are not using UnpHeader, then make sure you add all of the resources included in UnpHeader to your UnpMain XPage.