MDL-65318 core_calendar: Additional fixes
[moodle.git] / calendar / templates / month_detailed.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_detailed
20     Calendar month view.
22     The purpose of this template is to render the month view.
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     }} class="calendarwrapper"{{!
36     }}{{#courseid}} data-courseid="{{courseid}}"{{/courseid}}{{!
37     }}{{#categoryid}} data-categoryid="{{categoryid}}"{{/categoryid}}{{!
38     }} data-context-id="{{defaulteventcontext}}"{{!
39     }} data-month="{{date.mon}}"{{!
40     }} data-year="{{date.year}}"{{!
41     }} data-view="month"{{!
42     }}>
43     {{> core_calendar/header }}
44     {{> core_calendar/month_navigation }}
45     {{> core/overlay_loading}}
46     <table id="month-detailed-{{uniqid}}" class="calendarmonth calendartable mb-0">
47         <thead>
48             <tr>
49                 {{# daynames }}
50                 <th class="header text-xs-center">
51                     {{shortname}}
52                 </th>
53                 {{/ daynames }}
54             </tr>
55         </thead>
56         <tbody>
57     {{#weeks}}
58             <tr data-region="month-view-week">
59                 {{#prepadding}}
60                     <td class="dayblank">&nbsp;</td>
61                 {{/prepadding}}
62                 {{#days}}
63                     <td class="day text-sm-center text-md-left{{!
64                             }}{{#istoday}} today{{/istoday}}{{!
65                             }}{{#isweekend}} weekend{{/isweekend}}{{!
66                             }}{{#durationevents.0}} duration{{/durationevents.0}}{{!
67                             }}{{#durationevents}} duration_{{.}}{{/durationevents}}{{!
68                             }}{{#defaulteventcontext}} clickable{{/defaulteventcontext}}{{!
69                         }}"
70                         data-day-timestamp="{{timestamp}}"
71                         data-drop-zone="month-view-day"
72                         data-region="day"
73                         data-new-event-timestamp="{{neweventtimestamp}}">
74                         <div class="d-none d-md-block hidden-phone text-xs-center">
75                             {{#hasevents}}
76                                 <a data-action="view-day-link" href="{{viewdaylink}}" class="day" title="{{viewdaylinktitle}}">{{mday}}</a>
77                             {{/hasevents}}
78                             {{^hasevents}}
79                                 {{mday}}
80                             {{/hasevents}}
81                             {{#hasevents}}
82                                 <div data-region="day-content">
83                                     <ul>
84                                         {{#events}}
85                                         {{#underway}}
86                                             <li class="events-underway">[{{{name}}}]</li>
87                                         {{/underway}}
88                                         {{^underway}}
89                                             <li data-region="event-item"
90                                                 data-eventtype-{{normalisedeventtype}}="1"
91                                                 {{#draggable}}
92                                                     draggable="true"
93                                                     data-drag-type="move"
94                                                     {{#mindaytimestamp}}
95                                                         data-min-day-timestamp="{{.}}"
96                                                     {{/mindaytimestamp}}
97                                                     {{#mindayerror}}
98                                                         data-min-day-error="{{.}}"
99                                                     {{/mindayerror}}
100                                                     {{#maxdaytimestamp}}
101                                                         data-max-day-timestamp="{{.}}"
102                                                     {{/maxdaytimestamp}}
103                                                     {{#maxdayerror}}
104                                                         data-max-day-error="{{.}}"
105                                                     {{/maxdayerror}}
106                                                 {{/draggable}}>
108                                                 <a data-action="view-event" data-event-id="{{id}}" href="{{url}}" title="{{name}}">
109                                                     <span class="badge badge-circle calendar_event_{{normalisedeventtype}}">
110                                                         &nbsp;
111                                                     </span>
112                                                     {{> core_calendar/event_icon}}
113                                                     <span class="eventname">{{{name}}}</span>
114                                                 </a>
115                                             </li>
116                                         {{/underway}}
117                                         {{/events}}
118                                     </ul>
119                                 </div>
120                             {{/hasevents}}
121                         </div>
122                         <div class="d-md-none hidden-desktop hidden-tablet">
123                             {{#hasevents}}
124                                 <a data-action="view-day-link" href="{{viewdaylink}}" class="day" title="{{viewdaylinktitle}}">{{mday}}</a>
125                             {{/hasevents}}
126                             {{^hasevents}}
127                                 <div data-region="day-content">
128                                     {{mday}}
129                                 </div>
130                             {{/hasevents}}
131                         </div>
132                     </td>
133                 {{/days}}
134                 {{#postpadding}}
135                     <td class="dayblank">&nbsp;</td>
136                 {{/postpadding}}
137             </tr>
138     {{/weeks}}
139         </tbody>
140     </table>
141 </div>
142 {{#js}}
143 require([
144     'jquery',
145     'core_calendar/month_view_drag_drop',
146     'core_calendar/selectors',
147     'core_calendar/events',
148 ], function(
149     $,
150     DragDrop,
151     CalendarSelectors,
152     CalendarEvents
153 ) {
154     var root = $('#month-detailed-{{uniqid}}');
155     DragDrop.init(root);
157     $('body').on(CalendarEvents.filterChanged, function(e, data) {
158         M.util.js_pending("month-detailed-{{uniqid}}-filterChanged");
159         // A filter value has been changed.
160         // Find all matching cells in the popover data, and hide them.
161         var target = $("#month-detailed-{{uniqid}}").find(CalendarSelectors.eventType[data.type]);
163         var transitionPromise = $.Deferred();
164         if (data.hidden) {
165             transitionPromise.then(function() {
166                 return target.slideUp('fast').promise();
167             });
168         } else {
169             transitionPromise.then(function() {
170                 return target.slideDown('fast').promise();
171             });
172         }
174         transitionPromise.then(function() {
175             M.util.js_complete("month-detailed-{{uniqid}}-filterChanged");
177             return;
178         });
180         transitionPromise.resolve();
181     });
182 });
183 {{/js}}