Merge branch 'MDL-69401-39' of git://github.com/mihailges/moodle into MOODLE_39_STABLE
[moodle.git] / calendar / templates / month_mini.mustache
1 {{!
2     This file is part of Moodle - http://moodle.org/
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.
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.
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
20     Calendar month view for blocks.
22     The purpose of this template is to render the month view for blocks.
24     Classes required for JS:
25     * none
27     Data attributes required for JS:
28     * none
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-day="{{date.mday}}"{{!
42     }} data-view="month"{{!
43     }}>
44     {{> core/overlay_loading}}
45     <table class="minicalendar calendartable">
46         <caption class="calendar-controls">
47             {{#includenavigation}}
48                 <a{{!
49                     }} href="#"{{!
50                     }} class="arrow_link previous"{{!
51                     }} title="{{#str}}monthprev, calendar{{/str}}"{{!
52                     }} data-year="{{previousperiod.year}}"{{!
53                     }} data-month="{{previousperiod.mon}}"{{!
54                 }}>
55                     <span class="arrow">{{{larrow}}}</span>
56                 </a>
57                 <span class="hide"> | </span>
58                 <span class="current">
59                     <a href="{{{url}}}" title="{{#str}}monththis, calendar{{/str}}">{{periodname}}</a>
60                 </span>
61                 <span class="hide"> | </span>
62                 <a{{!
63                     }} href="#"{{!
64                     }} class="arrow_link next"{{!
65                     }} title="{{#str}}monthnext, calendar{{/str}}"{{!
66                     }} data-year="{{nextperiod.year}}"{{!
67                     }} data-month="{{nextperiod.mon}}"{{!
68                 }}>
69                     <span class="arrow">{{{rarrow}}}</span>
70                 </a>
71             {{/includenavigation}}
72             {{^includenavigation}}
73                 <h3>
74                     <a href="{{{url}}}" title="{{#str}}monththis, calendar{{/str}}">{{periodname}}</a>
75                 </h3>
76             {{/includenavigation}}
77         </caption>
78         <thead>
79           <tr>
80                 {{# daynames }}
81                 <th class="header text-xs-center">
82                     <span class="sr-only">{{fullname}}</span>
83                     <span aria-hidden="true">{{shortname}}</span>
84                 </th>
85                 {{/ daynames }}
86             </tr>
87         </thead>
88         <tbody>
89 {{#weeks}}
90             <tr data-region="month-view-week">
91                 {{#prepadding}}
92                     <td class="dayblank">&nbsp;</td>
93                 {{/prepadding}}
94                 {{#days}}
95                     <td class="day text-center{{!
96                             This is the list of additional classes to display.
98                             This cell is for today.
99                             }}{{#istoday}} today{{/istoday}}{{!
101                             This day falls on a weekend.
102                             }}{{#isweekend}} weekend{{/isweekend}}{{!
104                             There is at least one event.
105                             }}{{#events.0}} hasevent{{/events.0}}{{!
107                             There are events on this day which span multiple days.
108                             }}{{#durationevents.0}} duration{{/durationevents.0}}{{!
109                             }}{{#durationevents}} duration_{{.}}{{/durationevents}}{{!
110                             }}{{#islastday}} duraction_finish{{/islastday}}{{!
112                             These event types fall on this day.
113                             }}{{#calendareventtypes}}{{!
114                             }} calendar_event_{{.}}{{!
115                             }}{{/calendareventtypes}}{{!
117                             This day contains the last day of an event.
118                             }}{{#haslastdayofevent}}{{!
119                             }} duration_finish{{!
120                             }}{{/haslastdayofevent}}{{!
121                         }}"{{!
123                         Add data-eventtype-[eventtype] data attributes.
124                         These are used to show and hide events using the filter.
125                         }}{{#calendareventtypes}}{{!
126                         }} data-eventtype-{{.}}="1"{{!
127                         }}{{/calendareventtypes}}{{!
129                         This is the timestamp for this month.
130                         }} data-day-timestamp="{{timestamp}}"{{!
131                     }}>{{!
132                         }}<span class="sr-only">{{daytitle}}</span>
133                         {{#popovertitle}}
134                             {{< core_calendar/minicalendar_day_link }}
135                                 {{$day}}{{mday}}{{/day}}
136                                 {{$url}}{{viewdaylink}}{{/url}}
137                                 {{$title}}{{popovertitle}}{{/title}}
138                                 {{$nocontent}}{{#str}}eventnone, calendar{{/str}}{{/nocontent}}
139                                 {{$content}}
140                                     {{#events}}
141                                         <div data-popover-eventtype-{{normalisedeventtype}}="1">
142                                             {{> core_calendar/event_icon}}
143                                             {{{popupname}}}
144                                         </div>
145                                     {{/events}}
146                                 {{/content}}
147                             {{/ core_calendar/minicalendar_day_link }}
148                         {{/popovertitle}}{{!
149                         }}{{^popovertitle}}
150                             <span aria-hidden="true">{{mday}}</span>
151                         {{/popovertitle}}{{!
152                     }}</td>
153                 {{/days}}
154                 {{#postpadding}}
155                     <td class="dayblank">&nbsp;</td>
156                 {{/postpadding}}
157             </tr>
158 {{/weeks}}
159         </tbody>
160     </table>
161 </div>
162 {{#js}}
163 require([
164     'jquery',
165     'core_calendar/selectors',
166     'core_calendar/events',
167 ], function(
168     $,
169     CalendarSelectors,
170     CalendarEvents
171 ) {
173     $('body').on(CalendarEvents.filterChanged, function(e, data) {
174         M.util.js_pending("month-mini-{{uniqid}}-filterChanged");
175         // A filter value has been changed.
176         // Find all matching cells in the popover data, and hide them.
177         $("#month-mini-{{date.year}}-{{date.month}}-{{uniqid}}")
178             .find(CalendarSelectors.popoverType[data.type])
179             .toggleClass('hidden', !!data.hidden);
180         M.util.js_complete("month-mini-{{uniqid}}-filterChanged");
181     });
182 });
183 {{/js}}