83 lines
3.2 KiB
HTML
83 lines
3.2 KiB
HTML
<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 < 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> |