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:
| 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 |
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.
| 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 |
| 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 |
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
| 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 |
Large size
| 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 |
Largest size
| 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 |
Hello