3368 lines
100 KiB
XML
3368 lines
100 KiB
XML
<!--
|
|
~ Copyright (C) 2024 Xibo Signage Ltd
|
|
~
|
|
~ Xibo - Digital Signage - https://xibosignage.com
|
|
~
|
|
~ This file is part of Xibo.
|
|
~
|
|
~ Xibo is free software: you can redistribute it and/or modify
|
|
~ it under the terms of the GNU Affero General Public License as published by
|
|
~ the Free Software Foundation, either version 3 of the License, or
|
|
~ any later version.
|
|
~
|
|
~ Xibo 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 Affero General Public License for more details.
|
|
~
|
|
~ You should have received a copy of the GNU Affero General Public License
|
|
~ along with Xibo. If not, see <http://www.gnu.org/licenses/>.
|
|
-->
|
|
<templates>
|
|
<!-- Custom Calendar -->
|
|
<template>
|
|
<id>event_custom_html</id>
|
|
<type>static</type>
|
|
<dataType>event</dataType>
|
|
<showIn>none</showIn>
|
|
<title>Events shown with custom HTML</title>
|
|
<properties>
|
|
<property id="effect" type="effectSelector" variant="all">
|
|
<title>Effect</title>
|
|
<helpText>Please select the effect that will be used to transition between items.</helpText>
|
|
<default>noTransition</default>
|
|
</property>
|
|
<property id="speed" type="number">
|
|
<title>Speed</title>
|
|
<helpText>The transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1)</helpText>
|
|
<default>1000</default>
|
|
</property>
|
|
<property id="itemsSideBySide" type="checkbox">
|
|
<title>Show items side by side?</title>
|
|
<helpText>Should items be shown side by side?</helpText>
|
|
<default>0</default>
|
|
</property>
|
|
<property id="itemsPerPage" type="number">
|
|
<title>Items per page</title>
|
|
<helpText>If an effect has been selected, how many pages should we split the items across? If you don't enter anything here 1 item will be put on each page.</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="dateFormat" type="text" variant="dateFormat">
|
|
<title>Date Format</title>
|
|
<helpText>The format to apply to all dates returned by the Widget.</helpText>
|
|
<default>#DATE_FORMAT#</default>
|
|
</property>
|
|
<property id="lang" type="languageSelector" variant="momentLocales">
|
|
<title>Language</title>
|
|
<helpText>Select the language you would like to use.</helpText>
|
|
</property>
|
|
<property id="backgroundColor" type="color">
|
|
<title>Background Colour</title>
|
|
<helpText>The selected effect works best with a background colour. Optionally add one here.</helpText>
|
|
<default></default>
|
|
</property>
|
|
<property id="text" type="richText" allowLibraryRefs="true" variant="html">
|
|
<title>Item Template</title>
|
|
<helpText>Enter text in the box below, used to display each article.</helpText>
|
|
</property>
|
|
<property id="dataTypeSnippets" type="snippet" mode="dataType" target="text">
|
|
<title>Snippets</title>
|
|
<helpText>Choose data type snippet</helpText>
|
|
</property>
|
|
<property id="noDataMessage" type="richText" allowLibraryRefs="true" variant="html">
|
|
<title>No data message</title>
|
|
<helpText>A message to display when no data is returned from the source</helpText>
|
|
</property>
|
|
<property id="styleSheet" type="code" allowLibraryRefs="true" variant="css">
|
|
<title>Optional Stylesheet Template</title>
|
|
</property>
|
|
<property id="javaScript" type="code" allowLibraryRefs="true" variant="javascript">
|
|
<title>Optional JavaScript</title>
|
|
<helpText>Add JavaScript to be included immediately before the closing body tag. Do not use [] array notation as this is reserved for library references. Do not include script tags.</helpText>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<twig><![CDATA[
|
|
{% if javaScript %}<script type="text/javascript">{{javaScript|raw}}</script>{% endif %}
|
|
]]></twig>
|
|
<style><![CDATA[
|
|
{% if itemsSideBySide %}.item, .page { float: left; }{% endif %}
|
|
{% if textDirection == "rtl" %}#content { direction: rtl; }{% endif %}
|
|
{% if backgroundColor %}body { background-color: {{backgroundColor}} !important; }{% endif %}
|
|
{{styleSheet|raw}}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// id: The id of the widget
|
|
// target: The target element to render
|
|
// items: The items to render
|
|
// properties: The properties for the widget
|
|
// -------------------------------------------
|
|
moment.locale(properties.lang || globalOptions.locale);
|
|
|
|
if (items.length > 0) {
|
|
items = $(items).xiboSubstitutesParser(properties.text, properties.dateFormat, ['startDate', 'endDate']);
|
|
}
|
|
|
|
// No data message
|
|
if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
|
|
items.push(properties.noDataMessage);
|
|
}
|
|
|
|
// Clear container
|
|
$(target).find('#content').empty();
|
|
|
|
// Add items to container
|
|
for (var index = 0; index < items.length; index++) {
|
|
var $newItem = $('<div>').addClass('event').html(items[index]).appendTo('body');
|
|
$(target).find('#content').append($newItem);
|
|
}
|
|
|
|
// Render
|
|
$(target).xiboLayoutScaler(properties);
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .event'));
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
</template>
|
|
<!-- End of Custom Calendar -->
|
|
|
|
<!-- Daily Calendar -->
|
|
<template>
|
|
<id>daily_light</id>
|
|
<type>static</type>
|
|
<dataType>event</dataType>
|
|
<title>Daily Calendar - Light</title>
|
|
<thumbnail>daily_light</thumbnail>
|
|
<startWidth>800</startWidth>
|
|
<startHeight>500</startHeight>
|
|
<properties>
|
|
<property type="message" variant="warning">
|
|
<title>This template uses features which will not work on devices with a browser older than Chrome 57, including webOS older than 6 and Tizen older than 5.</title>
|
|
</property>
|
|
<property id="startTime" type="date" variant="time">
|
|
<title>First hour slot</title>
|
|
<helpText>This view features a grid running from midnight to midnight. Use the first slot to shorten the time window shown.</helpText>
|
|
<default></default>
|
|
</property>
|
|
<property id="endTime" type="date" variant="time">
|
|
<title>Last hour slot</title>
|
|
<helpText>This view features a grid running from midnight to midnight. Use the last slot to shorten the time window shown.</helpText>
|
|
<default></default>
|
|
</property>
|
|
<property id="timeFormat" type="text">
|
|
<title>Time Format</title>
|
|
<helpText>The format to apply to event time (default HH:mm).</helpText>
|
|
<default>HH:mm</default>
|
|
</property>
|
|
<property id="lang" type="languageSelector" variant="momentLocales">
|
|
<title>Language</title>
|
|
<helpText>Select the language you would like to use.</helpText>
|
|
</property>
|
|
<property id="startAtCurrentTime" type="checkbox">
|
|
<title>Start at the current time?</title>
|
|
<helpText>Should the calendar start at the current time, or at the time of the first event?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="showNowMarker" type="checkbox">
|
|
<title>Show now marker?</title>
|
|
<helpText>Should the calendar show a marker for the current time?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="textScale" type="number">
|
|
<title>Text scale</title>
|
|
<helpText>Set the scale for the text element on the calendar.</helpText>
|
|
<default>1.0</default>
|
|
</property>
|
|
<property id="gridStep" type="number">
|
|
<title>Grid step</title>
|
|
<helpText>Duration, in minutes, for each row in the grid.</helpText>
|
|
<default>60</default>
|
|
</property>
|
|
<property type="header" variant="main">
|
|
<title>Colours</title>
|
|
</property>
|
|
<property type="message">
|
|
<title>Use the colour pickers to override the element colours.</title>
|
|
</property>
|
|
<property id="gridColor" type="color">
|
|
<title>Grid Colour</title>
|
|
<default>#dadada</default>
|
|
</property>
|
|
<property id="gridTextColor" type="color">
|
|
<title>Grid Text Colour</title>
|
|
<default>#505050</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Header (Weekdays)</title>
|
|
</property>
|
|
<property id="weekDaysHeaderBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#f9f9f9</default>
|
|
</property>
|
|
<property id="weekDaysHeaderTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#292929</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Calendar Days</title>
|
|
</property>
|
|
<property id="dayBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#f9f9f9</default>
|
|
</property>
|
|
<property id="dayTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#3e4e63</default>
|
|
</property>
|
|
<property id="todayTextColor" type="color">
|
|
<title>Current day text Colour</title>
|
|
<default>#65668d</default>
|
|
</property>
|
|
<property id="nowMarkerColor" type="color">
|
|
<title>Now marker Colour</title>
|
|
<default>#ff2525</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Events</title>
|
|
</property>
|
|
<property id="eventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#9264A6</default>
|
|
</property>
|
|
<property id="eventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>All day events</title>
|
|
</property>
|
|
<property id="dailyEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#70497E</default>
|
|
</property>
|
|
<property id="dailyEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Multiple days events</title>
|
|
</property>
|
|
<property id="multiDayEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#603D6B</default>
|
|
</property>
|
|
<property id="multiDayEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Aditional days container</title>
|
|
</property>
|
|
<property id="aditionalEventsBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#dcdcdc</default>
|
|
</property>
|
|
<property id="aditionalEventsTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#656565</default>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<twig><![CDATA[
|
|
<div class="calendar-daily calendar-container">
|
|
<ol class="hour-grid"></ol>
|
|
<ol class="day-title"></ol>
|
|
<ol class="day-container"></ol>
|
|
</div>
|
|
]]></twig>
|
|
<style><![CDATA[
|
|
:root {
|
|
--grid-color: #dadada;
|
|
--grid-text-color: #505050;
|
|
--today-text-color: #fb8100;
|
|
--now-marker-color: #fb8100;
|
|
--day-bg-color: #f9f9f9;
|
|
--day-text-color: #3e4e63;
|
|
--weekdays-bg-color: #f9f9f9;
|
|
--weekdays-text-color: #292929;
|
|
--event-bg-color: #9264A6;
|
|
--event-text-color: #fff;
|
|
--daily-event-bg-color: #70497E;
|
|
--daily-event-text-color: #fff;
|
|
--multi-day-event-bg-color: #603D6B;
|
|
--multi-day-event-text-color: #fff;
|
|
--aditional-events-bg-color: #dcdcdc;
|
|
--aditional-events-text-color: #656565;
|
|
--all-day-events-container-height: 8rem;
|
|
font-size: 16px;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#content {
|
|
display: none;
|
|
}
|
|
|
|
ol, li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.calendar-daily {
|
|
position: relative;
|
|
height: 100%;
|
|
background-color: var(--day-bg-color);
|
|
}
|
|
|
|
.now-marker {
|
|
position: absolute;
|
|
background-color: var(--now-marker-color);
|
|
height: 0.2rem;
|
|
margin-top: -0.1rem;
|
|
width: 100%;
|
|
z-index: 4;
|
|
}
|
|
|
|
.hour-grid {
|
|
position: absolute;
|
|
width: 100%;
|
|
margin-top: 4rem;
|
|
height: calc(100% - 4rem);
|
|
z-index: 1;
|
|
}
|
|
|
|
.hour-grid .hour-time {
|
|
line-height: 0.125rem;
|
|
margin-left: 0.5rem;
|
|
text-align: right;
|
|
width: 4rem;
|
|
color: var(--grid-text-color);
|
|
}
|
|
|
|
.hour-grid .hour-time:after {
|
|
border-top: 1px solid var(--grid-color);
|
|
content: "";
|
|
width: calc(100% - 12px - 4rem);
|
|
margin-left: 0.75rem;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
.day-title {
|
|
color: var(--weekdays-text-color);
|
|
background-color: var(--weekdays-bg-color);
|
|
font-size: 1.75rem;
|
|
padding-top: 0.25rem;
|
|
height: 3.75rem;
|
|
}
|
|
|
|
.day-title, .day-container {
|
|
margin-left: 6rem;
|
|
}
|
|
|
|
.day-title>* {
|
|
padding-left: 1rem;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row-reverse;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.day-title .week-day-date {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
color: var(--today-text-color);
|
|
}
|
|
|
|
.day-title .week-day {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.day-container {
|
|
height: calc(100% - 4rem);
|
|
position: relative;
|
|
}
|
|
|
|
.calendar-day {
|
|
position: relative;
|
|
height: 100%;
|
|
font-size: 1.2rem;
|
|
color: var(--day-text-color);
|
|
border: 1px solid var(--grid-color);
|
|
}
|
|
|
|
.calendar-day .calendar-events-container {
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.calendar-day .calendar-all-day-events-container {
|
|
display: none;
|
|
height: var(--all-day-events-container-height);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.calendar-daily.show-all-day-events .calendar-day .calendar-events-container {
|
|
height: calc(100% - var(--all-day-events-container-height));
|
|
}
|
|
|
|
.calendar-daily.show-all-day-events .calendar-day .calendar-all-day-events-container {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.calendar-daily.show-all-day-events .hour-grid {
|
|
margin-top: calc(4rem + var(--all-day-events-container-height));
|
|
height: calc(100% - calc(4rem + var(--all-day-events-container-height)));
|
|
}
|
|
|
|
.calendar-all-day-events-container .extra-events {
|
|
bottom: 1px;
|
|
opacity: 0.85;
|
|
z-index: 2;
|
|
text-align: right;
|
|
position: absolute;
|
|
font-weight: bold;
|
|
background-color: var(--aditional-events-bg-color);
|
|
color: var(--aditional-events-text-color);
|
|
width: 100%;
|
|
font-size: 1.2rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
.calendar-all-day-events-container .extra-events span {
|
|
padding-right: 0.375rem;
|
|
}
|
|
|
|
.calendar-event {
|
|
width: 100%;
|
|
color: var(--event-text-color);
|
|
background-color: var(--event-bg-color);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
height: 1.25rem;
|
|
line-height: 1em;
|
|
z-index: 1;
|
|
border-radius: 0.375rem;
|
|
min-height: 1em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.calendar-event.before-view {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
.calendar-event.concurrent::after {
|
|
border: 1px solid var(--event-text-color);
|
|
border-left-width: 2px;
|
|
content: " ";
|
|
width: calc(100% - 2px);
|
|
height: calc(100% - 2px);
|
|
left: 0px;
|
|
top: 0px;
|
|
position: absolute;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.calendar-event.concurrent.level-1 {
|
|
margin-left: 20%;
|
|
width: 80%;
|
|
z-index: 1;
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-2 {
|
|
margin-left: 40%;
|
|
width: 60%;
|
|
z-index: 2;
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-3 {
|
|
margin-left: 60%;
|
|
width: 40%;
|
|
z-index: 3;
|
|
filter: brightness(1.15);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-4 {
|
|
margin-left: 70%;
|
|
width: 30%;
|
|
z-index: 4;
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-5 {
|
|
margin-left: 80%;
|
|
width: 20%;
|
|
z-index: 5;
|
|
filter: brightness(1.25);
|
|
}
|
|
|
|
.calendar-event.shorter-event {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.calendar-event .event-time {
|
|
font-size: 0.8em;
|
|
margin-left: 0.25em;
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.calendar-event .event-summary {
|
|
font-size: 0.9em;
|
|
margin-left: 0.25em;
|
|
font-weight: bold;
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.calendar-event.multi-day, .calendar-event.all-day {
|
|
flex-direction: row;
|
|
padding: 0.25rem 0;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.calendar-event.all-day {
|
|
color: var(--daily-event-text-color);
|
|
background-color: var(--daily-event-bg-color);
|
|
}
|
|
|
|
.calendar-event.multi-day {
|
|
color: var(--multi-day-event-text-color);
|
|
background-color: var(--multi-day-event-bg-color);
|
|
}
|
|
|
|
.calendar-event.multi-day.cropped-event-start {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: -0.125rem;
|
|
}
|
|
|
|
.calendar-event.multi-day.cropped-event-end {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// Template renderer options
|
|
// id: The id of the widget
|
|
// target: The target element to render
|
|
// items: The items to render
|
|
// properties: The properties for the widget
|
|
moment.locale(properties.lang || globalOptions.locale);
|
|
|
|
$(target).xiboLayoutScaler(properties);
|
|
|
|
// Add the calendar type to options
|
|
properties.calendarType = 2;
|
|
|
|
// Run calendar render
|
|
$(target).xiboCalendarRender(properties, items);
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="daily_light" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/daily_light.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>daily_dark</id>
|
|
<type>static</type>
|
|
<dataType>event</dataType>
|
|
<title>Daily Calendar - Dark</title>
|
|
<thumbnail>daily_dark</thumbnail>
|
|
<startWidth>800</startWidth>
|
|
<startHeight>500</startHeight>
|
|
<properties>
|
|
<property type="message" variant="warning">
|
|
<title>This template uses features which will not work on devices with a browser older than Chrome 57, including webOS older than 6 and Tizen older than 5.</title>
|
|
</property>
|
|
<property id="startTime" type="date" variant="time">
|
|
<title>First hour slot</title>
|
|
<helpText>This view features a grid running from midnight to midnight. Use the first slot to shorten the time window shown.</helpText>
|
|
<default></default>
|
|
</property>
|
|
<property id="endTime" type="date" variant="time">
|
|
<title>Last hour slot</title>
|
|
<helpText>This view features a grid running from midnight to midnight. Use the last slot to shorten the time window shown.</helpText>
|
|
<default></default>
|
|
</property>
|
|
<property id="timeFormat" type="text">
|
|
<title>Time Format</title>
|
|
<helpText>The format to apply to event time (default HH:mm).</helpText>
|
|
<default>HH:mm</default>
|
|
</property>
|
|
<property id="lang" type="languageSelector" variant="momentLocales">
|
|
<title>Language</title>
|
|
<helpText>Select the language you would like to use.</helpText>
|
|
</property>
|
|
<property id="startAtCurrentTime" type="checkbox">
|
|
<title>Start at the current time?</title>
|
|
<helpText>Should the calendar start at the current time, or at the time of the first event?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="showNowMarker" type="checkbox">
|
|
<title>Show now marker?</title>
|
|
<helpText>Should the calendar show a marker for the current time?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="textScale" type="number">
|
|
<title>Text scale</title>
|
|
<helpText>Set the scale for the text element on the calendar.</helpText>
|
|
<default>1.0</default>
|
|
</property>
|
|
<property id="gridStep" type="number">
|
|
<title>Grid step</title>
|
|
<helpText>Duration, in minutes, for each row in the grid.</helpText>
|
|
<default>60</default>
|
|
</property>
|
|
<property type="header" variant="main">
|
|
<title>Colours</title>
|
|
</property>
|
|
<property type="message">
|
|
<title>Use the colour pickers to override the element colours.</title>
|
|
</property>
|
|
<property id="gridColor" type="color">
|
|
<title>Grid Colour</title>
|
|
<default>#545454</default>
|
|
</property>
|
|
<property id="gridTextColor" type="color">
|
|
<title>Grid Text Colour</title>
|
|
<default>#bbbbbb</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Header (Weekdays)</title>
|
|
</property>
|
|
<property id="weekDaysHeaderBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#1e1e1e</default>
|
|
</property>
|
|
<property id="weekDaysHeaderTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#bbbbbb</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Calendar Days</title>
|
|
</property>
|
|
<property id="dayBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#303030</default>
|
|
</property>
|
|
<property id="dayTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#bbbbbb</default>
|
|
</property>
|
|
<property id="todayTextColor" type="color">
|
|
<title>Current day text Colour</title>
|
|
<default>#ef4050</default>
|
|
</property>
|
|
<property id="nowMarkerColor" type="color">
|
|
<title>Now marker Colour</title>
|
|
<default>#ef4050</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Events</title>
|
|
</property>
|
|
<property id="eventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#a5daff</default>
|
|
</property>
|
|
<property id="eventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#434343</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>All day events</title>
|
|
</property>
|
|
<property id="dailyEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#1d6ca3</default>
|
|
</property>
|
|
<property id="dailyEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#e9e9e9</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Multiple days events</title>
|
|
</property>
|
|
<property id="multiDayEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#2d75a7</default>
|
|
</property>
|
|
<property id="multiDayEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#e9e9e9</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Aditional days container</title>
|
|
</property>
|
|
<property id="aditionalEventsBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#4b4b4b</default>
|
|
</property>
|
|
<property id="aditionalEventsTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#bbbbbb</default>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<twig><![CDATA[
|
|
<div class="calendar-daily calendar-container">
|
|
<ol class="hour-grid"></ol>
|
|
<ol class="day-title"></ol>
|
|
<ol class="day-container"></ol>
|
|
</div>
|
|
]]></twig>
|
|
<style><![CDATA[
|
|
:root {
|
|
--grid-color: #545454;
|
|
--grid-text-color: #bbbbbb;
|
|
--today-text-color: #ef4050;
|
|
--now-marker-color: #ef4050;
|
|
--day-bg-color: #303030;
|
|
--day-text-color: #bbbbbb;
|
|
--weekdays-bg-color: #1e1e1e;
|
|
--weekdays-text-color: #bbbbbb;
|
|
--event-bg-color: #a5daff;
|
|
--event-text-color: #434343;
|
|
--daily-event-bg-color: #1d6ca3;
|
|
--daily-event-text-color: #e9e9e9;
|
|
--multi-day-event-bg-color: #2d75a7;
|
|
--multi-day-event-text-color: #e9e9e9;
|
|
--aditional-events-bg-color: #4b4b4b;
|
|
--aditional-events-text-color: #bbbbbb;
|
|
--all-day-events-container-height: 8rem;
|
|
font-size: 16px;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#content {
|
|
display: none;
|
|
}
|
|
|
|
ol, li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.calendar-daily {
|
|
position: relative;
|
|
height: 100%;
|
|
background-color: var(--day-bg-color);
|
|
}
|
|
|
|
.now-marker {
|
|
position: absolute;
|
|
background-color: var(--now-marker-color);
|
|
height: 0.2rem;
|
|
margin-top: -0.1rem;
|
|
width: 100%;
|
|
z-index: 4;
|
|
}
|
|
|
|
.hour-grid {
|
|
position: absolute;
|
|
width: 100%;
|
|
margin-top: 4rem;
|
|
height: calc(100% - 4rem);
|
|
z-index: 1;
|
|
}
|
|
|
|
.hour-grid .hour-time {
|
|
line-height: 0.125rem;
|
|
margin-left: 0.5rem;
|
|
text-align: right;
|
|
width: 4rem;
|
|
color: var(--grid-text-color);
|
|
}
|
|
|
|
.hour-grid .hour-time:after {
|
|
border-top: 1px solid var(--grid-color);
|
|
content: "";
|
|
width: calc(100% - 12px - 4rem);
|
|
margin-left: 0.75rem;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
.day-title {
|
|
color: var(--weekdays-text-color);
|
|
background-color: var(--weekdays-bg-color);
|
|
font-size: 1.75rem;
|
|
padding-top: 0.25rem;
|
|
height: 3.75rem;
|
|
}
|
|
|
|
.day-title, .day-container {
|
|
margin-left: 6rem;
|
|
}
|
|
|
|
.day-title>* {
|
|
padding-left: 1rem;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row-reverse;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.day-title .week-day-date {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
color: var(--today-text-color);
|
|
}
|
|
|
|
.day-title .week-day {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.day-container {
|
|
height: calc(100% - 4rem);
|
|
position: relative;
|
|
}
|
|
|
|
.calendar-day {
|
|
position: relative;
|
|
height: 100%;
|
|
font-size: 1.2rem;
|
|
color: var(--day-text-color);
|
|
border: 1px solid var(--grid-color);
|
|
}
|
|
|
|
.calendar-day .calendar-events-container {
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.calendar-day .calendar-all-day-events-container {
|
|
display: none;
|
|
height: var(--all-day-events-container-height);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.calendar-daily.show-all-day-events .calendar-day .calendar-events-container {
|
|
height: calc(100% - var(--all-day-events-container-height));
|
|
}
|
|
|
|
.calendar-daily.show-all-day-events .calendar-day .calendar-all-day-events-container {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.calendar-daily.show-all-day-events .hour-grid {
|
|
margin-top: calc(4rem + var(--all-day-events-container-height));
|
|
height: calc(100% - calc(4rem + var(--all-day-events-container-height)));
|
|
}
|
|
|
|
.calendar-all-day-events-container .extra-events {
|
|
bottom: 1px;
|
|
opacity: 0.85;
|
|
z-index: 2;
|
|
text-align: right;
|
|
position: absolute;
|
|
font-weight: bold;
|
|
background-color: var(--aditional-events-bg-color);
|
|
color: var(--aditional-events-text-color);
|
|
width: 100%;
|
|
font-size: 1.2rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
.calendar-all-day-events-container .extra-events span {
|
|
padding-right: 0.375rem;
|
|
}
|
|
|
|
.calendar-event {
|
|
width: 100%;
|
|
color: var(--event-text-color);
|
|
background-color: var(--event-bg-color);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
height: 1.25rem;
|
|
line-height: 1em;
|
|
z-index: 1;
|
|
border-radius: 0.375rem;
|
|
min-height: 1em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.calendar-event.before-view {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
.calendar-event.concurrent::after {
|
|
border: 1px solid var(--event-text-color);
|
|
border-left-width: 2px;
|
|
content: " ";
|
|
width: calc(100% - 2px);
|
|
height: calc(100% - 2px);
|
|
left: 0px;
|
|
top: 0px;
|
|
position: absolute;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.calendar-event.concurrent.level-1 {
|
|
margin-left: 20%;
|
|
width: 80%;
|
|
z-index: 1;
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-2 {
|
|
margin-left: 40%;
|
|
width: 60%;
|
|
z-index: 2;
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-3 {
|
|
margin-left: 60%;
|
|
width: 40%;
|
|
z-index: 3;
|
|
filter: brightness(1.15);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-4 {
|
|
margin-left: 70%;
|
|
width: 30%;
|
|
z-index: 4;
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-5 {
|
|
margin-left: 80%;
|
|
width: 20%;
|
|
z-index: 5;
|
|
filter: brightness(1.25);
|
|
}
|
|
|
|
.calendar-event.shorter-event {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.calendar-event .event-time {
|
|
font-size: 0.8em;
|
|
margin-left: 0.25em;
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.calendar-event .event-summary {
|
|
font-size: 0.9em;
|
|
margin-left: 0.25em;
|
|
font-weight: bold;
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.calendar-event.multi-day, .calendar-event.all-day {
|
|
flex-direction: row;
|
|
padding: 0.25rem 0;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.calendar-event.all-day {
|
|
color: var(--daily-event-text-color);
|
|
background-color: var(--daily-event-bg-color);
|
|
}
|
|
|
|
.calendar-event.multi-day {
|
|
color: var(--multi-day-event-text-color);
|
|
background-color: var(--multi-day-event-bg-color);
|
|
}
|
|
|
|
.calendar-event.multi-day.cropped-event-start {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: -0.125rem;
|
|
}
|
|
|
|
.calendar-event.multi-day.cropped-event-end {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// Template renderer options
|
|
// id: The id of the widget
|
|
// target: The target element to render
|
|
// items: The items to render
|
|
// properties: The properties for the widget
|
|
moment.locale(properties.lang || globalOptions.locale);
|
|
|
|
$(target).xiboLayoutScaler(properties);
|
|
|
|
// Add the calendar type to options
|
|
properties.calendarType = 2;
|
|
|
|
// Run calendar render
|
|
$(target).xiboCalendarRender(properties, items);
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="daily_dark" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/daily_dark.png" />
|
|
</assets>
|
|
</template>
|
|
<!-- End of Daily Calendar -->
|
|
|
|
<!-- Weekly Calendar -->
|
|
<template>
|
|
<id>weekly_light</id>
|
|
<type>static</type>
|
|
<dataType>event</dataType>
|
|
<title>Weekly Calendar - Light</title>
|
|
<thumbnail>weekly_light</thumbnail>
|
|
<startWidth>800</startWidth>
|
|
<startHeight>500</startHeight>
|
|
<properties>
|
|
<property type="message" variant="warning">
|
|
<title>This template uses features which will not work on devices with a browser older than Chrome 57, including webOS older than 6 and Tizen older than 5.</title>
|
|
</property>
|
|
<property id="startTime" type="date" variant="time">
|
|
<title>First hour slot</title>
|
|
<helpText>This view features a grid running from midnight to midnight. Use the first slot to shorten the time window shown.</helpText>
|
|
<default></default>
|
|
</property>
|
|
<property id="endTime" type="date" variant="time">
|
|
<title>Last hour slot</title>
|
|
<helpText>This view features a grid running from midnight to midnight. Use the last slot to shorten the time window shown.</helpText>
|
|
<default></default>
|
|
</property>
|
|
<property id="startAtCurrentTime" type="checkbox">
|
|
<title>Start at the current time?</title>
|
|
<helpText>Should the calendar start at the current time, or at the time of the first event?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="excludeWeekendDays" type="checkbox">
|
|
<title>Exclude weekend days?</title>
|
|
<helpText>Saturdays and Sundays wont be shown.</helpText>
|
|
<default></default>
|
|
</property>
|
|
<property id="timeFormat" type="text">
|
|
<title>Time Format</title>
|
|
<helpText>The format to apply to event time (default HH:mm).</helpText>
|
|
<default>HH:mm</default>
|
|
</property>
|
|
<property id="lang" type="languageSelector" variant="momentLocales">
|
|
<title>Language</title>
|
|
<helpText>Select the language you would like to use.</helpText>
|
|
</property>
|
|
<property id="showNowMarker" type="checkbox">
|
|
<title>Show now marker?</title>
|
|
<helpText>Should the calendar show a marker for the current time?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="textScale" type="number">
|
|
<title>Text scale</title>
|
|
<helpText>Set the scale for the text element on the calendar.</helpText>
|
|
<default>1.0</default>
|
|
</property>
|
|
<property id="weekdayNameLength" type="dropdown" mode="single">
|
|
<title>Week name length</title>
|
|
<helpText>Please select the length for the week names.</helpText>
|
|
<default>long</default>
|
|
<options>
|
|
<option name="short">Short</option>
|
|
<option name="medium">Medium</option>
|
|
<option name="long">Long</option>
|
|
</options>
|
|
</property>
|
|
<property id="gridStep" type="number">
|
|
<title>Grid step</title>
|
|
<helpText>Duration, in minutes, for each row in the grid.</helpText>
|
|
<default>60</default>
|
|
</property>
|
|
<property type="header" variant="main">
|
|
<title>Colours</title>
|
|
</property>
|
|
<property type="message">
|
|
<title>Use the colour pickers to override the element colours.</title>
|
|
</property>
|
|
<property id="gridColor" type="color">
|
|
<title>Grid Colour</title>
|
|
<default>#dadada</default>
|
|
</property>
|
|
<property id="gridTextColor" type="color">
|
|
<title>Grid Text Colour</title>
|
|
<default>#505050</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Header (Weekdays)</title>
|
|
</property>
|
|
<property id="weekDaysHeaderBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#f9f9f9</default>
|
|
</property>
|
|
<property id="weekDaysHeaderTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#3e4e63</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Calendar Days</title>
|
|
</property>
|
|
<property id="dayBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#f9f9f9</default>
|
|
</property>
|
|
<property id="dayTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#3e4e63</default>
|
|
</property>
|
|
<property id="todayTextColor" type="color">
|
|
<title>Current day text Colour</title>
|
|
<default>#e37918</default>
|
|
</property>
|
|
<property id="nowMarkerColor" type="color">
|
|
<title>Now marker Colour</title>
|
|
<default>#e37918</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Events</title>
|
|
</property>
|
|
<property id="eventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#506DC3</default>
|
|
</property>
|
|
<property id="eventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>All day events</title>
|
|
</property>
|
|
<property id="dailyEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#4D3394</default>
|
|
</property>
|
|
<property id="dailyEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Multiple days events</title>
|
|
</property>
|
|
<property id="multiDayEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#452E85</default>
|
|
</property>
|
|
<property id="multiDayEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Aditional days container</title>
|
|
</property>
|
|
<property id="aditionalEventsBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#efefef</default>
|
|
</property>
|
|
<property id="aditionalEventsTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#3e4e63</default>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<twig><![CDATA[
|
|
<div class="calendar-weekly calendar-container">
|
|
<ol class="hour-grid"></ol>
|
|
<ol class="day-of-week"></ol>
|
|
<ol class="days-row"></ol>
|
|
</div>
|
|
]]></twig>
|
|
<style><![CDATA[
|
|
:root {
|
|
--grid-color: #dadada;
|
|
--grid-text-color: #505050;
|
|
--today-text-color: #e37918;
|
|
--now-marker-color: #e37918;
|
|
--day-bg-color: #f9f9f9;
|
|
--day-text-color: #3e4e63;
|
|
--weekdays-bg-color: #f9f9f9;
|
|
--weekdays-text-color: #3e4e63;
|
|
--event-bg-color: #506DC3;
|
|
--event-text-color: #fff;
|
|
--daily-event-bg-color: #4D3394;
|
|
--daily-event-text-color: #fff;
|
|
--multi-day-event-bg-color: #452E85;
|
|
--multi-day-event-text-color: #fff;
|
|
--aditional-events-bg-color: #efefef;
|
|
--aditional-events-text-color: #3e4e63;
|
|
--all-day-events-container-height: 6rem;
|
|
font-size: 16px;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#content {
|
|
display: none;
|
|
}
|
|
|
|
ol, li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.calendar-weekly {
|
|
position: relative;
|
|
height: 100%;
|
|
background-color: var(--day-bg-color);
|
|
}
|
|
|
|
.now-marker {
|
|
position: absolute;
|
|
background-color: var(--now-marker-color);
|
|
height: 0.2rem;
|
|
margin-top: -0.1rem;
|
|
width: 100%;
|
|
z-index: 4;
|
|
}
|
|
|
|
.hour-grid {
|
|
position: absolute;
|
|
width: 100%;
|
|
margin-top: 5rem;
|
|
height: calc(100% - 5rem);
|
|
z-index: 1;
|
|
}
|
|
|
|
.hour-grid .hour-time {
|
|
line-height: 0.125rem;
|
|
margin-left: 0.5rem;
|
|
text-align: right;
|
|
width: 4rem;
|
|
color: var(--grid-text-color);
|
|
}
|
|
|
|
.hour-grid .hour-time:after {
|
|
border-top: 1px solid var(--grid-color);
|
|
content: "";
|
|
width: calc(100% - 12px - 4rem);
|
|
margin-left: 0.75rem;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
.day-of-week {
|
|
color: var(--weekdays-text-color);
|
|
background-color: var(--weekdays-bg-color);
|
|
font-size: 1.5rem;
|
|
padding-top: 0.25rem;
|
|
height: 4.75rem;
|
|
}
|
|
|
|
.day-of-week, .days-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
margin-left: 6rem;
|
|
}
|
|
|
|
.hide-weekend .days-row, .hide-weekend .day-of-week {
|
|
grid-template-columns: repeat(5, 1fr) 0 0;
|
|
}
|
|
|
|
.day-of-week>li {
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
|
|
.day-of-week .week-day-date {
|
|
font-size: 2.5rem;
|
|
line-height: 3rem;
|
|
}
|
|
|
|
.day-of-week>.week-day {
|
|
margin-top: 0.625rem;
|
|
}
|
|
|
|
.day-of-week--today .week-day-date {
|
|
font-weight: bold;
|
|
color: var(--today-text-color);
|
|
}
|
|
|
|
.days-row {
|
|
height: calc(100% - 5rem);
|
|
position: relative;
|
|
}
|
|
|
|
.calendar-day {
|
|
position: relative;
|
|
font-size: 1.2rem;
|
|
color: var(--day-text-color);
|
|
border: 1px solid var(--grid-color);
|
|
}
|
|
|
|
.calendar-day .calendar-events-container {
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.calendar-day .calendar-all-day-events-container {
|
|
display: none;
|
|
height: var(--all-day-events-container-height);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.calendar-weekly.show-all-day-events .calendar-day .calendar-events-container {
|
|
height: calc(100% - var(--all-day-events-container-height));
|
|
}
|
|
|
|
.calendar-weekly.show-all-day-events .calendar-day .calendar-all-day-events-container {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.calendar-weekly.show-all-day-events .hour-grid {
|
|
margin-top: calc(5rem + var(--all-day-events-container-height));
|
|
height: calc(100% - calc(5rem + var(--all-day-events-container-height)));
|
|
}
|
|
|
|
.calendar-all-day-events-container .extra-events {
|
|
bottom: 1px;
|
|
opacity: 0.85;
|
|
z-index: 2;
|
|
text-align: right;
|
|
position: absolute;
|
|
font-weight: bold;
|
|
background-color: var(--aditional-events-bg-color);
|
|
color: var(--aditional-events-text-color);
|
|
width: 100%;
|
|
font-size: 1.2rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
.calendar-all-day-events-container .extra-events span {
|
|
padding-right: 0.375rem;
|
|
}
|
|
|
|
.calendar-event {
|
|
width: 100%;
|
|
color: var(--event-text-color);
|
|
background-color: var(--event-bg-color);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
height: 1.25rem;
|
|
line-height: 1em;
|
|
z-index: 1;
|
|
border-radius: 0.375rem;
|
|
min-height: 1em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.calendar-event.before-view {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
.calendar-event.concurrent::after {
|
|
border: 1px solid var(--event-text-color);
|
|
border-left-width: 2px;
|
|
content: " ";
|
|
width: calc(100% - 2px);
|
|
height: calc(100% - 2px);
|
|
left: 0px;
|
|
top: 0px;
|
|
position: absolute;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.calendar-event.concurrent.level-1 {
|
|
margin-left: 10%;
|
|
width: 90%;
|
|
z-index: 1;
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-2 {
|
|
margin-left: 20%;
|
|
width: 80%;
|
|
z-index: 2;
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-3 {
|
|
margin-left: 30%;
|
|
width: 70%;
|
|
z-index: 3;
|
|
filter: brightness(1.15);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-4 {
|
|
margin-left: 40%;
|
|
width: 60%;
|
|
z-index: 4;
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-5 {
|
|
margin-left: 50%;
|
|
width: 50%;
|
|
z-index: 5;
|
|
filter: brightness(1.25);
|
|
}
|
|
|
|
.calendar-event.shorter-event {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.calendar-event .event-time {
|
|
font-size: 0.8em;
|
|
margin-left: 0.25em;
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.calendar-event .event-summary {
|
|
font-size: 0.9em;
|
|
margin-left: 0.25em;
|
|
font-weight: bold;
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.calendar-event.multi-day, .calendar-event.all-day {
|
|
flex-direction: row;
|
|
padding: 0.25rem 0;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.calendar-event.all-day {
|
|
color: var(--daily-event-text-color);
|
|
background-color: var(--daily-event-bg-color);
|
|
}
|
|
|
|
.calendar-event.multi-day {
|
|
color: var(--multi-day-event-text-color);
|
|
background-color: var(--multi-day-event-bg-color);
|
|
}
|
|
|
|
.calendar-event.multi-day.cropped-event-start {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: -0.125rem;
|
|
}
|
|
|
|
.calendar-event.multi-day.cropped-event-end {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// Template renderer options
|
|
// id: The id of the widget
|
|
// target: The target element to render
|
|
// items: The items to render
|
|
// properties: The properties for the widget
|
|
moment.locale(properties.lang || globalOptions.locale);
|
|
$(target).xiboLayoutScaler(properties);
|
|
|
|
// Add the calendar type to options
|
|
properties.calendarType = 3;
|
|
|
|
// Run calendar render
|
|
$(target).xiboCalendarRender(properties, items);
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="weekly_light" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/weekly_light.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>weekly_dark</id>
|
|
<type>static</type>
|
|
<dataType>event</dataType>
|
|
<title>Weekly Calendar - Dark</title>
|
|
<thumbnail>weekly_dark</thumbnail>
|
|
<startWidth>800</startWidth>
|
|
<startHeight>500</startHeight>
|
|
<properties>
|
|
<property type="message" variant="warning">
|
|
<title>This template uses features which will not work on devices with a browser older than Chrome 57, including webOS older than 6 and Tizen older than 5.</title>
|
|
</property>
|
|
<property id="startTime" type="date" variant="time">
|
|
<title>First hour slot</title>
|
|
<helpText>This view features a grid running from midnight to midnight. Use the first slot to shorten the time window shown.</helpText>
|
|
<default></default>
|
|
</property>
|
|
<property id="endTime" type="date" variant="time">
|
|
<title>Last hour slot</title>
|
|
<helpText>This view features a grid running from midnight to midnight. Use the last slot to shorten the time window shown.</helpText>
|
|
<default></default>
|
|
</property>
|
|
<property id="excludeWeekendDays" type="checkbox">
|
|
<title>Exclude weekend days?</title>
|
|
<helpText>Saturdays and Sundays wont be shown.</helpText>
|
|
<default></default>
|
|
</property>
|
|
<property id="timeFormat" type="text">
|
|
<title>Time Format</title>
|
|
<helpText>The format to apply to event time (default HH:mm).</helpText>
|
|
<default>HH:mm</default>
|
|
</property>
|
|
<property id="lang" type="languageSelector" variant="momentLocales">
|
|
<title>Language</title>
|
|
<helpText>Select the language you would like to use.</helpText>
|
|
</property>
|
|
<property id="startAtCurrentTime" type="checkbox">
|
|
<title>Start at the current time?</title>
|
|
<helpText>Should the calendar start at the current time, or at the time of the first event?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="showNowMarker" type="checkbox">
|
|
<title>Show now marker?</title>
|
|
<helpText>Should the calendar show a marker for the current time?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="textScale" type="number">
|
|
<title>Text scale</title>
|
|
<helpText>Set the scale for the text element on the calendar.</helpText>
|
|
<default>1.0</default>
|
|
</property>
|
|
<property id="weekdayNameLength" type="dropdown" mode="single">
|
|
<title>Week name length</title>
|
|
<helpText>Please select the length for the week names.</helpText>
|
|
<default>long</default>
|
|
<options>
|
|
<option name="short">Short</option>
|
|
<option name="medium">Medium</option>
|
|
<option name="long">Long</option>
|
|
</options>
|
|
</property>
|
|
<property id="gridStep" type="number">
|
|
<title>Grid step</title>
|
|
<helpText>Duration, in minutes, for each row in the grid.</helpText>
|
|
<default>60</default>
|
|
</property>
|
|
<property type="header" variant="main">
|
|
<title>Colours</title>
|
|
</property>
|
|
<property type="message">
|
|
<title>Use the colour pickers to override the element colours.</title>
|
|
</property>
|
|
<property id="gridColor" type="color">
|
|
<title>Grid Colour</title>
|
|
<default>#545454</default>
|
|
</property>
|
|
<property id="gridTextColor" type="color">
|
|
<title>Grid Text Colour</title>
|
|
<default>#bbbbbb</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Header (Weekdays)</title>
|
|
</property>
|
|
<property id="weekDaysHeaderBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#1e1e1e</default>
|
|
</property>
|
|
<property id="weekDaysHeaderTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#bbbbbb</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Calendar Days</title>
|
|
</property>
|
|
<property id="dayBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#303030</default>
|
|
</property>
|
|
<property id="dayTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#bbbbbb</default>
|
|
</property>
|
|
<property id="todayTextColor" type="color">
|
|
<title>Current day text Colour</title>
|
|
<default>#ef4050</default>
|
|
</property>
|
|
<property id="nowMarkerColor" type="color">
|
|
<title>Now marker Colour</title>
|
|
<default>#ef4050</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Events</title>
|
|
</property>
|
|
<property id="eventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#d7c9ff</default>
|
|
</property>
|
|
<property id="eventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#434343</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>All day events</title>
|
|
</property>
|
|
<property id="dailyEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#6639eb</default>
|
|
</property>
|
|
<property id="dailyEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#e9e9e9</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Multiple days events</title>
|
|
</property>
|
|
<property id="multiDayEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#6639eb</default>
|
|
</property>
|
|
<property id="multiDayEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#e9e9e9</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Aditional days container</title>
|
|
</property>
|
|
<property id="aditionalEventsBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#4b4b4b</default>
|
|
</property>
|
|
<property id="aditionalEventsTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#bbbbbb</default>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<twig><![CDATA[
|
|
<div class="calendar-weekly calendar-container">
|
|
<ol class="hour-grid"></ol>
|
|
<ol class="day-of-week"></ol>
|
|
<ol class="days-row"></ol>
|
|
</div>
|
|
]]></twig>
|
|
<style><![CDATA[
|
|
:root {
|
|
--grid-color: #545454;
|
|
--grid-text-color: #bbbbbb;
|
|
--today-text-color: #1e1e1e;
|
|
--now-marker-color: #bbbbbb;
|
|
--day-bg-color: #303030;
|
|
--day-text-color: #bbbbbb;
|
|
--weekdays-bg-color: #1e1e1e;
|
|
--weekdays-text-color: #bbbbbb;
|
|
--event-bg-color: #d7c9ff;
|
|
--event-text-color: #434343;
|
|
--daily-event-bg-color: #6639eb;
|
|
--daily-event-text-color: #e9e9e9;
|
|
--multi-day-event-bg-color: #6639eb;
|
|
--multi-day-event-text-color: #e9e9e9;
|
|
--aditional-events-bg-color: #4b4b4b;
|
|
--aditional-events-text-color: #bbbbbb;
|
|
--all-day-events-container-height: 6rem;
|
|
font-size: 16px;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#content {
|
|
display: none;
|
|
}
|
|
|
|
ol, li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.calendar-weekly {
|
|
position: relative;
|
|
height: 100%;
|
|
background-color: var(--day-bg-color);
|
|
}
|
|
|
|
.now-marker {
|
|
position: absolute;
|
|
background-color: var(--now-marker-color);
|
|
height: 0.2rem;
|
|
margin-top: -0.1rem;
|
|
width: 100%;
|
|
z-index: 4;
|
|
}
|
|
|
|
.hour-grid {
|
|
position: absolute;
|
|
width: 100%;
|
|
margin-top: 5rem;
|
|
height: calc(100% - 5rem);
|
|
z-index: 1;
|
|
}
|
|
|
|
.hour-grid .hour-time {
|
|
line-height: 0.125rem;
|
|
margin-left: 0.5rem;
|
|
text-align: right;
|
|
width: 4rem;
|
|
color: var(--grid-text-color);
|
|
}
|
|
|
|
.hour-grid .hour-time:after {
|
|
border-top: 1px solid var(--grid-color);
|
|
content: "";
|
|
width: calc(100% - 12px - 4rem);
|
|
margin-left: 0.75rem;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
.day-of-week {
|
|
color: var(--weekdays-text-color);
|
|
background-color: var(--weekdays-bg-color);
|
|
font-size: 1.5rem;
|
|
padding-top: 0.25rem;
|
|
height: 4.75rem;
|
|
}
|
|
|
|
.day-of-week, .days-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
margin-left: 6rem;
|
|
}
|
|
|
|
.hide-weekend .days-row, .hide-weekend .day-of-week {
|
|
grid-template-columns: repeat(5, 1fr) 0 0;
|
|
}
|
|
|
|
.day-of-week>li {
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
|
|
.day-of-week .week-day-date {
|
|
font-size: 2.5rem;
|
|
line-height: 3rem;
|
|
}
|
|
|
|
.day-of-week>.week-day {
|
|
margin-top: 0.625rem;
|
|
}
|
|
|
|
.day-of-week--today .week-day-date {
|
|
font-weight: bold;
|
|
color: var(--today-text-color);
|
|
}
|
|
|
|
.days-row {
|
|
height: calc(100% - 5rem);
|
|
position: relative;
|
|
}
|
|
|
|
.calendar-day {
|
|
position: relative;
|
|
font-size: 1.2rem;
|
|
color: var(--day-text-color);
|
|
border: 1px solid var(--grid-color);
|
|
}
|
|
|
|
.calendar-day .calendar-events-container {
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.calendar-day .calendar-all-day-events-container {
|
|
display: none;
|
|
height: var(--all-day-events-container-height);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.calendar-weekly.show-all-day-events .calendar-day .calendar-events-container {
|
|
height: calc(100% - var(--all-day-events-container-height));
|
|
}
|
|
|
|
.calendar-weekly.show-all-day-events .calendar-day .calendar-all-day-events-container {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.calendar-weekly.show-all-day-events .hour-grid {
|
|
margin-top: calc(5rem + var(--all-day-events-container-height));
|
|
height: calc(100% - calc(5rem + var(--all-day-events-container-height)));
|
|
}
|
|
|
|
.calendar-all-day-events-container .extra-events {
|
|
bottom: 1px;
|
|
opacity: 0.85;
|
|
z-index: 2;
|
|
text-align: right;
|
|
position: absolute;
|
|
font-weight: bold;
|
|
background-color: var(--aditional-events-bg-color);
|
|
color: var(--aditional-events-text-color);
|
|
width: 100%;
|
|
font-size: 1.2rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
.calendar-all-day-events-container .extra-events span {
|
|
padding-right: 0.375rem;
|
|
}
|
|
|
|
.calendar-event {
|
|
width: 100%;
|
|
color: var(--event-text-color);
|
|
background-color: var(--event-bg-color);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
height: 1.25rem;
|
|
line-height: 1em;
|
|
z-index: 1;
|
|
border-radius: 0.375rem;
|
|
min-height: 1em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.calendar-event.before-view {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
.calendar-event.concurrent::after {
|
|
border: 1px solid var(--event-text-color);
|
|
border-left-width: 2px;
|
|
content: " ";
|
|
width: calc(100% - 2px);
|
|
height: calc(100% - 2px);
|
|
left: 0px;
|
|
top: 0px;
|
|
position: absolute;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.calendar-event.concurrent.level-1 {
|
|
margin-left: 10%;
|
|
width: 90%;
|
|
z-index: 1;
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-2 {
|
|
margin-left: 20%;
|
|
width: 80%;
|
|
z-index: 2;
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-3 {
|
|
margin-left: 30%;
|
|
width: 70%;
|
|
z-index: 3;
|
|
filter: brightness(1.15);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-4 {
|
|
margin-left: 40%;
|
|
width: 60%;
|
|
z-index: 4;
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
.calendar-event.concurrent.level-5 {
|
|
margin-left: 50%;
|
|
width: 50%;
|
|
z-index: 5;
|
|
filter: brightness(1.25);
|
|
}
|
|
|
|
.calendar-event.shorter-event {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.calendar-event .event-time {
|
|
font-size: 0.8em;
|
|
margin-left: 0.25em;
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.calendar-event .event-summary {
|
|
font-size: 0.9em;
|
|
margin-left: 0.25em;
|
|
font-weight: bold;
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.calendar-event.multi-day, .calendar-event.all-day {
|
|
flex-direction: row;
|
|
padding: 0.25rem 0;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.calendar-event.all-day {
|
|
color: var(--daily-event-text-color);
|
|
background-color: var(--daily-event-bg-color);
|
|
}
|
|
|
|
.calendar-event.multi-day {
|
|
color: var(--multi-day-event-text-color);
|
|
background-color: var(--multi-day-event-bg-color);
|
|
}
|
|
|
|
.calendar-event.multi-day.cropped-event-start {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: -0.125rem;
|
|
}
|
|
|
|
.calendar-event.multi-day.cropped-event-end {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// Template renderer options
|
|
// id: The id of the widget
|
|
// target: The target element to render
|
|
// items: The items to render
|
|
// properties: The properties for the widget
|
|
moment.locale(properties.lang || globalOptions.locale);
|
|
|
|
$(target).xiboLayoutScaler(properties);
|
|
|
|
// Add the calendar type to options
|
|
properties.calendarType = 3;
|
|
|
|
// Run calendar render
|
|
$(target).xiboCalendarRender(properties, items);
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="weekly_dark" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/weekly_dark.png" />
|
|
</assets>
|
|
</template>
|
|
<!-- End of Weekly Calendar -->
|
|
|
|
<!-- Start of Monthly Calendar -->
|
|
<template>
|
|
<id>monthly_light</id>
|
|
<type>static</type>
|
|
<dataType>event</dataType>
|
|
<title>Monthly Calendar - Light</title>
|
|
<thumbnail>monthly_light</thumbnail>
|
|
<startWidth>800</startWidth>
|
|
<startHeight>500</startHeight>
|
|
<properties>
|
|
<property type="message" variant="warning">
|
|
<title>This template uses features which will not work on devices with a browser older than Chrome 57, including webOS older than 6 and Tizen older than 5.</title>
|
|
</property>
|
|
<property id="excludeWeekendDays" type="checkbox">
|
|
<title>Exclude weekend days?</title>
|
|
<helpText>Saturdays and Sundays wont be shown.</helpText>
|
|
<default></default>
|
|
</property>
|
|
<property id="timeFormat" type="text">
|
|
<title>Time Format</title>
|
|
<helpText>The format to apply to event time (default HH:mm).</helpText>
|
|
<default>HH:mm</default>
|
|
</property>
|
|
<property id="lang" type="languageSelector" variant="momentLocales">
|
|
<title>Language</title>
|
|
<helpText>Select the language you would like to use.</helpText>
|
|
</property>
|
|
<property id="startAtCurrentTime" type="checkbox">
|
|
<title>Start at the current time?</title>
|
|
<helpText>Should the calendar start at the current time, or at the time of the first event?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="showHeader" type="checkbox">
|
|
<title>Show header?</title>
|
|
<helpText>Should the selected template have a header?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="textScale" type="number">
|
|
<title>Text scale</title>
|
|
<helpText>Set the scale for the text element on the calendar.</helpText>
|
|
<default>1.0</default>
|
|
</property>
|
|
<property id="weekdayNameLength" type="dropdown" mode="single">
|
|
<title>Week name length</title>
|
|
<helpText>Please select the length for the week names.</helpText>
|
|
<default>long</default>
|
|
<options>
|
|
<option name="short">Short</option>
|
|
<option name="medium">Medium</option>
|
|
<option name="long">Long</option>
|
|
</options>
|
|
</property>
|
|
<property type="header" variant="main">
|
|
<title>Colours</title>
|
|
</property>
|
|
<property type="message">
|
|
<title>Use the colour pickers to override the element colours.</title>
|
|
</property>
|
|
<property id="gridColor" type="color">
|
|
<title>Grid Colour</title>
|
|
<default>#dadada</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Header (Month)</title>
|
|
</property>
|
|
<property id="headerBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#f9f9f9</default>
|
|
</property>
|
|
<property id="headerTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#3e4e63</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Header (Weekdays)</title>
|
|
</property>
|
|
<property id="weekDaysHeaderBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#f9f9f9</default>
|
|
</property>
|
|
<property id="weekDaysHeaderTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#3e4e63</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Calendar Days</title>
|
|
</property>
|
|
<property id="dayBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#f9f9f9</default>
|
|
</property>
|
|
<property id="dayTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#3e4e63</default>
|
|
</property>
|
|
<property id="todayTextColor" type="color">
|
|
<title>Current day text Colour</title>
|
|
<default>#fb8100</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Other Month Days</title>
|
|
</property>
|
|
<property id="dayOtherMonthBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#efefef</default>
|
|
</property>
|
|
<property id="dayOtherMonthTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#3e4e63</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Events</title>
|
|
</property>
|
|
<property id="eventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>transparent</default>
|
|
</property>
|
|
<property id="eventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#3e4e63</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>All day events</title>
|
|
</property>
|
|
<property id="dailyEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#4174B5</default>
|
|
</property>
|
|
<property id="dailyEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Multiple days events</title>
|
|
</property>
|
|
<property id="multiDayEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#4174B5</default>
|
|
</property>
|
|
<property id="multiDayEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Aditional days container</title>
|
|
</property>
|
|
<property id="aditionalEventsBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#efefef</default>
|
|
</property>
|
|
<property id="aditionalEventsTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#3e4e63</default>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<twig><![CDATA[
|
|
<div class="calendar-month">
|
|
<section class="calendar-month-header">
|
|
<div id="selectedMonth" class="calendar-month-header-selected-month"></div>
|
|
</section>
|
|
<ol id="daysOfWeek" class="day-of-week"></ol>
|
|
<ol id="calendarDays" class="days-grid"></ol>
|
|
</div>
|
|
]]></twig>
|
|
<style><![CDATA[
|
|
:root {
|
|
--grid-color: #dadada;
|
|
--today-text-color: #fb8100;
|
|
--day-bg-color: #f9f9f9;
|
|
--day-text-color: #3e4e63;
|
|
--day-other-month-bg-color: #efefef;
|
|
--day-other-month-text-color: #3e4e63;
|
|
--header-bg-color: #f9f9f9;
|
|
--header-text-color: #3e4e63;
|
|
--weekdays-bg-color: #f9f9f9;
|
|
--weekdays-text-color: #3e4e63;
|
|
--event-bg-color: transparent;
|
|
--event-text-color: #3e4e63;
|
|
--daily-event-bg-color: #4174B5;
|
|
--daily-event-text-color: #fff;
|
|
--multi-day-event-bg-color: #4174B5;
|
|
--multi-day-event-text-color: #fff;
|
|
--aditional-events-bg-color: #efefef;
|
|
--aditional-events-text-color: #3e4e63;
|
|
font-size: 16px;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#content {
|
|
display: none;
|
|
}
|
|
|
|
ol,
|
|
li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.calendar-month {
|
|
position: relative;
|
|
height: 100%;
|
|
background-color: var(--day-bg-color);
|
|
}
|
|
|
|
.calendar-month-header {
|
|
justify-content: space-between;
|
|
line-height: 3rem;
|
|
}
|
|
|
|
.hide-header .calendar-month-header {
|
|
display: none;
|
|
}
|
|
|
|
.calendar-month-header-selected-month {
|
|
font-size: 1.8rem;
|
|
padding-left: 0.5rem;
|
|
color: var(--header-text-color);
|
|
background-color: var(--header-bg-color);
|
|
}
|
|
|
|
.day-of-week {
|
|
color: var(--weekdays-text-color);
|
|
background-color: var(--weekdays-bg-color);
|
|
font-size: 1.5rem;
|
|
padding-bottom: 0.25rem;
|
|
padding-top: 0.75rem;
|
|
height: 1.75rem;
|
|
}
|
|
|
|
.day-of-week,
|
|
.days-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
|
|
.day-of-week>* {
|
|
text-align: left;
|
|
overflow: hidden;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.days-grid {
|
|
height: calc(100% - 5.75rem);
|
|
position: relative;
|
|
grid-template-rows: repeat(5, calc(100% / 5));
|
|
grid-template-columns: repeat(7, calc(100% / 7));
|
|
}
|
|
|
|
.hide-weekend .days-grid, .hide-weekend .day-of-week {
|
|
grid-template-columns: repeat(5, 1fr) 0 0;
|
|
}
|
|
|
|
.hide-header .days-grid {
|
|
height: calc(100% - 2.75rem);
|
|
}
|
|
|
|
.calendar-day {
|
|
position: relative;
|
|
min-height: 20%;
|
|
font-size: 1.2rem;
|
|
color: var(--day-text-color);
|
|
background-color: var(--day-bg-color);
|
|
border: 1px solid var(--grid-color);
|
|
}
|
|
|
|
.calendar-day>span.date {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 0.25rem;
|
|
top: 0.375rem;
|
|
}
|
|
|
|
.calendar-day--not-current {
|
|
background-color: var(--day-other-month-bg-color);
|
|
color: var(--day-other-month-text-color);
|
|
}
|
|
|
|
.calendar-day--today>span.date {
|
|
font-size: 1.4rem;
|
|
font-weight: bold;
|
|
color: var(--today-text-color);
|
|
}
|
|
|
|
.calendar-events-container {
|
|
height: calc(100% - 2rem);
|
|
margin-top: 2rem;
|
|
font-size: 1.2rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.calendar-events-container .extra-events {
|
|
bottom: 1px;
|
|
opacity: 0.85;
|
|
z-index: 2;
|
|
text-align: right;
|
|
position: absolute;
|
|
font-weight: bold;
|
|
background-color: var(--aditional-events-bg-color);
|
|
color: var(--aditional-events-text-color);
|
|
width: 100%;
|
|
font-size: 1.2rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
.calendar-events-container .extra-events span {
|
|
padding-right: 0.375rem;
|
|
}
|
|
|
|
.calendar-event {
|
|
width: 100%;
|
|
color: var(--event-text-color);
|
|
background-color: var(--event-bg-color);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
padding: 0.25rem 0;
|
|
height: 1.25rem;
|
|
line-height: 1em;
|
|
top: 2rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.calendar-event .event-time {
|
|
font-size: 1.1rem;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.calendar-event .event-summary {
|
|
font-size: 1.1rem;
|
|
margin-left: 0.25rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.calendar-event.multi-day, .calendar-event.all-day {
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.calendar-event.all-day {
|
|
color: var(--daily-event-text-color);
|
|
background-color: var(--daily-event-bg-color);
|
|
}
|
|
|
|
.calendar-event.multi-day {
|
|
color: var(--multi-day-event-text-color);
|
|
background-color: var(--multi-day-event-bg-color);
|
|
}
|
|
|
|
.calendar-event.multi-day.cropped-event-start {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: -0.125rem;
|
|
}
|
|
|
|
.calendar-event.multi-day.cropped-event-end {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.calendar-day--not-current .calendar-event {
|
|
opacity: 0.8;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// Template renderer options
|
|
// id: The id of the widget
|
|
// target: The target element to render
|
|
// items: The items to render
|
|
// properties: The properties for the widget
|
|
moment.locale(properties.lang || globalOptions.locale);
|
|
|
|
$(target).xiboLayoutScaler(properties);
|
|
|
|
// Add the calendar type to options
|
|
properties.calendarType = 4;
|
|
|
|
// Run calendar render
|
|
$(target).xiboCalendarRender(properties, items);
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="monthly_light" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/monthly_light.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>monthly_dark</id>
|
|
<type>static</type>
|
|
<dataType>event</dataType>
|
|
<title>Monthly Calendar - Dark</title>
|
|
<thumbnail>monthly_dark</thumbnail>
|
|
<startWidth>800</startWidth>
|
|
<startHeight>500</startHeight>
|
|
<properties>
|
|
<property type="message" variant="warning">
|
|
<title>This template uses features which will not work on devices with a browser older than Chrome 57, including webOS older than 6 and Tizen older than 5.</title>
|
|
</property>
|
|
<property id="excludeWeekendDays" type="checkbox">
|
|
<title>Exclude weekend days?</title>
|
|
<helpText>Saturdays and Sundays wont be shown.</helpText>
|
|
<default></default>
|
|
</property>
|
|
<property id="timeFormat" type="text">
|
|
<title>Time Format</title>
|
|
<helpText>The format to apply to event time (default HH:mm).</helpText>
|
|
<default>HH:mm</default>
|
|
</property>
|
|
<property id="lang" type="languageSelector" variant="momentLocales">
|
|
<title>Language</title>
|
|
<helpText>Select the language you would like to use.</helpText>
|
|
</property>
|
|
<property id="startAtCurrentTime" type="checkbox">
|
|
<title>Start at the current time?</title>
|
|
<helpText>Should the calendar start at the current time, or at the time of the first event?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="showHeader" type="checkbox">
|
|
<title>Show header?</title>
|
|
<helpText>Should the selected template have a header?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="textScale" type="number">
|
|
<title>Text scale</title>
|
|
<helpText>Set the scale for the text element on the calendar.</helpText>
|
|
<default>1.0</default>
|
|
</property>
|
|
<property id="weekdayNameLength" type="dropdown" mode="single">
|
|
<title>Week name length</title>
|
|
<helpText>Please select the length for the week names.</helpText>
|
|
<default>long</default>
|
|
<options>
|
|
<option name="short">Short</option>
|
|
<option name="medium">Medium</option>
|
|
<option name="long">Long</option>
|
|
</options>
|
|
</property>
|
|
<property type="header" variant="main">
|
|
<title>Colours</title>
|
|
</property>
|
|
<property type="message">
|
|
<title>Use the colour pickers to override the element colours.</title>
|
|
</property>
|
|
<property id="gridColor" type="color">
|
|
<title>Grid Colour</title>
|
|
<default>#dddddd</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Header (Month)</title>
|
|
</property>
|
|
<property id="headerBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#404040</default>
|
|
</property>
|
|
<property id="headerTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#ebebeb</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Header (Weekdays)</title>
|
|
</property>
|
|
<property id="weekDaysHeaderBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#606060</default>
|
|
</property>
|
|
<property id="weekDaysHeaderTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#ebebeb</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Calendar Days</title>
|
|
</property>
|
|
<property id="dayBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#303030</default>
|
|
</property>
|
|
<property id="dayTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#ebebeb</default>
|
|
</property>
|
|
<property id="todayTextColor" type="color">
|
|
<title>Current day text Colour</title>
|
|
<default>#ff9922</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Other Month Days</title>
|
|
</property>
|
|
<property id="dayOtherMonthBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#404040</default>
|
|
</property>
|
|
<property id="dayOtherMonthTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#afafaf</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Events</title>
|
|
</property>
|
|
<property id="eventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>transparent</default>
|
|
</property>
|
|
<property id="eventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#edf5ff</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>All day events</title>
|
|
</property>
|
|
<property id="dailyEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#bcfbff</default>
|
|
</property>
|
|
<property id="dailyEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#454545</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Multiple days events</title>
|
|
</property>
|
|
<property id="multiDayEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#bcfbff</default>
|
|
</property>
|
|
<property id="multiDayEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#454545</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Aditional days container</title>
|
|
</property>
|
|
<property id="aditionalEventsBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#616161</default>
|
|
</property>
|
|
<property id="aditionalEventsTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#eaeaea</default>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<twig><![CDATA[
|
|
<div class="calendar-month">
|
|
<section class="calendar-month-header">
|
|
<div id="selectedMonth" class="calendar-month-header-selected-month"></div>
|
|
</section>
|
|
<ol id="daysOfWeek" class="day-of-week"></ol>
|
|
<ol id="calendarDays" class="days-grid"></ol>
|
|
</div>
|
|
]]></twig>
|
|
<style><![CDATA[
|
|
:root {
|
|
--grid-color: #dddddd;
|
|
--today-text-color: #ff9922;
|
|
--day-bg-color: #303030;
|
|
--day-text-color: #ebebeb;
|
|
--day-other-month-bg-color: #404040;
|
|
--day-other-month-text-color: #afafaf;
|
|
--header-bg-color: #404040;
|
|
--header-text-color: #ebebeb;
|
|
--weekdays-bg-color: #606060;
|
|
--weekdays-text-color: #ebebeb;
|
|
--event-bg-color: transparent;
|
|
--event-text-color: #edf5ff;
|
|
--daily-event-bg-color: #bcfbff;
|
|
--daily-event-text-color: #454545;
|
|
--multi-day-event-bg-color: #bcfbff;
|
|
--multi-day-event-text-color: #454545;
|
|
--aditional-events-bg-color: #616161;
|
|
--aditional-events-text-color: #eaeaea;
|
|
font-size: 16px;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#content {
|
|
display: none;
|
|
}
|
|
|
|
ol,
|
|
li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.calendar-month {
|
|
position: relative;
|
|
height: 100%;
|
|
background-color: var(--day-bg-color);
|
|
}
|
|
|
|
.calendar-month-header {
|
|
justify-content: space-between;
|
|
line-height: 3rem;
|
|
}
|
|
|
|
.hide-header .calendar-month-header {
|
|
display: none;
|
|
}
|
|
|
|
.calendar-month-header-selected-month {
|
|
font-size: 1.8rem;
|
|
padding-left: 0.5rem;
|
|
color: var(--header-text-color);
|
|
background-color: var(--header-bg-color);
|
|
}
|
|
|
|
.day-of-week {
|
|
color: var(--weekdays-text-color);
|
|
background-color: var(--weekdays-bg-color);
|
|
font-size: 1.5rem;
|
|
padding-bottom: 0.25rem;
|
|
padding-top: 0.75rem;
|
|
height: 1.75rem;
|
|
}
|
|
|
|
.day-of-week,
|
|
.days-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
|
|
.day-of-week>* {
|
|
text-align: left;
|
|
overflow: hidden;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.days-grid {
|
|
height: calc(100% - 5.75rem);
|
|
position: relative;
|
|
grid-template-rows: repeat(5, calc(100% / 5));
|
|
grid-template-columns: repeat(7, calc(100% / 7));
|
|
}
|
|
|
|
.hide-weekend .days-grid, .hide-weekend .day-of-week {
|
|
grid-template-columns: repeat(5, 1fr) 0 0;
|
|
}
|
|
|
|
.hide-header .days-grid {
|
|
height: calc(100% - 2.75rem);
|
|
}
|
|
|
|
.calendar-day {
|
|
position: relative;
|
|
min-height: 20%;
|
|
font-size: 1.2rem;
|
|
color: var(--day-text-color);
|
|
background-color: var(--day-bg-color);
|
|
border: 1px solid var(--grid-color);
|
|
}
|
|
|
|
.calendar-day>span.date {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 0.25rem;
|
|
top: 0.375rem;
|
|
}
|
|
|
|
.calendar-day--not-current {
|
|
background-color: var(--day-other-month-bg-color);
|
|
color: var(--day-other-month-text-color);
|
|
}
|
|
|
|
.calendar-day--today>span.date {
|
|
font-size: 1.4rem;
|
|
font-weight: bold;
|
|
color: var(--today-text-color);
|
|
}
|
|
|
|
.calendar-events-container {
|
|
height: calc(100% - 2rem);
|
|
margin-top: 2rem;
|
|
font-size: 1.2rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.calendar-events-container .extra-events {
|
|
bottom: 1px;
|
|
opacity: 0.85;
|
|
z-index: 2;
|
|
text-align: right;
|
|
position: absolute;
|
|
font-weight: bold;
|
|
background-color: var(--aditional-events-bg-color);
|
|
color: var(--aditional-events-text-color);
|
|
width: 100%;
|
|
font-size: 1.2rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
.calendar-events-container .extra-events span {
|
|
padding-right: 0.375rem;
|
|
}
|
|
|
|
.calendar-event {
|
|
width: 100%;
|
|
color: var(--event-text-color);
|
|
background-color: var(--event-bg-color);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
padding: 0.25rem 0;
|
|
height: 1.25rem;
|
|
line-height: 1em;
|
|
top: 2rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.calendar-event .event-time {
|
|
font-size: 1.1rem;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.calendar-event .event-summary {
|
|
font-size: 1.1rem;
|
|
margin-left: 0.25rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.calendar-event.multi-day, .calendar-event.all-day {
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.calendar-event.all-day {
|
|
color: var(--daily-event-text-color);
|
|
background-color: var(--daily-event-bg-color);
|
|
}
|
|
|
|
.calendar-event.multi-day {
|
|
color: var(--multi-day-event-text-color);
|
|
background-color: var(--multi-day-event-bg-color);
|
|
}
|
|
|
|
.calendar-event.multi-day.cropped-event-start {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: -0.125rem;
|
|
}
|
|
|
|
.calendar-event.multi-day.cropped-event-end {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.calendar-day--not-current .calendar-event {
|
|
opacity: 0.8;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// Template renderer options
|
|
// id: The id of the widget
|
|
// target: The target element to render
|
|
// items: The items to render
|
|
// properties: The properties for the widget
|
|
moment.locale(properties.lang || globalOptions.locale);
|
|
|
|
$(target).xiboLayoutScaler(properties);
|
|
|
|
// Add the calendar type to options
|
|
properties.calendarType = 4;
|
|
|
|
// Run calendar render
|
|
$(target).xiboCalendarRender(properties, items);
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="monthly_dark" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/monthly_dark.png" />
|
|
</assets>
|
|
</template>
|
|
<!-- End of Monthly Calendar -->
|
|
|
|
<!-- Schedule View -->
|
|
<template>
|
|
<id>schedule_light</id>
|
|
<type>static</type>
|
|
<dataType>event</dataType>
|
|
<title>Schedule Calendar - Light</title>
|
|
<thumbnail>schedule_light</thumbnail>
|
|
<startWidth>400</startWidth>
|
|
<startHeight>800</startHeight>
|
|
<properties>
|
|
<property type="message" variant="warning">
|
|
<title>This template uses features which will not work on devices with a browser older than Chrome 57, including webOS older than 6 and Tizen older than 5.</title>
|
|
</property>
|
|
<property id="noEventsMessage" type="text">
|
|
<title>No events message</title>
|
|
<helpText>Message to be shown if no events are returned.</helpText>
|
|
<default>No upcoming events</default>
|
|
</property>
|
|
<property id="timeFormat" type="text">
|
|
<title>Time Format</title>
|
|
<helpText>The format to apply to event time (default HH:mm).</helpText>
|
|
<default>HH:mm</default>
|
|
</property>
|
|
<property id="lang" type="languageSelector" variant="momentLocales">
|
|
<title>Language</title>
|
|
<helpText>Select the language you would like to use.</helpText>
|
|
</property>
|
|
<property id="showNowMarker" type="checkbox">
|
|
<title>Show now marker?</title>
|
|
<helpText>Should the calendar show a marker for the current time?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="showDescription" type="checkbox">
|
|
<title>Show event description?</title>
|
|
<helpText>Should events with descriptions display them?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="textScale" type="number">
|
|
<title>Text scale</title>
|
|
<helpText>Set the scale for the text element on the calendar.</helpText>
|
|
<default>1.0</default>
|
|
</property>
|
|
<property type="header" variant="main">
|
|
<title>Colours</title>
|
|
</property>
|
|
<property type="message">
|
|
<title>Use the colour pickers to override the element colours.</title>
|
|
</property>
|
|
<property id="gridColor" type="color">
|
|
<title>Grid Colour</title>
|
|
<default>#6e6e6e</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Header (Weekdays)</title>
|
|
</property>
|
|
<property id="weekDaysHeaderBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#ffffff</default>
|
|
</property>
|
|
<property id="weekDaysHeaderTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#3e3e3e</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Calendar Days</title>
|
|
</property>
|
|
<property id="dayBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#f9f9f9</default>
|
|
</property>
|
|
<property id="todayTextColor" type="color">
|
|
<title>Current day text Colour</title>
|
|
<default>#f53030</default>
|
|
</property>
|
|
<property id="nowMarkerColor" type="color">
|
|
<title>Now marker Colour</title>
|
|
<default>#f53030</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Events</title>
|
|
</property>
|
|
<property id="eventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#e2ddff</default>
|
|
</property>
|
|
<property id="eventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#353535</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>All day events</title>
|
|
</property>
|
|
<property id="dailyEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#8174d4</default>
|
|
</property>
|
|
<property id="dailyEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#ffffff</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Multiple days events</title>
|
|
</property>
|
|
<property id="multiDayEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#695ac6</default>
|
|
</property>
|
|
<property id="multiDayEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#ffffff</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>No events message</title>
|
|
</property>
|
|
<property id="noEventsBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#695ac6</default>
|
|
</property>
|
|
<property id="noEventsTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#ffffff</default>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<twig><![CDATA[
|
|
<div class="calendar-schedule calendar-container"></div>
|
|
]]></twig>
|
|
<style><![CDATA[
|
|
:root {
|
|
--grid-color: #6e6e6e;
|
|
--weekdays-bg-color: #ffffff;
|
|
--weekdays-text-color: #3e3e3e;
|
|
--day-bg-color: #f9f9f9;
|
|
--today-text-color: #f53030;
|
|
--now-marker-color: #f53030;
|
|
--event-bg-color: #e2ddff;
|
|
--event-text-color: #353535;
|
|
--daily-event-bg-color: #8174d4;
|
|
--daily-event-text-color: #ffffff;
|
|
--multi-day-event-bg-color: #695ac6;
|
|
--multi-day-event-text-color: #ffffff;
|
|
--no-events-bg-color: #695ac6;
|
|
--no-events-text-color: #ffffff;
|
|
font-size: 16px;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#content {
|
|
display: none;
|
|
}
|
|
|
|
ol, li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.calendar-schedule {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
.day-container {
|
|
display: flex;
|
|
background-color: var(--day-bg-color);
|
|
border-bottom: 1px solid var(--grid-color);
|
|
}
|
|
|
|
.title-container {
|
|
width: 8rem;
|
|
padding: 0.25rem;
|
|
margin: 0.25rem;
|
|
color: var(--weekdays-text-color);
|
|
background-color: var(--weekdays-bg-color);
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.day-title-date, .day-title-month {
|
|
display: inline-block;
|
|
}
|
|
|
|
.day-title-date {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
.day-container.today .day-title-date {
|
|
color: var(--today-text-color);
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.day-title-weekday {
|
|
font-size: 0.8rem;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.day-events {
|
|
width: calc(100% - 9rem);
|
|
padding: 0 0.25rem 0.25rem 0;
|
|
}
|
|
|
|
.calendar-event {
|
|
color: var(--event-text-color);
|
|
background-color: var(--event-bg-color);
|
|
padding: 0.25rem;
|
|
min-height: 1.75rem;
|
|
top: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
border-radius: 0.25rem;
|
|
margin: 0.3rem 0;
|
|
}
|
|
|
|
.calendar-event.all-day {
|
|
color: var(--daily-event-text-color);
|
|
background-color: var(--daily-event-bg-color);
|
|
}
|
|
|
|
.calendar-event.multi {
|
|
color: var(--multi-day-event-text-color);
|
|
background-color: var(--multi-day-event-bg-color);
|
|
}
|
|
|
|
.event-description {
|
|
font-size: 0.9em;
|
|
opacity: 0.8;
|
|
margin-top: 0.2rem;
|
|
flex-basis: 100%;
|
|
width: 0;
|
|
margin-left: 0.6rem;
|
|
}
|
|
|
|
.event-summary {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-left: 0.3rem;
|
|
}
|
|
|
|
.event-start-time, .event-end-time {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.now-marker {
|
|
background-color: var(--now-marker-color);
|
|
height: 0.2rem;
|
|
width: calc(100% + 1rem);
|
|
margin: 0.4rem 0 0.4rem -1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.now-marker::before {
|
|
content: '';
|
|
width: 1rem;
|
|
height: 1rem;
|
|
background-color: var(--now-marker-color);
|
|
top: -0.4rem;
|
|
left: -0.5rem;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.no-events-message {
|
|
width: 100%;
|
|
padding: 2rem 0;
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
background-color: var(--no-events-bg-color);
|
|
color: var(--no-events-text-color);
|
|
border-bottom: 0.5rem solid var(--no-events-text-color);
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// Template renderer options
|
|
// id: The id of the widget
|
|
// target: The target element to render
|
|
// items: The items to render
|
|
// properties: The properties for the widget
|
|
moment.locale(properties.lang || globalOptions.locale);
|
|
|
|
$(target).xiboLayoutScaler(properties);
|
|
|
|
// Add the calendar type to options
|
|
properties.calendarType = 1;
|
|
|
|
// Run calendar render
|
|
$(target).xiboCalendarRender(properties, items);
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="schedule_light" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/schedule_light.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>schedule_dark</id>
|
|
<type>static</type>
|
|
<dataType>event</dataType>
|
|
<title>Schedule Calendar - Dark</title>
|
|
<thumbnail>schedule_dark</thumbnail>
|
|
<startWidth>400</startWidth>
|
|
<startHeight>800</startHeight>
|
|
<properties>
|
|
<property type="message" variant="warning">
|
|
<title>This template uses features which will not work on devices with a browser older than Chrome 57, including webOS older than 6 and Tizen older than 5.</title>
|
|
</property>
|
|
<property id="noEventsMessage" type="text">
|
|
<title>No events message</title>
|
|
<helpText>Message to be shown if no events are returned.</helpText>
|
|
<default>"No upcoming events"</default>
|
|
</property>
|
|
<property id="timeFormat" type="text">
|
|
<title>Time Format</title>
|
|
<helpText>The format to apply to event time (default HH:mm).</helpText>
|
|
<default>HH:mm</default>
|
|
</property>
|
|
<property id="lang" type="languageSelector" variant="momentLocales">
|
|
<title>Language</title>
|
|
<helpText>Select the language you would like to use.</helpText>
|
|
</property>
|
|
<property id="showNowMarker" type="checkbox">
|
|
<title>Show now marker?</title>
|
|
<helpText>Should the calendar show a marker for the current time?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="showDescription" type="checkbox">
|
|
<title>Show event description?</title>
|
|
<helpText>Should events with descriptions display them?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="textScale" type="number">
|
|
<title>Text scale</title>
|
|
<helpText>Set the scale for the text element on the calendar.</helpText>
|
|
<default>1.0</default>
|
|
</property>
|
|
<property type="header" variant="main">
|
|
<title>Colours</title>
|
|
</property>
|
|
<property type="message">
|
|
<title>Use the colour pickers to override the element colours.</title>
|
|
</property>
|
|
<property id="gridColor" type="color">
|
|
<title>Grid Colour</title>
|
|
<default>#1b1b1b</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Header (Weekdays)</title>
|
|
</property>
|
|
<property id="weekDaysHeaderBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#606060</default>
|
|
</property>
|
|
<property id="weekDaysHeaderTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#f0f0f0</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Calendar Days</title>
|
|
</property>
|
|
<property id="dayBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#535353</default>
|
|
</property>
|
|
<property id="todayTextColor" type="color">
|
|
<title>Current day text Colour</title>
|
|
<default>#afb1ff</default>
|
|
</property>
|
|
<property id="nowMarkerColor" type="color">
|
|
<title>Now marker Colour</title>
|
|
<default>#ff2525</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Events</title>
|
|
</property>
|
|
<property id="eventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#9264A6</default>
|
|
</property>
|
|
<property id="eventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>All day events</title>
|
|
</property>
|
|
<property id="dailyEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#70497E</default>
|
|
</property>
|
|
<property id="dailyEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>Multiple days events</title>
|
|
</property>
|
|
<property id="multiDayEventBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#603D6B</default>
|
|
</property>
|
|
<property id="multiDayEventTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property type="header">
|
|
<title>No events message</title>
|
|
</property>
|
|
<property id="noEventsBgColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#695ac6</default>
|
|
</property>
|
|
<property id="noEventsTextColor" type="color">
|
|
<title>Text Colour</title>
|
|
<default>#ffffff</default>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<twig><![CDATA[
|
|
<div class="calendar-schedule calendar-container"></div>
|
|
]]></twig>
|
|
<style><![CDATA[
|
|
:root {
|
|
--grid-color: #1b1b1b;
|
|
--weekdays-bg-color: #606060;
|
|
--weekdays-text-color: #f0f0f0;
|
|
--day-bg-color: #535353;
|
|
--today-text-color: #afb1ff;
|
|
--now-marker-color: #f53030;
|
|
--event-bg-color: #e2ddff;
|
|
--event-text-color: #353535;
|
|
--daily-event-bg-color: #8174d4;
|
|
--daily-event-text-color: #ffffff;
|
|
--multi-day-event-bg-color: #695ac6;
|
|
--multi-day-event-text-color: #ffffff;
|
|
--no-events-bg-color: #695ac6;
|
|
--no-events-text-color: #ffffff;
|
|
font-size: 16px;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#content {
|
|
display: none;
|
|
}
|
|
|
|
ol, li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.calendar-schedule {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
.day-container {
|
|
display: flex;
|
|
background-color: var(--day-bg-color);
|
|
border-bottom: 1px solid var(--grid-color);
|
|
}
|
|
|
|
.title-container {
|
|
width: 8rem;
|
|
padding: 0.25rem;
|
|
margin: 0.25rem;
|
|
color: var(--weekdays-text-color);
|
|
background-color: var(--weekdays-bg-color);
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.day-title-date, .day-title-month {
|
|
display: inline-block;
|
|
}
|
|
|
|
.day-title-date {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
.day-container.today .day-title-date {
|
|
color: var(--today-text-color);
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.day-title-weekday {
|
|
font-size: 0.8rem;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.day-events {
|
|
width: calc(100% - 9rem);
|
|
padding: 0 0.25rem 0.25rem 0;
|
|
}
|
|
|
|
.calendar-event {
|
|
color: var(--event-text-color);
|
|
background-color: var(--event-bg-color);
|
|
padding: 0.25rem;
|
|
min-height: 1.75rem;
|
|
top: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
border-radius: 0.25rem;
|
|
margin: 0.3rem 0;
|
|
}
|
|
|
|
.calendar-event.all-day {
|
|
color: var(--daily-event-text-color);
|
|
background-color: var(--daily-event-bg-color);
|
|
}
|
|
|
|
.calendar-event.multi {
|
|
color: var(--multi-day-event-text-color);
|
|
background-color: var(--multi-day-event-bg-color);
|
|
}
|
|
|
|
.event-description {
|
|
font-size: 0.9em;
|
|
opacity: 0.8;
|
|
margin-top: 0.2rem;
|
|
flex-basis: 100%;
|
|
width: 0;
|
|
margin-left: 0.6rem;
|
|
}
|
|
|
|
.event-summary {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-left: 0.3rem;
|
|
}
|
|
|
|
.event-start-time, .event-end-time {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.now-marker {
|
|
background-color: var(--now-marker-color);
|
|
height: 0.2rem;
|
|
width: calc(100% + 1rem);
|
|
margin: 0.4rem 0 0.4rem -1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.now-marker::before {
|
|
content: '';
|
|
width: 1rem;
|
|
height: 1rem;
|
|
background-color: var(--now-marker-color);
|
|
top: -0.4rem;
|
|
left: -0.5rem;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.no-events-message {
|
|
width: 100%;
|
|
padding: 2rem 0;
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
background-color: var(--no-events-bg-color);
|
|
color: var(--no-events-text-color);
|
|
border-bottom: 0.5rem solid var(--no-events-text-color);
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// Template renderer options
|
|
// id: The id of the widget
|
|
// target: The target element to render
|
|
// items: The items to render
|
|
// properties: The properties for the widget
|
|
moment.locale(properties.lang || globalOptions.locale);
|
|
|
|
$(target).xiboLayoutScaler(properties);
|
|
|
|
// Add the calendar type to options
|
|
properties.calendarType = 1;
|
|
|
|
// Run calendar render
|
|
$(target).xiboCalendarRender(properties, items);
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="schedule_dark" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/schedule_dark.png" />
|
|
</assets>
|
|
</template>
|
|
<!-- End of Schedule View -->
|
|
</templates>
|