full calendar instead of bootsfaces calendar

2021-03-08 23:34:34 +01:00
parent ed81dc40ad
commit 0629b6171d
13 changed files with 463 additions and 30 deletions
--- a/src/main/webapp/resources/my/fullcalendar.xhtml
+++ b/src/main/webapp/resources/my/fullcalendar.xhtml
@ -0,0 +1,83 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:cc="http://xmlns.jcp.org/jsf/composite"
+	xmlns:b="http://bootsfaces.net/ui">
+	<cc:interface>
+		<cc:attribute name="value" required="true" default="" />
+		<cc:attribute name="defaultDate" required="true" />
+	</cc:interface>
+	<cc:implementation>
+		<h:outputStylesheet name="jslibs/fullcalendar/main.min.css" />
+		<h:outputScript library="bsf" name="jq/jquery.js" target="head" />
+		<h:outputScript library="jslibs" name="fullcalendar/main.min.js" target="head" />
+		<h:outputScript library="jslibs" name="fullcalendar/locales-all.min.js" target="head" />
+		<script type="text/javascript">
+		  function lz(x) {
+			  if (x &lt; 10){
+				  return "0" + x;
+			  } else {
+				  return x;
+			  }
+		  }
+		
+			$(document)
+					.ready(
+							function() {
+								var calendarEl = document
+										.getElementById('calendar');
+								var calendar = new FullCalendar.Calendar(
+										calendarEl,
+										{
+											initialView : 'timeGridDay',
+											initialDate : "#{cc.attrs.defaultDate}",
+											headerToolbar : {
+												left : 'prev,next today',
+												center : 'title',
+												right : 'dayGridMonth,timeGridWeek,timeGridDay'
+											},
+											height : "75vh",
+											locale : 'de',
+											events : <h:outputText value="#{cc.attrs.value}" escape="FALSE" />,
+											eventClick : function(info) {
+												from = info.event.start;
+												until = info.event.end;
+												fromS = from == null ? "?" : lz(from.getHours()) + ":" + lz(from.getMinutes());
+												untilS = until == null ? "?" : lz(until.getHours()) + ":" + lz(until.getMinutes());
+												$("#modaltitle").html(fromS + " - " + untilS);
+												$("#modalsummary").html(info.event.title);
+												$("#modalproject").html(info.event.project);
+												$("#modalmodule").html(info.event.module);
+												$("#modaljob").html(info.event.job);
+												$("#modalbilling").html(info.event.billing);
+												$("#calmodal").show();
+											},
+											firstDay : 0
+										});
+								calendar.setOption('locale', 'de');
+								calendar.render();
+							});
+			$(document).ready(function() {
+				var calendarEl = document.getElementById('calendar');
+			});
+		</script>
+		<div id="calendar"></div>
+		<!--  div id="calmodal" class="modal" fade" tabindex="-1" role="dialog" -->
+		<div id="calmodal" class="modal" tabindex="-1" role="dialog" style="background: rgba(0, 0, 0, 0.5) !important;">
+			<div class="modal-dialog" role="document">
+				<div class="modal-content">
+					<div class="modal-header">
+						<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="$('#calmodal').hide()">
+							<span aria-hidden="true" class="fa fa-times"></span>
+						</button>
+						<h4 id="modaltitle" class="modal-title"></h4>
+					</div>
+					<div class="modal-body">
+						<h1 id="modalsummary"></h1>
+						<h2 id="modalproject"></h2>
+						<h3 id="modalmodule"></h3>
+						<h4 id="modaljob"></h4>
+						<div id="modalbilling"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</cc:implementation>
+</ui:composition>