Calendario - enero - Pingüinos - Calendario - enero - Pingüinos
Breadcrumb
Breadcrumbs
Asset Publisher
An error occurred while processing the template.
The following has evaluated to null or missing: ==> yearEventoIni [in template "20116#20160#71270" at line 681, column 54] ---- Tip: If the failing expression is known to be legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: ${yearEventoIni} [in template "20116#20160#71270" at line 681, column 52] ----
1<#-- ESTILOS EN EL TEMA
2
3<style type="text/css">
4
5 .pln_calendario{
6 position: relative;
7 }
8
9------------------------------------- Cabecera evento -------------------------------------
10
11 .pln_calendario .cabecera{
12 overflow: hidden;
13 margin-bottom: 10px;
14 }
15
16 --------------- Estilo fechas ---------------
17 .pln_calendario .cabecera .fechas{
18 position: relative;
19 width: 85px;
20 padding-bottom: 185px;
21 float: left;
22 color: white;
23 }
24
25 .pln_calendario .cabecera .fechas .fechaIniBackground{
26 position: absolute;
27 top: 0; left: 0;
28 width: 100%; height: 56%;
29 border-left: 85px solid black;
30 border-bottom: 31px solid transparent;
31 z-index:-1;
32 }
33
34 .pln_calendario .cabecera .fechas .fechaFinBackground{
35 position: absolute;
36 bottom: 0; left: 0;
37 width: 100%; height: 56%;
38 border-right: 85px solid black;
39 border-top: 31px solid transparent;
40 z-index:-1;
41 }
42
43 .pln_calendario .cabecera .fechas .fechaIni{
44 position: absolute;
45 top: 0; left: 0;
46 width: 100%; height: 100%;
47 }
48
49 .pln_calendario .cabecera .fechas .fechaFin{
50 position: absolute;
51 top: 0; left: 0;
52 width: 100%; height: 100%;
53 }
54
55 .pln_calendario .cabecera .fechas .dia{
56 font-size: 56px !important;
57 font-weight: 700;
58 display: block;
59 text-align: center;
60 }
61
62 .pln_calendario .cabecera .fechas .mes{
63 position: absolute;
64 display: block;
65 font-size: 22px !important;
66 text-transform: uppercase;
67 }
68
69 .pln_calendario .cabecera .fechas .fechaIni span{
70 position: relative;
71 top: -5%;
72 }
73 .pln_calendario .cabecera .fechas .fechaIni p{
74 top: 28%; left: 25%;
75 }
76
77 .pln_calendario .cabecera .fechas .fechaFin span{
78 position: relative;
79 top: 47%;
80 }
81 .pln_calendario .cabecera .fechas .fechaFin p{
82 top: 81%; left: 25%;
83 }
84
85 .pln_calendario .cabecera #soloFecha{
86 padding-bottom: 112px;
87 }
88 .pln_calendario .cabecera #soloFechaIniBackground{
89 height: 100%;
90 border-left: none;
91 border-bottom: none;
92 background-color: black;
93 }
94 .pln_calendario .cabecera #soloMes{
95 top: 53%;
96 }
97 --------------- Fin fechas ---------------
98
99
100 .pln_calendario .cabecera .tituloContainer{
101 position: relative;
102 margin-bottom: 2%;
103 }
104
105 .pln_calendario .cabecera .tituloContainer .tituloText{
106 line-height: 120%;
107 font-size: 3.5vw !important;
108 font-weight: 800;
109 color: black;
110 margin-left: 100px;
111 text-align: left;
112 }
113
114------------------------------------- Segundo contenedor -------------------------------------
115
116 .pln_calendario .segundoCont{
117 position: relative;
118 min-height: 290px;
119 }
120
121 .pln_calendario .segundoCont .imagenTexto{
122
123 margin-bottom: 25px;
124 }
125
126 .pln_calendario .segundoCont .imagenTexto .imgContainer{
127 position: relative;
128 display: inline-block;
129 width: 55%;
130 float: left;
131 text-align: center;
132 margin-left: 60px;
133 margin-right:1%;
134 margin-bottom:1%;
135 }
136
137 .pln_calendario .segundoCont .imagenTexto .imgContainer .imgEvento{
138 position: relative;
139 max-height: 40vw;
140 }
141
142 .pln_calendario .segundoCont .imagenTexto .descripCorta{
143 position: relative;
144
145 }
146
147 .pln_calendario .segundoCont .imagenTexto span.descripCorta {
148 font-size: 14pt !important;
149
150 }
151
152
153 --------------- Estilo apartado redes sociales ---------------
154 .pln_calendario .segundoCont #redes_noticia{
155 position: absolute;
156 top: 0;
157 z-index: 1;
158 }
159
160 .pln_calendario .segundoCont #redes_noticia ul{
161 list-style-type: none;
162 padding: 0 !important;
163 overflow: auto;
164 }
165
166 .pln_calendario .segundoCont #redes_noticia ul li{
167 display: block;
168 width: 50px; height: 50px;
169 margin: 5px 5px 5px 0;
170 padding: 0 !important;
171 padding-top: 6px !important;
172 background-color: black;
173 text-align: center;
174 }
175
176 .pln_calendario .segundoCont #redes_noticia ul li a{
177 text-decoration: none;
178 }
179
180 .pln_calendario .segundoCont #redes_noticia ul li span{
181 font-size: 40px;
182 color: white;
183 }
184
185 .pln_calendario .segundoCont #redes_noticia ul li .icon-google_plus{
186 font-size: 35px !important;
187 }
188
189
190------------------------------------ Cuerpo evento -------------------------------------
191
192 .pln_calendario .cuerpoEvento{
193 position: relative;
194 clear: right;
195 }
196
197 .pln_calendario .cuerpoEvento .direccion span{
198 font-size: 1.5vw !important;
199 }
200
201 .pln_calendario .cuerpoEvento .direccion p{
202 display: inline;
203 font-size: 1.5vw !important;
204 }
205
206 .pln_calendario .cuerpoEvento .mapContDesple{
207 position: relative;
208 padding-bottom: 17%;
209 width: auto;
210 margin-bottom: 3%; margin-top: 1%;
211 }
212
213 .pln_calendario .cuerpoEvento .mapContDesple .map{
214 position: absolute;
215 display: block;
216 margin: auto;
217 border: 0;
218 width: 100%;
219 height: 100%;
220 }
221
222 .pln_calendario .cuerpoEvento .enlace{
223 margin-bottom: 3%;
224 }
225
226 .pln_calendario .cuerpoEvento .enlace a{
227 color: #FFFFFF;
228 text-decoration: none;
229 }
230
231 .pln_calendario .cuerpoEvento .enlace p{
232 display: inline;
233 border: 2px solid black;
234 padding: 1%;
235 font-size: 1.5vw !important;
236 font-weight: 600;
237 color: black;
238 }
239
240 .pln_calendario .cuerpoEvento .enlaceVenta{
241 margin-bottom: 3%;
242 }
243
244 .pln_calendario .cuerpoEvento .enlaceVenta a{
245 color: #FFFFFF;
246 text-decoration: none;
247 }
248
249 .pln_calendario .cuerpoEvento .enlaceVenta p{
250 display: inline;
251 border: 2px solid black;
252 padding: 1%;
253 font-size: 1.5vw !important;
254 font-weight: 600;
255 color: black;
256 }
257
258 .linkCalendar{
259 position: relative;
260 padding: 1%;
261
262 background: rgb(185,65,85); /* For browsers that do not support gradients */
263 background: -webkit-linear-gradient(90deg, rgb(169,66,118), rgb(198,64,57)); /* For Safari 5.1 to 6.0 */
264 background: -o-linear-gradient(90deg, rgb(169,66,118), rgb(198,64,57)); /* For Opera 11.1 to 12.0 */
265 background: -moz-linear-gradient(90deg, rgb(169,66,118), rgb(198,64,57)); /* For Firefox 3.6 to 15 */
266 background: linear-gradient(90deg, rgb(169,66,118), rgb(198,64,57)); /* Standard syntax */
267 }
268
269 .linkCalendar a{
270 text-decoration: none;
271 color: white;
272 }
273
274 .linkCalendar span{
275 font-size: 2.5vw !important;
276 }
277
278 .linkCalendar p{
279 display: inline;
280 margin-left: 1%;
281 font-size: 2vw !important;
282 font-weight: 700;
283 }
284
285
286 ------------------------------------- Comportamiento hover -------------------------------------
287
288 .pln_calendario .cuerpoEvento .enlace p:hover{
289 background-color: black;
290 color: white;
291 }
292
293 .pln_calendario .cuerpoEvento .enlaceVenta p:hover{
294 background-color: black;
295 color: white;
296 }
297
298
299
300------------------------------------- Comportamiento responsivo -------------------------------------
301
302 @media only screen and (max-width: 1200px) {
303 .pln_calendario .cuerpoEvento .direccion p, .pln_calendario .cuerpoEvento .direccion span, .pln_calendario .cuerpoEvento .enlaceVenta p{
304 font-size: 18px !important;
305 }
306
307 .linkCalendar p, .linkCalendar span {
308 font-size: 24px !important;
309 }
310 }
311
312 @media only screen and (max-width: 991px) {
313 .pln_calendario .segundoCont .imagenTexto .descripCorta p{
314 font-size: 20px !important;
315 }
316 }
317
318
319 @media only screen and (max-width: 767px) {
320 .pln_calendario .cabecera{
321 margin-bottom: 0;
322 min-height: 0;
323 }
324 .pln_calendario .cabecera .fechas{
325 width: 55px;
326 padding-bottom: 130px;
327 margin-bottom:8px;
328 }
329 .pln_calendario .cabecera .fechas .dia{
330 font-size: 25pt !important;
331 }
332 .pln_calendario .cabecera .fechas .mes{
333 font-size: 13pt !important;
334 }
335 .pln_calendario .cabecera .fechas .fechaIniBackground{
336 border-left: 55px solid black;
337 border-bottom: 22px solid transparent;
338 }
339 .pln_calendario .cabecera .fechas .fechaFinBackground{
340 border-right: 55px solid black;
341 border-top: 22px solid transparent;
342 }
343 .pln_calendario .cabecera .fechas .fechaIni p {
344 top: 25%; left: 18%;
345 }
346 .pln_calendario .cabecera .fechas .fechaFin p{
347 top: 78%; left: 22%;
348 }
349
350 .pln_calendario .cabecera #soloFecha{
351 padding-bottom: 72px;
352 }
353
354 .pln_calendario .cabecera .tituloContainer .tituloText{
355 font-size: 25pt !important;
356 margin-left: 68px;
357 }
358
359 .pln_calendario .segundoCont .imagenTexto{
360 display: block;
361 margin-bottom: 0;
362 }
363 .pln_calendario .segundoCont .imagenTexto .imgContainer{
364 display: block;
365 float: none;
366 width: 100%;
367 margin-left: 0;
368 padding-left: 0;
369 min-height: 0;
370 margin-right:3%;
371 }
372 .pln_calendario .segundoCont .imagenTexto .imgContainer .imgEvento{
373 max-height: 80vw;
374 }
375 .pln_calendario span.descripCorta {
376 position: relative;
377 font-weight: 700;
378 font-size: 14pt !important;
379 margin-top: 20px;
380 }
381
382 .pln_calendario .cuerpoEvento .direccion span{
383 font-size: 18pt !important;
384 }
385 .pln_calendario .cuerpoEvento .direccion p{
386 font-size: 14pt !important;
387 }
388
389 .pln_calendario .cuerpoEvento .mapContDesple {
390 padding-bottom: 40%;
391 }
392
393 .pln_calendario .cuerpoEvento .enlace p {
394 font-size: 10pt !important;
395 }
396 .pln_calendario .cuerpoEvento .enlaceVenta p {
397 font-size: 10pt !important;
398 }
399
400 .linkCalendar a{
401 text-decoration: none;
402 }
403
404 .linkCalendar span {
405 font-size: 16pt !important;
406 }
407 .linkCalendar p {
408 font-size: 14pt !important;
409 }
410
411 }
412
413
414 @media only screen and (max-width: 476px) {
415 .pln_calendario .cabecera .tituloContainer .tituloText {
416 word-wrap: break-word;
417 }
418 .pln_calendario .segundoCont .imagenTexto .imgContainer .imgEvento{
419 max-width: 100%;
420 max-height: inherit;
421 }
422 }
423
424
425 @media only screen and (max-width: 767px) {
426 .pln_calendario .segundoCont #redes_noticia{
427 position: relative;
428 top: 0;
429 }
430 .pln_calendario .segundoCont #redes_noticia ul{
431 margin-top: 20px;
432 }
433 .pln_calendario .segundoCont #redes_noticia ul li{
434 float: left;
435 width: 40px; height: 40px;
436 }
437 .pln_calendario .segundoCont #redes_noticia ul li span {
438 font-size: 30px;
439 }
440 .pln_calendario .segundoCont #redes_noticia ul li .icon-google_plus{
441 font-size: 28px !important;
442 }
443 }
444
445
446 .pln_calendario .segundoCont #redes_noticia .enlaceVenta{
447 background: rgb(185,65,85) !important; /* For browsers that do not support gradients */
448 background: -webkit-linear-gradient(90deg, rgb(169,66,118), rgb(198,64,57)) !important; /* For Safari 5.1 to 6.0 */
449 background: -o-linear-gradient(90deg, rgb(169,66,118), #rgb(198,64,57)) !important; /* For Opera 11.1 to 12.0 */
450 background: -moz-linear-gradient(90deg, rgb(169,66,118), rgb(198,64,57)) !important; /* For Firefox 3.6 to 15 */
451 background: linear-gradient(90deg, rgb(169,66,118), rgb(198,64,57)) !important; /* Standard syntax */
452 }
453
454 .pln_calendario .segundoCont #redes_noticia .enlaceVenta span{
455 color: white;
456 }
457
458
459 @media only print {
460
461 *{
462 overflow:hidden;
463 }
464
465 .segundoCont .imagenTexto{
466 display:block;
467 }
468 .displayEventContainer .cabecera{
469 margin-bottom: 0;
470 min-height: 0;
471 }
472 .cabecera .fechas{
473 width: 55px;
474 padding-bottom: 130px;
475 margin-bottom:8px;
476 color:white !important;
477
478 }
479
480 .cabecera .fechas .dia{
481 font-size: 25pt !important;
482 color:white !important;
483 }
484 .cabecera .fechas .mes{
485 font-size: 13pt !important;
486 color:white !important;
487 }
488 .cabecera .fechas .fechaIniBackground{
489 border-left: 55px solid black;
490 border-bottom: 22px solid transparent;
491 }
492 .cabecera .fechas .fechaFinBackground{
493 border-right: 55px solid black;
494 border-top: 22px solid transparent;
495 }
496 .cabecera .fechas .fechaIni p {
497 top: 25%; left: 18%;
498 }
499 .cabecera .fechas .fechaFin p{
500 top: 78%; left: 22%;
501 }
502
503 .cabecera #soloFecha{
504 padding-bottom: 72px;
505 }
506
507 .cabecera .tituloContainer .tituloText{
508 font-size: 25pt !important;
509 margin-left: 68px;
510 }
511
512 .segundoCont .imagenTexto{
513 display: block;
514 margin-bottom: 0;
515 }
516 .segundoCont .imagenTexto .imgContainer{
517 display: block;
518 float: none;
519 width: 100%;
520 margin-left: 0;
521 padding-left: 0;
522 min-height: 0;
523 }
524 .segundoCont .imagenTexto .imgContainer .imgEvento{
525 max-height: 80vw;
526 }
527 .segundoCont .imagenTexto .descripCorta {
528 position: relative;
529 width: 100%;
530 margin-top: 20px;
531 }
532
533 .cuerpoEvento .direccion span{
534 font-size: 18pt !important;
535 }
536 .cuerpoEvento .direccion p{
537 font-size: 14pt !important;
538 }
539
540 .cuerpoEvento .mapContDesple {
541 padding-bottom: 40%;
542 }
543
544 .cuerpoEvento {
545 font-size: 10pt !important;
546 }
547 .cuerpoEvento {
548 font-size: 10pt !important;
549 }
550
551 .linkCalendar{
552 display:none;
553 }
554
555 #redes_noticia{
556 display:none;
557 }
558 .enlace .enlaceVenta{
559 display:none;
560 }
561 }
562
563</style>
564
565<style>
566
567 .pln_calendario .cuerpoEvento .docDescarga {
568 margin-bottom: 3%;
569 }
570 .pln_calendario .cuerpoEvento .docDescarga a {
571 color: #fff;
572 text-decoration: none;
573 }
574 .pln_calendario .cuerpoEvento .docDescarga span {
575 display: inline-block;
576 border: 2px solid black;
577 padding: 1%;
578 font-size: 1.5vw !important;
579 font-weight: 600;
580 color: black;
581 }
582 .pln_calendario .cuerpoEvento .docDescarga span:hover {
583 background-color: black;
584 color: white;
585 }
586
587
588
589</style>
590
591-->
592<style>
593 .pln_calendario .cabecera .fechas{
594padding-bottom: 200px;
595text-align: center;
596 }
597 .pln_calendario .cabecera .fechas .fechaIni span{
598 top: -1%;
599 }
600 .pln_calendario .cabecera .fechas .fechaIni p{
601 top: 30%;
602 }
603</style>
604
605
606 <#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")>
607
608 <#assign mapApiKey = propsUtil.get("Google.maps.api.key")>
609
610 <#assign url=request['attributes']['CURRENT_COMPLETE_URL'] />
611
612 <#assign irACalendarioDeEventos = journalArticleLocalService.getLatestArticle(90353).getDescription(locale)/>
613 <#assign text_documento = journalArticleLocalService.getLatestArticle(226328).getDescription(locale)/>
614
615
616 <#assign FechaInicio_Data = getterUtil.getString(FechaInicio.getData())>
617 <#assign FechaFin_Data = getterUtil.getString(FechaFin.getData())>
618
619 <#if validator.isNotNull(FechaInicio_Data)>
620 <#assign FechaInicio_DateObj = dateUtil.parseDate("yyyy-MM-dd", FechaInicio_Data, locale)>
621
622 <#assign diaEventoIni = FechaInicio_DateObj?string["dd"]?number>
623 <#assign yearEventoIni = FechaInicio_DateObj?string["yyyy"]?number>
624 <#assign mesEventoNombreIni = dateUtil.getDate(FechaInicio_DateObj, "MMM", locale)>
625 </#if>
626
627 <#if validator.isNotNull(FechaFin_Data) >
628 <#assign FechaFin_DateObj = dateUtil.parseDate("yyyy-MM-dd", FechaFin_Data, locale)>
629
630 <#assign diaEventoFin = FechaFin_DateObj?string["dd"]?number>
631 <#assign mesEventoNombreFin = dateUtil.getDate(FechaFin_DateObj, "MMM", locale)>
632 </#if>
633
634 <#if (Geolocation.getData() != "")>
635 <#assign geolocationJSONObject = jsonFactoryUtil.createJSONObject(Geolocation.getData())>
636
637 <#assign latitude = geolocationJSONObject.getDouble("latitude")>
638 <#assign longitude = geolocationJSONObject.getDouble("longitude")>
639 </#if>
640
641
642 <#assign currentArticleResourcePrimKey = .vars['reserved-article-id'].data?number + 2 />
643 <#assign articleOriginal = journalArticleLocalService.getLatestArticle(currentArticleResourcePrimKey) />
644 <#assign document = saxReaderUtil.read(articleOriginal.getContentByLocale(locale)) />
645 <#assign rootElement = document.getRootElement() />
646
647 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='DocumentoDeDescarga']/dynamic-element[@name='TituloDocumento']")>
648 <#if xPathSelector.selectSingleNode(rootElement)??>
649 <#assign tituloDescarga = xPathSelector.selectSingleNode(rootElement).getStringValue()?trim>
650 </#if>
651
652 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='DocumentoDeDescarga']/dynamic-element[@name='Documento']")>
653 <#if xPathSelector.selectSingleNode(rootElement)??>
654 <#assign linkDescarga = xPathSelector.selectSingleNode(rootElement).getStringValue()?trim>
655 </#if>
656
657
658
659 <div class="pln_calendario">
660 <div class="cabecera">
661
662 <#if FechaFin_Data != FechaInicio_Data>
663 <div class="fechas">
664 <div class="fechaIniBackground"></div>
665 <span class="year">${yearEventoIni}</span>
666 <div class="fechaIni">
667 <span class="dia">${diaEventoIni!}</span>
668 <p class="mes">${mesEventoNombreIni!}</p>
669 </div>
670
671 <div class="fechaFinBackground"></div>
672 <div class="fechaFin">
673 <span class="dia">${diaEventoFin!}</span>
674 <p class="mes">${mesEventoNombreFin!}</p>
675 </div>
676 </div>
677
678 <#else>
679 <div class="fechas" id="soloFecha">
680 <div class="fechaIniBackground" id="soloFechaIniBackground"></div>
681 <span class="year">${yearEventoIni}</span>
682 <div class="fechaIni" id="soloFechaIni">
683 <span class="dia" id="soloDia">${diaEventoIni!}</span>
684 <p class="mes" id="soloMes">${mesEventoNombreIni!}</p>
685 </div>
686 </div>
687 </#if>
688
689 <div class="tituloContainer">
690 <p class="tituloText">${Titulo.getData()}</p>
691 </div>
692
693 </div>
694
695 <div class="segundoCont">
696
697 <#if Imagen.getData()?? && Imagen.getData() != "">
698 <div class="imagenTexto">
699 <div class="imgContainer">
700 <img class="imgEvento" alt="${Imagen.getAttribute('alt')}" src="${Imagen.getData()}" />
701 </div>
702 </#if>
703
704 <#if validator.isNotNull(Descripcion.getData()) >
705 <span class="descripCorta">
706 ${Descripcion.getData()}
707 </span>
708 </#if>
709 </div>
710
711 <div id="redes_noticia">
712 <ul>
713 <li><a class="i_facebook" data-href='${url}' href="https://www.facebook.com/sharer/sharer.php?u=${url}&src=sdkpreparse" title="Compartir en Facebook" target="_blank"> <span class="icon-facebook"></span> </a></li>
714 <li><a class="i_linkedin" href="http://www.linkedin.com/shareArticle?url=${url}" title="Compartir en Linkedin" target="_blank"> <span class="icon-linkedin"></span> </a></li>
715 <li><a class="i_twitter" href="https://twitter.com/share" title="Compartir en Twitter" target="_blank"> <span class="icon-twitter"></span> </a></li>
716 <#if Venta.getData()[2..3] == "si">
717 <li class="enlaceVenta"> <a href="${EnlaceVentaDeTickets.getData()}" title="Comprar entradas" target="_blank"> <span class="icon-ticket"></span> </a> </li>
718 </#if>
719 </ul>
720 </div>
721
722 </div>
723
724
725 <div class="cuerpoEvento">
726 <#if validator.isNotNull(Direccion.getData()) >
727 <div class="direccion">
728 <span class="icon-map_marker"></span> <p>${Direccion.getData()}</p>
729 </div>
730 </#if>
731
732
733 <#if (Geolocation.getData() != "")>
734 <div class="mapContDesple">
735 <iframe
736 class="map"
737 src="https://www.google.com/maps/embed/v1/place?key=${mapApiKey}
738 &q=${latitude},${longitude}" allowfullscreen>
739 </iframe>
740 </div>
741 </#if>
742
743
744
745
746 <#if linkDescarga?? && linkDescarga != "">
747 <div class="docDescarga">
748 <a href="${linkDescarga}">
749 <#if tituloDescarga != "">
750 <span>${tituloDescarga}</span>
751 <#else>
752 <span>${text_documento}</span>
753 </#if>
754 </a>
755 </div>
756 </#if>
757
758
759
760
761 <#if validator.isNotNull(EnlaceEvento.getData())>
762 <div class="enlace">
763 <a href="${EnlaceEvento.getData()?ensure_starts_with('http://')}" target="_blank">
764 <p>Ver web del evento</p>
765 </a>
766 </div>
767 </#if>
768
769
770 <#if Venta.getData()[2..3] == "si">
771 <div class="enlaceVenta">
772 <a href="${EnlaceVentaDeTickets.getData()}" target="_blank">
773 <p>Comprar entradas</p>
774 </a>
775 </div>
776 </#if>
777 </div>
778
779 </div>
780
781 <div class="linkCalendar">
782 <a href="/calendario-de-eventos">
783 <span class="icon-calendar"></span>
784 <p>${irACalendarioDeEventos}</p>
785 </a>
786 </div>