f320882e9d
* Transfer Überstunden50/100,Mehrstunden20 zurück in Gutstunden/Mehrstunden * Textuelle Anzeige von transferierten Stunden * Kalender Anzeige verbesserungen * Offene Krankenstände werden virtuell 2 Wochen in die Zukunft angezeit im Kalender * Kalender Heute Anzeige verbesserte Sichtbarkeit
425 lines
14 KiB
PHP
425 lines
14 KiB
PHP
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php");
|
|
$daysgerm = array("So", "Mo", "Di", "Mi", "Do", "Fr", "Sa");
|
|
?>
|
|
<link href="<?= self::getResourcePath() ?>assets/css/select2-cstm.css?<?= date('U') ?>" rel="stylesheet"
|
|
type="text/css"/>
|
|
<style>
|
|
.fc-event {
|
|
border-radius: 2px;
|
|
border: none;
|
|
cursor: move;
|
|
font-size: 13px;
|
|
margin: 3px 7px;
|
|
padding: 3px 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.fc-toolbar {
|
|
@media (max-width: 767px) {
|
|
flex-direction: column;
|
|
.fc-toolbar-chunk {
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fc .fc-button-primary:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.fc .fc-button:focus {
|
|
box-shadow: none;
|
|
outline: 0px;
|
|
}
|
|
|
|
.fc .fc-button-primary:not(:disabled).fc-button-active:focus, .fc .fc-button-primary:not(:disabled):active:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.popper, .tooltip {
|
|
position: absolute;
|
|
z-index: 9999;
|
|
/* background: #FFC107; */
|
|
color: #0f5be9;
|
|
width: auto;
|
|
/* border-radius: 3px; */
|
|
/* box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); */
|
|
padding: 10px;
|
|
text-align: center;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.tooltip-inner {
|
|
max-width: 500px;
|
|
padding: 0.4rem 0.8rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
background-color: #2c3e50;
|
|
border-radius: 0.2rem;
|
|
}
|
|
|
|
.style5 .tooltip {
|
|
background: #1E252B;
|
|
color: #FFFFFF;
|
|
max-width: 200px;
|
|
width: auto;
|
|
font-size: .8rem;
|
|
padding: .5em 1em;
|
|
}
|
|
|
|
.popper .popper__arrow,
|
|
.tooltip .tooltip-arrow {
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
position: absolute;
|
|
margin: 5px;
|
|
}
|
|
|
|
.tooltip .tooltip-arrow,
|
|
.popper .popper__arrow {
|
|
border-color: #FFC107;
|
|
}
|
|
|
|
.style5 .tooltip .tooltip-arrow {
|
|
border-color: #1E252B;
|
|
}
|
|
|
|
.popper[x-placement^="top"],
|
|
.tooltip[x-placement^="top"] {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.popper[x-placement^="top"] .popper__arrow,
|
|
.tooltip[x-placement^="top"] .tooltip-arrow {
|
|
border-width: 5px 5px 0 5px;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
bottom: -5px;
|
|
left: calc(50% - 5px);
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.popper[x-placement^="bottom"],
|
|
.tooltip[x-placement^="bottom"] {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.tooltip[x-placement^="bottom"] .tooltip-arrow,
|
|
.popper[x-placement^="bottom"] .popper__arrow {
|
|
border-width: 0 5px 5px 5px;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
border-top-color: transparent;
|
|
top: -5px;
|
|
left: calc(50% - 5px);
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tooltip[x-placement^="right"],
|
|
.popper[x-placement^="right"] {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.popper[x-placement^="right"] .popper__arrow,
|
|
.tooltip[x-placement^="right"] .tooltip-arrow {
|
|
border-width: 5px 5px 5px 0;
|
|
border-left-color: transparent;
|
|
border-top-color: transparent;
|
|
border-bottom-color: transparent;
|
|
left: -5px;
|
|
top: calc(50% - 5px);
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.popper[x-placement^="left"],
|
|
.tooltip[x-placement^="left"] {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.popper[x-placement^="left"] .popper__arrow,
|
|
.tooltip[x-placement^="left"] .tooltip-arrow {
|
|
border-width: 5px 0 5px 5px;
|
|
border-top-color: transparent;
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
right: -5px;
|
|
top: calc(50% - 5px);
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.fc .fc-daygrid-day.fc-day-today {
|
|
background-color:rgb(33 109 247 / 30%);
|
|
}
|
|
|
|
.fc-event-title {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.fc-day-today .fc-daygrid-day-top {
|
|
background-color: #216df7;
|
|
}
|
|
|
|
.fc-day-today .fc-daygrid-day-number {
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
<script type="text/javascript"
|
|
src="<?= self::getResourcePath() ?>assets/js/calendar/moment/moment.min.js?<?= date('U') ?>"></script>
|
|
<script type="text/javascript"
|
|
src="<?= self::getResourcePath() ?>assets/js/calendar/index.global.min.js?<?= date('U') ?>"></script>
|
|
<script type="text/javascript"
|
|
src="<?= self::getResourcePath() ?>assets/js/calendar/moment/index.global.min.js?<?= date('U') ?>"></script>
|
|
<script type="text/javascript"
|
|
src="<?= self::getResourcePath() ?>assets/js/calendar/locales-all.global.min.js?<?= date('U') ?>"></script>
|
|
<script type="text/javascript"
|
|
src="<?= self::getResourcePath() ?>assets/js/calendar/tooltip.min.js?<?= date('U') ?>"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
let requestUrl = "<?= self::getUrl("TimerecordingReport", "api", ['do' => 'getTimerecordings', 'datatype' => '3', 'datayear' => time()]) ?>";
|
|
var cindex = 1;
|
|
var holiDays = [];
|
|
var birthdays = [];
|
|
<?php
|
|
$counter = 1;
|
|
foreach ($timerecordingholidays as $timerecordingholiday) :?>
|
|
holiDays.push({
|
|
id: <?= $counter ?>,
|
|
start: '<?= date("Y-m-d", $timerecordingholiday->timestamp) ?>',
|
|
end: '<?= date("Y-m-d", $timerecordingholiday->timestamp) ?>',
|
|
title: '<?= $timerecordingholiday->description ?>',
|
|
description: '<?= $timerecordingholiday->description ?>'
|
|
});
|
|
<?php
|
|
$counter++;
|
|
endforeach;
|
|
foreach ($timerecordingemployees as $timerecordingemployee) :
|
|
if ($timerecordingemployee->birthday) :
|
|
$year = date("Y", time());
|
|
$year = $year - 1;
|
|
$Byear = date("Y", $timerecordingemployee->birthday);
|
|
for ($i = 0; $i < 5; $i++) :
|
|
$age = $year - $Byear;
|
|
?>
|
|
birthdays.push({
|
|
id: <?= $counter ?>,
|
|
start: '<?= date("$year-m-d", $timerecordingemployee->birthday) ?>',
|
|
end: '<?= date("$year-m-d", $timerecordingemployee->birthday) ?>',
|
|
title: '<?= $timerecordingemployee->user->name ?> (<?= $age ?>)',
|
|
description: 'Geburtstag <?= $timerecordingemployee->user->name ?> (<?= $age ?>)'
|
|
});
|
|
<?php
|
|
$year++;
|
|
endfor;
|
|
$counter++;
|
|
endif;
|
|
endforeach; ?>
|
|
|
|
cindex = <?= $counter ?>;
|
|
$.getJSON(requestUrl, function (data) {
|
|
|
|
}).done(function (json) {
|
|
var bgcolors = ['rgb(71 93 251 / 34%)', 'rgb(228 187 249 / 65%)', 'rgb(243 251 117 / 68%)', 'rgb(71 251 176 / 68%)', 'rgb(119 206 247 / 65%)', 'rgb(251 196 71 / 68%)', 'rgb(251 171 216 / 69%)', 'rgb(152 155 243 / 65%)', 'rgb(243 152 109 / 68%)', 'rgb(255 187 187 / 65%)', 'rgb(131 245 60 / 68%)', 'rgb(144 241 245 / 65%)'];
|
|
//read data from json
|
|
var json = json.data;
|
|
var holidays = [];
|
|
var colorcount = 0;
|
|
var oldname = "";
|
|
$.each(json, function (index, value) {
|
|
if (oldname != value.user.user) {
|
|
colorcount++;
|
|
if (colorcount > 11) {
|
|
colorcount = 0;
|
|
}
|
|
oldname = value.user.user;
|
|
}
|
|
if (value.hourday.hourday != '5') {
|
|
holidays.push({
|
|
id: cindex,
|
|
backgroundColor: bgcolors[colorcount],
|
|
start: value.cstart.cstart,
|
|
end: value.cend.cend,
|
|
title: value.ccategory.ccategory + " " + value.user.user,
|
|
description: value.ccategory.ccategory + " " + value.user.user
|
|
});
|
|
cindex++;
|
|
}
|
|
oldname = value.user.user;
|
|
|
|
});
|
|
|
|
var initialLocaleCode = 'en';
|
|
var calendarEl = document.getElementById('fullcalendar');
|
|
var containerEl = document.getElementById('external-events');
|
|
var localeSelectorEl = document.getElementById('locale-selector');
|
|
|
|
var curYear = '2024';
|
|
var curMonth = '02';
|
|
|
|
// Calendar Event Source
|
|
|
|
// Birthday Events Source
|
|
var holiDayEvents = {
|
|
id: 1,
|
|
backgroundColor: 'rgba(255, 0, 0 , 1)',
|
|
borderColor: 'rgba(255, 0, 0 , 1)',
|
|
textColor: '#fff',
|
|
events: holiDays
|
|
|
|
};
|
|
var holidayEvents = {
|
|
id: 7,
|
|
backgroundColor: 'rgba(0,204,204,.25)',
|
|
borderColor: 'rgb(8 241 8)',
|
|
textColor: '#000',
|
|
events: holidays
|
|
};
|
|
var birthdayEvents = {
|
|
id: 5,
|
|
backgroundColor: 'rgb(68 15 241 / 76%)',
|
|
borderColor: 'rgb(68 15 241 / 76%)',
|
|
textColor: '#fff',
|
|
events: birthdays
|
|
};
|
|
var initialLocaleCode = 'en';
|
|
var calendarEl = document.getElementById('calendar');
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
locale: 'de',
|
|
themeSystem: 'bootstrap4',
|
|
headerToolbar: {
|
|
left: "prev,today,next",
|
|
center: 'title',
|
|
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
|
|
},
|
|
eventDidMount: function (info) {
|
|
var tooltip = new Tooltip(info.el, {
|
|
title: info.event.extendedProps.description,
|
|
placement: 'top',
|
|
trigger: 'hover',
|
|
container: 'body'
|
|
});
|
|
},
|
|
editable: true,
|
|
droppable: true, // this allows things to be dropped onto the calendar
|
|
fixedWeekCount: true,
|
|
// height: 300,
|
|
initialView: 'dayGridMonth',
|
|
timeZone: 'UTC',
|
|
hiddenDays: [],
|
|
navLinks: 'true',
|
|
events: [],
|
|
height: 800,
|
|
eventSources: [birthdayEvents, holiDayEvents, holidayEvents]
|
|
});
|
|
calendar.render();
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
<style>
|
|
.edit-button {
|
|
color: #007bff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.approved-open {
|
|
background-color: #fdb751 !important;
|
|
color: #000;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.approved-closed {
|
|
background-color: #96ff68 !important;
|
|
color: #000;
|
|
border-radius: 5px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.fa-clock {
|
|
color: #ff9b00;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.edit-placeholder {
|
|
height: 15px;
|
|
width: 22px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.fa-square-check {
|
|
color: #23b900;
|
|
font-size: 17px;
|
|
vertical-align: middle;
|
|
margin-bottom: 2px;
|
|
margin-right: 3px;
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
<link href="<?= self::getResourcePath() ?>assets/css/datatables-std.css?<?= date('U') ?>" rel="stylesheet"
|
|
type="text/css"/>
|
|
<!-- start page title -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-title-box">
|
|
<div class="page-title-right">
|
|
<ol class="breadcrumb m-0">
|
|
<li class="breadcrumb-item"><a href="<?= self::getUrl("Dashboard") ?>"><?= MFAPPNAME_SLUG ?></a>
|
|
</li>
|
|
<li class="breadcrumb-item active">Abwesenheitskalender</li>
|
|
</ol>
|
|
</div>
|
|
<h4 class="page-title">Abwesenheitskalender</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end page title -->
|
|
<div class="card text-center">
|
|
<div class="card-body mb-3 ">
|
|
<div class="row ">
|
|
<div class="col-12">
|
|
<div class="float-left">
|
|
<h4 class="header-title">Abwesenheitskalender</h4>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-lg-10">
|
|
|
|
<div id='calendar'></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
var hidesearch = [2, 3, 4, 8];
|
|
var columnfilter = [7];
|
|
var columnoptions = '<option value=""></option><option value="Offen">Offen</option><option value="Genehmigt">Genehmigt</option><option value="Abgelehnt">Abgelehnt</option>';
|
|
$(document).ready(function () {
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
<script type="text/javascript"
|
|
src="<?= self::getResourcePath() ?>assets/js/datatables-std.js?<?= date('U') ?>"></script>
|
|
|
|
|
|
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>
|