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]].