calendar/templates/month_detailed.mustache

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