1<style id="calendar-view-style">
2#app { 3 width: 100%;
4 text-align: center;
5}
6
7#app > dialog { 8 width: 90% !important;
9 max-width: 1154px !important;
10}
11
12.fc-toolbar-title:first-letter { 13 text-transform: capitalize !important;
14}
15
16.fc-button { 17 padding: 0 0.65em !important;
18}
19
20.fc-event:hover { 21 color: #000 !important;
22}
23
24.legend-color { 25 width: 32px;
26 height: 32px;
27 display: inline-block;
28 margin: 3px 5px 0 0;
29}
30
31.legend-name { 32 display: inline-block;
33}
34</style>
35<#assign
36 config_ics = config.ics?eval
37 config_names = config.calendar_names?eval
38 config_colors = config.colors?eval
39 config_view_legend = config.view_legend?eval
40/>
41<script id="calendar-view-script">
42 var calendarColors = ${config.colors}; 43 <#if config_ics?has_content && config_ics?is_string >
44 var icsContent = `${htmlUtil.escapeJS(queryUtil.fetch("GET", config_ics, null, null))}`; 45 <#elseif config_ics?has_content && config_ics?is_sequence>
46 <#assign content = [] />
47 <#list config_ics as ics>
48 <#assign content = content + [htmlUtil.escapeJS(queryUtil.fetch("GET", ics, null, null))] /> 49 </#list>
50 var icsContent = [<#if content?has_content>`${content?join("`,`")}`</#if>]; 51 </#if>
52</script>
53<script type="module" crossorigin src="${config.js}"></script> 54<link rel="stylesheet" crossorigin href="${config.css}"> 55<div id="app"></div>
56<#if config_view_legend?string == "true">
57 <#list config_names as name>
58 <div class="legend-item">
59 <div class="legend-color" style="background-color: ${config_colors[name_index]}"> </div> 60 <div class="legend-name">${name}</div> 61 </div>
62 </#list>
63</#if>
