Welcome to 2019
[ikiwiki.git] / doc / plugins / contrib / monthcalendar.mdwn
1 [[!meta author="spalax"]]
2 [[!template id=plugin name=monthcalendar author="[[Louis|spalax]]"]]
3
4 # Monthcalendar
5
6 This plugin displays a calendar, containing in each of its day the list of links of pages published on this day. It can be used, for example, to display archives of blog posts, or to announce events.
7
8 The difference between this plugin and the [[plugins/calendar]] plugin is that the calendar displayed by this plugin is a big one, containing the full title of every page indexed in it.
9
10 ## Usage
11
12 ### Directive
13
14     \[[!monthcalendar type="month" year="2012" month="06" pages="events/*"]]
15
16 ### Automation
17
18 By using the following line in template `calendarmonth.tmpl`, you can have `ikiwiki-calendar` using this plugin to display monthly archives.
19
20     \[[!monthcalendar type="month" year="<TMPL_VAR YEAR>" month="<TMPL_VAR MONTH>" pages="<TMPL_VAR PAGESPEC>"]]
21
22 ## CSS
23
24 Here is an example of CSS properly rendering the calendar produced by this
25 plugin.
26 [[!toggle id=css text="CSS"]]
27 [[!toggleable id=css text="""
28     /* Calendar */
29     .monthcalendar
30     {
31         color:#aaa;
32         /* font-size:18pt; */
33         margin-top:1em;
34         margin-bottom:1em;
35                 width: 100%;
36     }
37     
38     .monthcalendar table,
39     .monthcalendar td,
40     .monthcalendar th
41     {
42         border: 1px solid #ccc;
43     }
44     
45     #content .monthcalendar td
46     {
47         padding: 0;
48         position: relative;
49     }
50     
51     .monthcalendar td div
52     {
53         min-height: 10ex;
54         height: 100%;
55         position: relative;
56     }
57     
58     .monthcalendar th
59     {
60         vertical-align: middle;
61     }
62     
63     .monthcalendar td ul
64     {
65         padding-left: 0.5em;
66         list-style: dot;
67         list-style-position: inside;
68         text-align: left;
69         font-size: 8pt;
70         position: relative;
71         z-index: 10;
72         font-weight: bold;
73     }
74     
75     table.monthcalendar
76     {
77         table-layout: fixed;
78     }
79     
80     .monthcalendar .selflink
81     {
82         color:#444444;
83     }
84     
85     .monthcalendar-day-head {
86         text-transform:capitalize;
87     }
88     
89     .monthcalendar-head {
90         text-transform:capitalize;
91     }
92     
93     .monthcalendar-daynumber
94     {
95         float: left;
96         position: absolute;
97         display: block;
98         font-size: 7ex;
99         color: #ccc;
100         line-height: 100%;
101         z-index: 5;
102         padding-top: 0.3ex;
103         text-align: right;
104         width: 1.8em;
105     }
106     
107     /* List of pages */
108     
109     .monthcalendar-pagelist {
110       display: flex;
111       flex-direction: column;
112     }
113     
114     .monthcalendar-item {
115       opacity: 0;
116       height: 0;
117     }
118     
119     .monthcalendar-item:target {
120       opacity: 1;
121       height: initial;
122     }
123 """]]
124
125 ## Code
126
127 Code and documentation can be found here : [[https://atelier.gresille.org/projects/gresille-ikiwiki/wiki/Monthcalendar]].