moodle/calendar/templates/month_detailed.mustache

{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template calendar/month_detailed

    Calendar month view.

    The purpose of this template is to render the month view.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Example context (json):
    {
    }
}}
<div{{!
    }} class="calendarwrapper"{{!
    }}{{#courseid}} data-courseid="{{courseid}}"{{/courseid}}{{!
    }}{{#categoryid}} data-categoryid="{{categoryid}}"{{/categoryid}}{{!
    }} data-context-id="{{defaulteventcontext}}"{{!
    }} data-month="{{date.mon}}"{{!
    }} data-year="{{date.year}}"{{!
    }} data-view="month"{{!
    }}>
    {{> core_calendar/header }}
    {{> core_calendar/month_navigation }}
    {{> core/overlay_loading}}
    <table id="month-detailed-{{uniqid}}" class="calendarmonth calendartable mb-0">
        <thead>
            <tr>
                {{# daynames }}
                <th class="header text-xs-center">
                    {{shortname}}
                </th>
                {{/ daynames }}
            </tr>
        </thead>
        <tbody>
    {{#weeks}}
            <tr data-region="month-view-week">
                {{#prepadding}}
                    <td class="dayblank">&nbsp;</td>
                {{/prepadding}}
                {{#days}}
                    <td class="day text-sm-center text-md-left{{!
                            }}{{#istoday}} today{{/istoday}}{{!
                            }}{{#isweekend}} weekend{{/isweekend}}{{!
                            }}{{#durationevents.0}} duration{{/durationevents.0}}{{!
                            }}{{#durationevents}} duration_{{.}}{{/durationevents}}{{!
                            }}{{#defaulteventcontext}} clickable{{/defaulteventcontext}}{{!
                        }}"
                        data-day-timestamp="{{timestamp}}"
                        data-drop-zone="month-view-day"
                        data-region="day"
                        data-new-event-timestamp="{{neweventtimestamp}}">
                        <div class="d-none d-md-block hidden-phone text-xs-center">
                            {{#hasevents}}
                                <a data-action="view-day-link" href="{{viewdaylink}}" class="day" title="{{viewdaylinktitle}}">{{mday}}</a>
                            {{/hasevents}}
                            {{^hasevents}}
                                {{mday}}
                            {{/hasevents}}
                            {{#hasevents}}
                                <div data-region="day-content">
                                    <ul>
                                        {{#events}}
                                        {{#underway}}
                                            <li class="events-underway">[{{{name}}}]</li>
                                        {{/underway}}
                                        {{^underway}}
                                            <li data-region="event-item"
                                                data-eventtype-{{normalisedeventtype}}="1"
                                                {{#draggable}}
                                                    draggable="true"
                                                    data-drag-type="move"
                                                    {{#mindaytimestamp}}
                                                        data-min-day-timestamp="{{.}}"
                                                    {{/mindaytimestamp}}
                                                    {{#mindayerror}}
                                                        data-min-day-error="{{.}}"
                                                    {{/mindayerror}}
                                                    {{#maxdaytimestamp}}
                                                        data-max-day-timestamp="{{.}}"
                                                    {{/maxdaytimestamp}}
                                                    {{#maxdayerror}}
                                                        data-max-day-error="{{.}}"
                                                    {{/maxdayerror}}
                                                {{/draggable}}>

                                                <a data-action="view-event" data-event-id="{{id}}" href="{{url}}" title="{{name}}">
                                                    <span class="badge badge-circle calendar_event_{{normalisedeventtype}}">
                                                        &nbsp;
                                                    </span>
                                                    {{> core_calendar/event_icon}}
                                                    <span class="eventname">{{{name}}}</span>
                                                </a>
                                            </li>
                                        {{/underway}}
                                        {{/events}}
                                    </ul>
                                </div>
                            {{/hasevents}}
                        </div>
                        <div class="d-md-none hidden-desktop hidden-tablet">
                            {{#hasevents}}
                                <a data-action="view-day-link" href="{{viewdaylink}}" class="day" title="{{viewdaylinktitle}}">{{mday}}</a>
                            {{/hasevents}}
                            {{^hasevents}}
                                <div data-region="day-content">
                                    {{mday}}
                                </div>
                            {{/hasevents}}
                        </div>
                    </td>
                {{/days}}
                {{#postpadding}}
                    <td class="dayblank">&nbsp;</td>
                {{/postpadding}}
            </tr>
    {{/weeks}}
        </tbody>
    </table>
</div>
{{#js}}
require([
    'jquery',
    'core_calendar/month_view_drag_drop',
    'core_calendar/selectors',
    'core_calendar/events',
], function(
    $,
    DragDrop,
    CalendarSelectors,
    CalendarEvents
) {
    var root = $('#month-detailed-{{uniqid}}');
    DragDrop.init(root);

    $('body').on(CalendarEvents.filterChanged, function(e, data) {
        M.util.js_pending("month-detailed-{{uniqid}}-filterChanged");
        // A filter value has been changed.
        // Find all matching cells in the popover data, and hide them.
        var target = $("#month-detailed-{{uniqid}}").find(CalendarSelectors.eventType[data.type]);

        var transitionPromise = $.Deferred();
        if (data.hidden) {
            transitionPromise.then(function() {
                return target.slideUp('fast').promise();
            });
        } else {
            transitionPromise.then(function() {
                return target.slideDown('fast').promise();
            });
        }

        transitionPromise.then(function() {
            M.util.js_complete("month-detailed-{{uniqid}}-filterChanged");

            return;
        });

        transitionPromise.resolve();
    });
});
{{/js}}