Publications Office of the EU
Calendar - Web Guide
DisplayCustomHeader
MyPortal
BasketSummary
Dockbar
Dockbar est temporairement indisponible.
Calendar intro

Calendar

Calendar v3. Page last updated: 22/05/2023

Key features:

Overview

This calendar is designed in a minimalist style and only shows the dates and names of upcoming events. Event dates have a different background color to make it easier for users to find them.

Key features:

  • Single day event
  • Multi day event in the same month
  • Link to the event page
Calendar header

Events

Agrégateur de contenus
Une erreur s'est produite lors du traitement du modèle. 
The string doesn't match the expected date/time/date-time format. The string to parse was: "". The expected format was: "yyyy-MM-dd".
The nested reason given follows:
Unparseable date: ""

----
FTL stack trace ("~" means nesting-related):
	- Failed at: #assign dateY = dateY?datetime("yyyy-...  [in template "10157#10197#10834157" at line 28, column 5]
----
1<#assign liferay_ui = PortletJspTagLibs["/META-INF/liferay-ui.tld"] />  
2<#assign liferay_portlet = PortalJspTagLibs["/META-INF/liferay-portlet-ext.tld"] /> 
3 
4<div class="gcss-op"> 
5 
6<!-- Calendar v3 PORTALMSP-4185 --> 
7 
8<#assign yyyyDate = "0" /> 
9 
10<#list entries as entry> 
11	<#assign entry = entry /> 
12	<#assign assetRenderer = entry.getAssetRenderer() /> 
13	<#assign className = assetRenderer.getClassName() > 
14 
15	<#assign article = assetRenderer.getArticle() /> 
16	<#assign articleId = article.getArticleId() /> 
17	<#assign groupId = article.getGroupId() /> 
18	 
19	<#assign docXml = saxReaderUtil.read(entry.getAssetRenderer().getArticle().getContent()) /> 
20	<#assign rootElement = docXml.getRootElement() /> 
21	<#assign availableLocales = rootElement.attribute("available-locales").getText() /> 
22	<#assign defaultLocale = rootElement.attribute("default-locale").getText() /> 
23 
24  
25    <#-- handle the date start--> 
26	<#assign dateY = docXml.valueOf("//dynamic-element[@name='Date80yx']/dynamic-content/text()") /> 
27    <#-- Parse the date to a date object --> 
28    <#assign dateY = dateY?datetime("yyyy-MM-dd")> 
29	<#assign dateY = dateY?date /> 
30	 
31	<#if yyyyDate != dateY?string["yyyy"] >   
32		<#if entry?index !=0> 
33			</div> 
34		</#if> 
35    	<#assign yyyyDate = dateY?string["yyyy"] /> 
36		<h3 aria-label="Events in: ${yyyyDate}" class="ls-calendar-year" tabindex="0">${yyyyDate}</h3> 
37		<div class="ls-calendar-container"> 
38	</#if> 
39	 
40	<#-- handle the title --> 
41	<#if (availableLocales?contains(locale)) > 
42		<#assign title = docXml.valueOf("//dynamic-element[@name='Title']/dynamic-content[@language-id='"+locale+"']/text()") /> 
43	<#else> 
44		<#assign title = docXml.valueOf("//dynamic-element[@name='Title']/dynamic-content[@language-id='"+defaultLocale+"']/text()") /> 
45	</#if> 
46	 
47	<#-- handle the URL --> 
48	<#assign url = docXml.valueOf("//dynamic-element[@name='URL']/dynamic-content/text()") /> 
49     
50	<#-- handle the date end--> 
51	<#assign dateZ = docXml.valueOf("//dynamic-element[@name='EndDate']/dynamic-content/text()") /> 
52	 
53	<#if dateZ?has_content> 
54		<#-- Parse the date to a date object --> 
55		<#assign dateZ = dateZ?datetime("yyyy-MM-dd")> 
56		<#assign dateZ = dateZ?date />				 
57	</#if> 
58	 
59	 
60	<div class="ls-calendar-entry"> 
61		<div class="ls-calendar-date-container"> 
62			<div class="ls-calendar-date"> 
63				<span class="ls-day">${dateY?string["dd"]}</span> 
64				 
65				<#if dateZ?has_content> 
66				<span class="ls-day">- </span> 
67				<span class="ls-day">${dateZ?string["dd"]}</span> 
68				 
69				</#if> 
70		 
71			 
72				<div class="ls-month-container"> 
73					<span class="ls-month"><@liferay.language key='eu.europa.publications.Common.month.'+'${dateY?string["MMM"]?upper_case}' /></span> 
74				</div> 
75			</div> 
76		</div> 
77 
78	<h4 class="ls-calendar-event"><a class="stretched-link" href="${url}" aria-label="Event number: ${entry_index +1}, Event date: ${dateY}, Event name: ${title}">${title}</a></h4> 
79		 
80	<#if dateZ?has_content &&  dateY?string["MMM"]?upper_case != dateZ?string["MMM"]?upper_case> 
81		<br /> 
82		<div  class="for-op-editors"> 
83			Warning! the second date is not in the same month! 
84		</div> 
85	</#if>	 
86	</div> 
87 
88	<#if entry?index == entry?size-1> 
89		</div> 
90	</#if> 
91</#list> 
92</div> 
93<style> 
94.for-op-editors{ 
95	color: red; 
96	font-size: 10; 
97} 
98.for-op-editors{ 
99	display: none; 
100} 
101.has-control-menu.controls-visible .for-op-editors{ 
102	display: block; 
103} 
104 
105</style> 
106 
107<style type="text/css">.gcss-op h3.ls-calendar-year { 
108    font-size: var(--gs-base-font-size-m)!important; 
109    line-height: var(--gs-base-line-height-xs)!important; 
110    color: var(--gs-base-color-gray-100)!important; 
111    text-transform: uppercase; 
112    border-top: 1px solid var(--gs-base-color-gray-20); 
113    border-bottom: 1px solid var(--gs-base-color-gray-20); 
114    padding: var(--gs-base-spacing-xs) 0; 
115    margin-top:0; 
116    margin-bottom: 0!important; 
117    text-align: center; 
118} 
119 
120.gcss-op .ls-calendar-container{ 
121    margin-bottom: var(--gs-base-spacing-xs)!important; 
122} 
123 
124.gcss-op .ls-calendar-container .ls-calendar-entry { 
125    display: flex; 
126    padding: var(--gs-base-spacing-s) 0 var(--gs-base-spacing-s) 0; 
127    border-bottom: 1px solid var(--gs-base-color-gray-20); 
128    position: relative; 
129    /*background-color: white;*/ 
130} 
131 
132/*.gcss-op .ls-calendar-container .ls-calendar-entry:first-of-type { 
133    border-top: 1px solid var(--gs-base-color-gray-20); 
134    padding: var(--gs-base-spacing-m) 0 var(--gs-base-spacing-xs) 0; 
135}*/ 
136 
137.gcss-op .ls-calendar-container .ls-calendar-date-container { 
138    display: flex; 
139    justify-content: center; 
140    align-items: center; 
141    padding: var(--gs-base-spacing-xs); 
142    background-color: var(--gs-base-color-opblue-5); 
143    border-bottom: 2px solid var(--gs-base-color-opblue-25); 
144    border-radius: 4px; 
145    margin-bottom: 0; 
146    width: 80px; 
147    min-width: 80px; 
148    line-height: var(--gs-base-line-height-xs); 
149    text-align: center; 
150} 
151 
152.gcss-op .ls-calendar-container .ls-calendar-date { 
153    margin-bottom: 0; 
154} 
155 
156.gcss-op .ls-calendar-container .ls-calendar-date .ls-day { 
157    /*outline: 1px dotted black;*/ 
158    text-align: center; 
159    font-size: var(--gs-base-font-size-m); 
160    line-height: var(--gs-base-line-height-xs); 
161    font-weight: 700; 
162    margin-bottom: 0; 
163} 
164.gcss-op .ls-calendar-container .ls-calendar-date .ls-month-container{ 
165	margin-top: var(--gs-base-spacing-2xs); 
166} 
167.gcss-op .ls-calendar-container .ls-calendar-date .ls-month { 
168    /*outline: 1px dotted black;*/ 
169    text-align: center; 
170    font-size: var(--gs-base-font-size-xs); 
171    line-height: var(--gs-base-line-height-xs); 
172	font-weight: 700; 
173    text-transform: uppercase; 
174    margin-bottom: 0; 
175} 
176.gcss-op .ls-calendar-container .ls-calendar-date-dash .ls-month { 
177    /*outline: 1px dotted black;*/ 
178    text-align: center; 
179    font-size: var(--gs-base-font-size-2xs); 
180    text-transform: uppercase; 
181    margin-bottom: 0; 
182} 
183.gcss-op .ls-calendar-container .ls-calendar-event { 
184    font-size: var(--gs-base-font-size-sp-15)!important; 
185    line-height: var(--gs-base-line-height-s); 
186    margin-top: 0!important; 
187    margin-bottom: 0!important; 
188    margin-left:var(--gs-base-spacing-m); 
189} 
190 
191.gcss-op .ls-calendar-container .ls-calendar-event a { 
192    text-decoration: none!important; 
193    color:var(--gs-base-color-gray-100)!important; 
194	height: 100%; 
195    display: flex; 
196    align-items: center; 
197} 
198.gcss-op .ls-calendar-container .ls-calendar-event a:hover { 
199    text-decoration: underline!important; 
200    color:var(--gs-base-color-link-100)!important; 
201} 
202</style> 
How to implement

How to implement

Contact us for guidance.