Calendars

The template includes a set of 4 calendar sizes, and a fluid calendar style, all of which are responsive. All sizes allow displaying a list of event for each day, even in smaller sizes - have a look below or resize your browser to see how the various sizes adapt to the screen's width.

Fluid calendar

This is the most usefull style to display the maximum amount of data. It will scale to any screen width, including the smallest ones, and dates and events styles will change to make the most of the available space. It will also scale its height to preserve cells aspect ratio, but it is possible to set a height limit for bigger screens:

March 2012
Sun Mon Tue Wed Thu Fri Sat
30 1
  • Event description
2
  • Event description
3
  • Event description
4 5
  • Event description
6
7 8 9
  • Event description
10
  • Event description
11 12 13
14 15 16 17 18 19
  • Event description
20
21
  • Event description
22 23 24
  • Event description
  • Event description
25 26 27
28 29 30 31 1 2 3

Mini calendar

This is the basic style, with no javascript. Perfect if you need to code a calendar feature from scratch!

If you embed events in it, they will display as dots, and the complete list will show when a date is clicked.

March 2012
Sun Mon Tue Wed Thu Fri Sat
30 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 1 2 3
March 2012
Sun Mon Tue Wed Thu Fri Sat
30 1
  • Event description
2
  • Event description
3
  • Event description
4 5
  • Event description
6
7 8 9
  • Event description
10
  • Event description
11 12 13
14 15 16 17 18 19
  • Event description
20
21
  • Event description
22 23 24
  • Event description
  • Event description
25 26 27
  • Event description
  • Event description
28 29 30 31 1 2 3

Functional mini-calendar

Using the plugin GlDatePicker, here is an fully fonctional contextual or inline datepicker based on the mini calendar style:

Other sizes

These are 3 intermediate sizes - the larger will only show if your browser's window is wide enough!

Medium size
March 2012
Sun Mon Tue Wed Thu Fri Sat
30 1
  • Event description
2
  • Event description
3
  • Event description
4 5
  • Event description
6
7 8 9
  • Event description
10
  • Event description
11 12 13
14 15 16 17 18 19
  • Event description
20
21
  • Event description
22 23 24
  • Event description
  • Event description
25 26 27
  • Event description
  • Event description
28 29 30 31 1 2 3
Large size
March 2012
Sun Mon Tue Wed Thu Fri Sat
30 1
  • Event description
2
  • Event description
3
  • Event description
4 5
  • Event description
6
7 8 9
  • Event description
10
  • Event description
11 12 13
14 15 16 17 18 19
  • Event description
20
21
  • Event description
22 23 24
  • Event description
  • Event description
25 26 27
28 29 30 31 1 2 3
Largest size
March 2012
Sun Mon Tue Wed Thu Fri Sat
30 1
  • Event description
2
  • Event description
3
  • Event description
4 5
  • Event description
6
7 8 9
  • Event description
10
  • Event description
11 12 13
14 15 16 17 18 19
  • Event description
20
21
  • Event description
22 23 24
  • Event description
  • Event description
25 26 27
28 29 30 31 1 2 3