9abff8e2c2acda9a73ec54e413570e245b65b10a
[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 card-deck m-b-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="clickable 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                         }}"
69                         data-day-timestamp="{{timestamp}}"
70                         data-drop-zone="month-view-day"
71                         data-region="day"
72                         data-new-event-timestamp="{{neweventtimestamp}}">
73                         <div class="hidden-sm-down hidden-phone text-xs-center">
74                             {{#hasevents}}
75                                 <a data-action="view-day-link" href="{{viewdaylink}}" class="day" title="{{viewdaylinktitle}}">{{mday}}</a>
76                             {{/hasevents}}
77                             {{^hasevents}}
78                                 {{mday}}
79                             {{/hasevents}}
80                             {{#hasevents}}
81                                 <div data-region="day-content">
82                                     <ul>
83                                         {{#events}}
84                                         {{#underway}}
85                                             <li class="events-underway">[{{name}}]</li>
86                                         {{/underway}}
87                                         {{^underway}}
88                                             <li data-region="event-item"
89                                                 data-eventtype-{{calendareventtype}}="1"
90                                                 {{#draggable}}
91                                                     draggable="true"
92                                                     data-drag-type="move"
93                                                     {{#mindaytimestamp}}
94                                                         data-min-day-timestamp="{{.}}"
95                                                     {{/mindaytimestamp}}
96                                                     {{#mindayerror}}
97                                                         data-min-day-error="{{.}}"
98                                                     {{/mindayerror}}
99                                                     {{#maxdaytimestamp}}
100                                                         data-max-day-timestamp="{{.}}"
101                                                     {{/maxdaytimestamp}}
102                                                     {{#maxdayerror}}
103                                                         data-max-day-error="{{.}}"
104                                                     {{/maxdayerror}}
105                                                 {{/draggable}}>
107                                                 <a data-action="view-event" data-event-id="{{id}}" href="{{url}}" title="{{name}}">
108                                                     <span class="badge badge-circle calendar_event_{{calendareventtype}}">
109                                                         &nbsp;
110                                                     </span>
111                                                     {{> core_calendar/event_icon}}
112                                                     <span class="eventname">{{name}}</span>
113                                                 </a>
114                                             </li>
115                                         {{/underway}}
116                                         {{/events}}
117                                     </ul>
118                                 </div>
119                             {{/hasevents}}
120                         </div>
121                         <div class="hidden-md-up hidden-desktop hidden-tablet">
122                             {{#hasevents}}
123                                 <a data-action="view-day-link" href="{{viewdaylink}}" class="day" title="{{viewdaylinktitle}}">{{mday}}</a>
124                             {{/hasevents}}
125                             {{^hasevents}}
126                                 <div data-region="day-content">
127                                     {{mday}}
128                                 </div>
129                             {{/hasevents}}
130                         </div>
131                     </td>
132                 {{/days}}
133                 {{#postpadding}}
134                     <td class="dayblank">&nbsp;</td>
135                 {{/postpadding}}
136             </tr>
137     {{/weeks}}
138         </tbody>
139     </table>
140 </div>
141 {{#js}}
142 require([
143     'jquery',
144     'core_calendar/month_view_drag_drop',
145     'core_calendar/selectors',
146     'core_calendar/events',
147 ], function(
148     $,
149     DragDrop,
150     CalendarSelectors,
151     CalendarEvents
152 ) {
153     var root = $('#month-detailed-{{uniqid}}');
154     DragDrop.init(root);
156     $('body').on(CalendarEvents.filterChanged, function(e, data) {
157         M.util.js_pending("month-detailed-{{uniqid}}-filterChanged");
158         // A filter value has been changed.
159         // Find all matching cells in the popover data, and hide them.
160         var target = $("#month-detailed-{{uniqid}}").find(CalendarSelectors.eventType[data.type]);
162         var transitionPromise = $.Deferred();
163         if (data.hidden) {
164             transitionPromise.then(function() {
165                 return target.slideUp('fast').promise();
166             });
167         } else {
168             transitionPromise.then(function() {
169                 return target.slideDown('fast').promise();
170             });
171         }
173         transitionPromise.then(function() {
174             M.util.js_complete("month-detailed-{{uniqid}}-filterChanged");
176             return;
177         });
179         transitionPromise.resolve();
180     });
181 });
182 {{/js}}