AutorÃa | Ultima modificación | Ver Log |
{{!
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 core_calendar/event_item
Calendar event item.
The purpose of this template is to render the event item.
Classes required for JS:
* none
Data attributes required for JS:
* none
Example context (json):
{
"id": 1,
"name": "Sample event name",
"normalisedeventtype": "course",
"course": {
"id": 1
},
"canedit": true,
"candelete": true,
"isactionevent": true,
"icon": {
"key": "i/courseevent",
"component": "core",
"alttext": "Some course event",
"iconurl": "#"
},
"editurl": "#",
"url": "#"
}
}}
<div{{!
}} class="calendar-event-box calendar_event_{{eventtype}}" {{!
}} data-type="event" {{!
}} data-course-id="{{course.id}}" {{!
}} data-event-id="{{id}}" {{!
}} class="event" {{!
}} data-event-component="{{component}}" {{!
}} data-event-eventtype="{{eventtype}}" {{!
}} data-eventtype-{{normalisedeventtype}}="1" {{!
}} data-event-title="{{name}}" {{!
}} data-event-count="{{eventcount}}" {{!
}}>
<div class="calendar-event-row">
<div class="calendar-event-box-container">
{{#canedit}}
<div class="calendar-event-settings">
<a href="{{editurl}}" class="btn btn-xs btn-secondary px-2 icon-no-margin" data-action="edit">
<svg class="mr-2 rui-btn--icon" width="20" height="20" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" d="M4.75 19.25L9 18.25L18.2929 8.95711C18.6834 8.56658 18.6834 7.93342 18.2929 7.54289L16.4571 5.70711C16.0666 5.31658 15.4334 5.31658 15.0429 5.70711L5.75 15L4.75 19.25Z"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" d="M19.25 19.25H13.75"></path>
</svg>
<span>{{#str}}edit{{/str}}</span>
</a>
{{#candelete}}
<a href="{{deleteurl}}" class="btn btn-xs btn-danger p-1" data-action="delete" title="{{#str}}delete{{/str}}">
<svg width="20" height="20" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" d="M6.75 7.75L7.59115 17.4233C7.68102 18.4568 8.54622 19.25 9.58363 19.25H14.4164C15.4538 19.25 16.319 18.4568 16.4088 17.4233L17.25 7.75"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" d="M9.75 7.5V6.75C9.75 5.64543 10.6454 4.75 11.75 4.75H12.25C13.3546 4.75 14.25 5.64543 14.25 6.75V7.5"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" d="M5 7.75H19"></path>
</svg>
</a>
{{/candelete}}
</div>
{{/canedit}}
<div class="calendar-event-content">
<div class="calendar-event-date">
<div class="mr-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
<g data-name="Layer 2">
<g data-name="calendar">
<rect width="24" height="24" opacity="0" />
<path d="M18 4h-1V3a1 1 0 0 0-2 0v1H9V3a1 1 0 0 0-2 0v1H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zM6 6h1v1a1 1 0 0 0 2 0V6h6v1a1 1 0 0 0 2 0V6h1a1 1 0 0 1 1 1v4H5V7a1 1 0 0 1 1-1zm12 14H6a1 1 0 0 1-1-1v-6h14v6a1 1 0 0 1-1 1z" />
<circle cx="8" cy="16" r="1" />
<path d="M16 15h-4a1 1 0 0 0 0 2h4a1 1 0 0 0 0-2z" />
</g>
</g>
</svg>
</div>
<div class="d-inline-flex align-items-center">{{{formattedtime}}}</div>
</div>
<h3 class="calendar-event-heading">{{name}}</h3>
<div class="calendar-event-description">
{{{description}}}
</div>
<div class="rui-calendar-footer">
<ul class="rui-calendar-list mb-0 px-0">
{{#location}}
<li>
<div class="rui-calendar-list-content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
<g data-name="Layer 2">
<g data-name="globe">
<rect width="24" height="24" transform="rotate(180 12 12)" opacity="0" />
<path d="M22 12A10 10 0 0 0 12 2a10 10 0 0 0 0 20 10 10 0 0 0 10-10zm-2.07-1H17a12.91 12.91 0 0 0-2.33-6.54A8 8 0 0 1 19.93 11zM9.08 13H15a11.44 11.44 0 0 1-3 6.61A11 11 0 0 1 9.08 13zm0-2A11.4 11.4 0 0 1 12 4.4a11.19 11.19 0 0 1 3 6.6zm.36-6.57A13.18 13.18 0 0 0 7.07 11h-3a8 8 0 0 1 5.37-6.57zM4.07 13h3a12.86 12.86 0 0 0 2.35 6.56A8 8 0 0 1 4.07 13zm10.55 6.55A13.14 13.14 0 0 0 17 13h2.95a8 8 0 0 1-5.33 6.55z" />
</g>
</g>
</svg>
<span class="ml-1">{{{.}}}</span>
</div>
</li>
{{/location}}
{{#iscategoryevent}}
<li class="modal-cal-cat w-100 mb-1">
<div class="rui-calendar-list-content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
<g data-name="Layer 2">
<g data-name="bookmark">
<rect width="24" height="24" opacity="0" />
<path d="M6.09 21.06a1 1 0 0 1-1-1L4.94 5.4a2.26 2.26 0 0 1 2.18-2.35L16.71 3a2.27 2.27 0 0 1 2.23 2.31l.14 14.66a1 1 0 0 1-.49.87 1 1 0 0 1-1 0l-5.7-3.16-5.29 3.23a1.2 1.2 0 0 1-.51.15zm5.76-5.55a1.11 1.11 0 0 1 .5.12l4.71 2.61-.12-12.95c0-.2-.13-.34-.21-.33l-9.6.09c-.08 0-.19.13-.19.33l.12 12.9 4.28-2.63a1.06 1.06 0 0 1 .51-.14z" />
</g>
</g>
</svg>
<span class="ml-1">{{{category.nestedname}}}</span>
</div>
</li>
{{/iscategoryevent}}
{{#course.viewurl}}
<li>
<a class="rui-calendar-list-content" href="{{course.viewurl}}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
<g data-name="Layer 2">
<g data-name="book-open">
<rect width="24" height="24" transform="rotate(180 12 12)" opacity="0" />
<path d="M20.62 4.22a1 1 0 0 0-.84-.2L12 5.77 4.22 4A1 1 0 0 0 3 5v12.2a1 1 0 0 0 .78 1l8 1.8h.44l8-1.8a1 1 0 0 0 .78-1V5a1 1 0 0 0-.38-.78zM5 6.25l6 1.35v10.15L5 16.4zM19 16.4l-6 1.35V7.6l6-1.35z" />
</g>
</g>
</svg>
<span class="ml-1">{{{course.fullname}}}</span>
</a>
</li>
{{/course.viewurl}}
{{#groupname}}
<li>
<div class="rui-calendar-list-content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
<g data-name="Layer 2">
<g data-name="people">
<rect width="24" height="24" opacity="0" />
<path d="M9 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z" />
<path d="M17 13a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0-4a1 1 0 1 1-1 1 1 1 0 0 1 1-1z" />
<path d="M17 14a5 5 0 0 0-3.06 1.05A7 7 0 0 0 2 20a1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 6.9 6.9 0 0 0-.86-3.35A3 3 0 0 1 20 19a1 1 0 0 0 2 0 5 5 0 0 0-5-5z" />
</g>
</g>
</svg>
<span class="ml-1">{{{groupname}}}</span>
</div>
</li>
{{/groupname}}
{{#normalisedeventtypetext}}
<li>
<div class="rui-calendar-list-content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
<g data-name="Layer 2">
<g data-name="menu">
<rect width="24" height="24" transform="rotate(180 12 12)" opacity="0" />
<rect x="3" y="11" width="18" height="2" rx=".95" ry=".95" />
<rect x="3" y="16" width="18" height="2" rx=".95" ry=".95" />
<rect x="3" y="6" width="18" height="2" rx=".95" ry=".95" />
</g>
</g>
</svg>
<span class="ml-1">{{normalisedeventtypetext}}</span>
</div>
</li>
{{/normalisedeventtypetext}}
{{#subscription}}
{{#displayeventsource}}
<li>
<div class="rui-calendar-list-content">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 19C5.5 19.2761 5.27614 19.5 5 19.5C4.72386 19.5 4.5 19.2761 4.5 19C4.5 18.7239 4.72386 18.5 5 18.5C5.27614 18.5 5.5 18.7239 5.5 19Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.75 12.75H5C8.45178 12.75 11.25 15.5482 11.25 19V19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.75 6.75H5C11.7655 6.75 17.25 12.2345 17.25 19V19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
{{#subscriptionurl}}
<span class="ml-1"><a href="{{subscriptionurl}}">{{#str}}subscriptionsource, core_calendar, {{{subscriptionname}}}{{/str}}</a></span>
{{/subscriptionurl}}
{{^subscriptionurl}}
<span class="ml-1">{{#str}}subscriptionsource, core_calendar, {{{subscriptionname}}}{{/str}}</span>
{{/subscriptionurl}}
</div>
</li>
{{/displayeventsource}}
{{/subscription}}
</ul>
</div>
</div>
</div>
</div>
</div>