Summary of features

FullCalendar is a popular event calendar system based on javascript and jQuery. It has a flexible core and can be used to create powerful, functional calendars. The COLOURcode template adds event and background colouring options as shown below. See the FullCalendar website for full documentation.

At a glance

  • Highly customizable and opensource (premium add-on available).
  • Can display events from a persistent public Google Calendar.
  • Internationalisation and timezone support through moment.js

Basic calendar

Event or background items can be individually coloured however you like e.g.color: '#cedceb', as shown above as a background colour on 31st January. Alternately, you can use COLOURcode classnames as shown on the right.

Day view

I18n internationalisation language:

COLOURcode styled events and backgrounds

Classnames are added to individual event or background items thus:className: 'brand1'. Events styled with pure colours such as .red are automatically assigned white text with a drop-shadow.

Background events

The red dates have been configured such that no events can be moved to them. 'Meetings' can only be moved into the designated green areas. 'Business lunch' can only be moved to working hours. All these restrictions and more are configurable.

Draggable events

My Event 1
My Event 2
My Event 3
My Event 4
My Event 5
My Event 6
My Event 7
My Event 8
My Event 9

Adding the class .calendar-styled to the main calendar element will add a border and style the axis labels inversely (as above).