MDL-60065 calendar: Update side calendar when on CRUD events
[moodle.git] / calendar / templates / month_mini.mustache
CommitLineData
c8b6e9ab
AN
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}}
f58424c7
AN
34<div{{!
35 }} id="month-mini-{{date.year}}-{{date.month}}-{{uniqid}}"{{!
36 }} class="calendarwrapper"{{!
37 }} data-courseid="{{courseid}}"{{!
38 }} data-month="{{date.mon}}"{{!
39 }} data-year="{{date.year}}"{{!
40 }}>
c8b6e9ab
AN
41 {{> core/overlay_loading}}
42 <table class="minicalendar calendartable">
43 <caption class="calendar-controls">
f58424c7
AN
44 <a{{!
45 }} href="#"{{!
46 }} class="arrow_link previous"{{!
47 }} title="{{#str}}monthprev, calendar{{/str}}"{{!
48 }} data-year="{{previousperiod.year}}"{{!
49 }} data-month="{{previousperiod.mon}}"{{!
50 }}>
51 <span class="arrow">{{{larrow}}}</span>
52 </a>
c8b6e9ab
AN
53 <span class="hide"> | </span>
54 <span class="current">
f58424c7 55 <a href="{{{url}}}" title="{{#str}}monththis, calendar{{/str}}">{{periodname}}</a>
c8b6e9ab
AN
56 </span>
57 <span class="hide"> | </span>
f58424c7
AN
58 <a{{!
59 }} href="#"{{!
60 }} class="arrow_link next"{{!
61 }} title="{{#str}}monthprev, calendar{{/str}}"{{!
62 }} data-year="{{nextperiod.year}}"{{!
63 }} data-month="{{nextperiod.mon}}"{{!
64 }}>
65 <span class="arrow">{{{rarrow}}}</span>
66 </a>
c8b6e9ab
AN
67 </caption>
68 <thead>
69 <tr>
70 {{# daynames }}
71 <th class="header text-xs-center" scope="col">
72 <abbr title="{{fullname}}">{{shortname}}</abbr>
73 </th>
74 {{/ daynames }}
75 </tr>
76 </thead>
77 <tbody>
78{{#weeks}}
79 <tr data-region="month-view-week">
80 {{#prepadding}}
81 <td class="dayblank">&nbsp;</td>
82 {{/prepadding}}
83 {{#days}}
84 <td class="day text-center{{!
85 This is the list of additional classes to display.
86
87 This cell is for today.
88 }}{{#istoday}} today{{/istoday}}{{!
89
90 This day falls on a weekend.
91 }}{{#isweekend}} weekend{{/isweekend}}{{!
92
93 There is at least one event.
94 }}{{#events.0}} hasevent{{/events.0}}{{!
95
96 There are events on this day which span multiple days.
97 }}{{#durationevents.0}} duration{{/durationevents.0}}{{!
98 }}{{#durationevents}} duration_{{.}}{{/durationevents}}{{!
99 }}{{#islastday}} duraction_finish{{/islastday}}{{!
100
101 These event types fall on this day.
102 }}{{#calendareventtypes}}{{!
103 }} calendar_event_{{.}}{{!
104 }}{{/calendareventtypes}}{{!
105
106 This day contains the last day of an event.
107 }}{{#haslastdayofevent}}{{!
108 }} duration_finish{{!
109 }}{{/haslastdayofevent}}{{!
110 }}"{{!
111
112 Add data-eventtype-[eventtype] data attributes.
113 These are used to show and hide events using the filter.
114 }}{{#calendareventtypes}}{{!
115 }} data-eventtype-{{.}}="1"{{!
116 }}{{/calendareventtypes}}{{!
117
118 This is the timestamp for this month.
119 }} data-day-timestamp="{{timestamp}}"{{!
120 }}>{{!
121 }}{{#popovertitle}}
122 {{< core_calendar/minicalendar_day_link }}
123 {{$day}}{{mday}}{{/day}}
124 {{$url}}{{viewdaylink}}{{/url}}
125 {{$title}}{{popovertitle}}{{/title}}
126 {{$nocontent}}{{#str}}eventnone, calendar{{/str}}{{/nocontent}}
127 {{$content}}
128 {{#events}}
129 <div data-popover-eventtype-{{calendareventtype}}="1">
130 {{#modulename}}
131 {{#pix}} icon, {{modulename}} {{/pix}}
132 {{/modulename}}
133 {{^modulename}}
134 {{#pix}} i/{{eventtype}}event, core {{/pix}}
135 {{/modulename}}
136 {{{popupname}}}
137 </div>
138 {{/events}}
139 {{/content}}
140 {{/ core_calendar/minicalendar_day_link }}
141 {{/popovertitle}}{{!
142 }}{{^popovertitle}}
143 {{mday}}
144 {{/popovertitle}}{{!
145 }}</td>
146 {{/days}}
147 {{#postpadding}}
148 <td class="dayblank">&nbsp;</td>
149 {{/postpadding}}
150 </tr>
151{{/weeks}}
152 </tbody>
153 </table>
154</div>
155{{#js}}
156require([
157 'jquery',
158 'core_calendar/selectors',
159 'core_calendar/events',
160], function(
161 $,
162 CalendarSelectors,
163 CalendarEvents
164) {
165
166 $('body').on(CalendarEvents.filterChanged, function(e, data) {
167 M.util.js_pending("month-mini-{{uniqid}}-filterChanged");
168 // A filter value has been changed.
169 // Find all matching cells in the popover data, and hide them.
f58424c7 170 $("#month-mini-{{date.year}}-{{date.month}}-{{uniqid}}")
c8b6e9ab
AN
171 .find(CalendarSelectors.popoverType[data.type])
172 .toggleClass('hidden', !!data.hidden);
173 M.util.js_complete("month-mini-{{uniqid}}-filterChanged");
174 });
175});
176{{/js}}