Merge branch 'MDL-65071-master-new' of git://github.com/mihailges/moodle
[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-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.
96                             This cell is for today.
97                             }}{{#istoday}} today{{/istoday}}{{!
99                             This day falls on a weekend.
100                             }}{{#isweekend}} weekend{{/isweekend}}{{!
102                             There is at least one event.
103                             }}{{#events.0}} hasevent{{/events.0}}{{!
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}}{{!
110                             These event types fall on this day.
111                             }}{{#calendareventtypes}}{{!
112                             }} calendar_event_{{.}}{{!
113                             }}{{/calendareventtypes}}{{!
115                             This day contains the last day of an event.
116                             }}{{#haslastdayofevent}}{{!
117                             }} duration_finish{{!
118                             }}{{/haslastdayofevent}}{{!
119                         }}"{{!
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}}{{!
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 ) {
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}}