calendar/templates/month_mini.mustache

   1 {{!
   2     This file is part of Moodle - http://moodle.org/
   3
   4     Moodle is free software: you can redistribute it and/or modify
   5     it under the terms of the GNU General Public License as published by
   6     the Free Software Foundation, either version 3 of the License, or
   7     (at your option) any later version.
   8
   9     Moodle is distributed in the hope that it will be useful,
  10     but WITHOUT ANY WARRANTY; without even the implied warranty of
  11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  12     GNU General Public License for more details.
  13
  14     You should have received a copy of the GNU General Public License
  15     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  16 }}
  17 {{!
  18     @template calendar/month_mini
  19
  20     Calendar month view for blocks.
  21
  22     The purpose of this template is to render the month view for blocks.
  23
  24     Classes required for JS:
  25     * none
  26
  27     Data attributes required for JS:
  28     * none
  29
  30     Example context (json):
  31     {
  32     }
  33 }}
  34 <div{{!
  35     }} id="month-mini-{{date.year}}-{{date.month}}-{{uniqid}}"{{!
  36     }} class="calendarwrapper"{{!
  37     }} data-courseid="{{courseid}}"{{!
  38     }} data-categoryid="{{categoryid}}"{{!
  39     }} data-month="{{date.mon}}"{{!
  40     }} data-year="{{date.year}}"{{!
  41     }} data-view="month"{{!
  42     }}>
  43     {{> core/overlay_loading}}
  44     <table class="minicalendar calendartable">
  45         <caption class="calendar-controls">
  46             {{#includenavigation}}
  47                 <a{{!
  48                     }} href="#"{{!
  49                     }} class="arrow_link previous"{{!
  50                     }} title="{{#str}}monthprev, calendar{{/str}}"{{!
  51                     }} data-year="{{previousperiod.year}}"{{!
  52                     }} data-month="{{previousperiod.mon}}"{{!
  53                 }}>
  54                     <span class="arrow">{{{larrow}}}</span>
  55                 </a>
  56                 <span class="hide"> | </span>
  57                 <span class="current">
  58                     <a href="{{{url}}}" title="{{#str}}monththis, calendar{{/str}}">{{periodname}}</a>
  59                 </span>
  60                 <span class="hide"> | </span>
  61                 <a{{!
  62                     }} href="#"{{!
  63                     }} class="arrow_link next"{{!
  64                     }} title="{{#str}}monthnext, calendar{{/str}}"{{!
  65                     }} data-year="{{nextperiod.year}}"{{!
  66                     }} data-month="{{nextperiod.mon}}"{{!
  67                 }}>
  68                     <span class="arrow">{{{rarrow}}}</span>
  69                 </a>
  70             {{/includenavigation}}
  71             {{^includenavigation}}
  72                 <h3>
  73                     <a href="{{{url}}}" title="{{#str}}monththis, calendar{{/str}}">{{periodname}}</a>
  74                 </h3>
  75             {{/includenavigation}}
  76         </caption>
  77         <thead>
  78           <tr>
  79                 {{# daynames }}
  80                 <th class="header text-xs-center" scope="col">
  81                     <abbr title="{{fullname}}">{{shortname}}</abbr>
  82                 </th>
  83                 {{/ daynames }}
  84             </tr>
  85         </thead>
  86         <tbody>
  87 {{#weeks}}
  88             <tr data-region="month-view-week">
  89                 {{#prepadding}}
  90                     <td class="dayblank">&nbsp;</td>
  91                 {{/prepadding}}
  92                 {{#days}}
  93                     <td class="day text-center{{!
  94                             This is the list of additional classes to display.
  95
  96                             This cell is for today.
  97                             }}{{#istoday}} today{{/istoday}}{{!
  98
  99                             This day falls on a weekend.
 100                             }}{{#isweekend}} weekend{{/isweekend}}{{!
 101
 102                             There is at least one event.
 103                             }}{{#events.0}} hasevent{{/events.0}}{{!
 104
 105                             There are events on this day which span multiple days.
 106                             }}{{#durationevents.0}} duration{{/durationevents.0}}{{!
 107                             }}{{#durationevents}} duration_{{.}}{{/durationevents}}{{!
 108                             }}{{#islastday}} duraction_finish{{/islastday}}{{!
 109
 110                             These event types fall on this day.
 111                             }}{{#calendareventtypes}}{{!
 112                             }} calendar_event_{{.}}{{!
 113                             }}{{/calendareventtypes}}{{!
 114
 115                             This day contains the last day of an event.
 116                             }}{{#haslastdayofevent}}{{!
 117                             }} duration_finish{{!
 118                             }}{{/haslastdayofevent}}{{!
 119                         }}"{{!
 120
 121                         Add data-eventtype-[eventtype] data attributes.
 122                         These are used to show and hide events using the filter.
 123                         }}{{#calendareventtypes}}{{!
 124                         }} data-eventtype-{{.}}="1"{{!
 125                         }}{{/calendareventtypes}}{{!
 126
 127                         This is the timestamp for this month.
 128                         }} data-day-timestamp="{{timestamp}}"{{!
 129                     }}>{{!
 130                         }}{{#popovertitle}}
 131                             {{< core_calendar/minicalendar_day_link }}
 132                                 {{$day}}{{mday}}{{/day}}
 133                                 {{$url}}{{viewdaylink}}{{/url}}
 134                                 {{$title}}{{popovertitle}}{{/title}}
 135                                 {{$nocontent}}{{#str}}eventnone, calendar{{/str}}{{/nocontent}}
 136                                 {{$content}}
 137                                     {{#events}}
 138                                         <div data-popover-eventtype-{{calendareventtype}}="1">
 139                                             {{#modulename}}
 140                                                 {{#pix}} icon, {{modulename}} {{/pix}}
 141                                             {{/modulename}}
 142                                             {{^modulename}}
 143                                                 {{#pix}} i/{{eventtype}}event, core {{/pix}}
 144                                             {{/modulename}}
 145                                             {{{popupname}}}
 146                                         </div>
 147                                     {{/events}}
 148                                 {{/content}}
 149                             {{/ core_calendar/minicalendar_day_link }}
 150                         {{/popovertitle}}{{!
 151                         }}{{^popovertitle}}
 152                             {{mday}}
 153                         {{/popovertitle}}{{!
 154                     }}</td>
 155                 {{/days}}
 156                 {{#postpadding}}
 157                     <td class="dayblank">&nbsp;</td>
 158                 {{/postpadding}}
 159             </tr>
 160 {{/weeks}}
 161         </tbody>
 162     </table>
 163 </div>
 164 {{#js}}
 165 require([
 166     'jquery',
 167     'core_calendar/selectors',
 168     'core_calendar/events',
 169 ], function(
 170     $,
 171     CalendarSelectors,
 172     CalendarEvents
 173 ) {
 174
 175     $('body').on(CalendarEvents.filterChanged, function(e, data) {
 176         M.util.js_pending("month-mini-{{uniqid}}-filterChanged");
 177         // A filter value has been changed.
 178         // Find all matching cells in the popover data, and hide them.
 179         $("#month-mini-{{date.year}}-{{date.month}}-{{uniqid}}")
 180             .find(CalendarSelectors.popoverType[data.type])
 181             .toggleClass('hidden', !!data.hidden);
 182         M.util.js_complete("month-mini-{{uniqid}}-filterChanged");
 183     });
 184 });
 185 {{/js}}