Zeiterfassung update
* Kalender Implementation * Dienstreise Funktionalitäten
This commit is contained in:
Spitzer Daniel
244
Layout/default/TimerecordingCalendar/Index.php
Normal file
244
Layout/default/TimerecordingCalendar/Index.php
Normal file
@@ -0,0 +1,244 @@
|
||||
<?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-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;
|
||||
}
|
||||
</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>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let requestUrl = "<?= self::getUrl("TimerecordingReport", "api", ['do' => 'getTimerecordings', 'datatype' => '3', 'datayear' => time()]) ?>";
|
||||
var cindex = 1;
|
||||
var holiDays = [];
|
||||
<?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 ?>'
|
||||
});
|
||||
<?php
|
||||
$counter++;
|
||||
endforeach;
|
||||
?>
|
||||
cindex = <?= $counter ?>;
|
||||
console.log(holiDays);
|
||||
$.getJSON(requestUrl, function (data) {
|
||||
|
||||
}).done(function (json) {
|
||||
var bgcolors = ['rgba(251, 71, 71,0.2)', 'rgba(253, 126, 20, 0.25)', 'rgba(91, 71, 251, 0.2)', 'rgba(71, 251, 151, 0.2)', 'rgba(251, 71, 194, 0.2)', 'rgba(20, 251, 253, 0.25)'];
|
||||
//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 > 5) {
|
||||
colorcount = 0;
|
||||
}
|
||||
oldname = value.user.user;
|
||||
}
|
||||
holidays.push({
|
||||
id: cindex,
|
||||
backgroundColor: bgcolors[colorcount],
|
||||
start: value.cstart.cstart,
|
||||
end: value.cend.cend,
|
||||
title: value.category.category + " " + value.user.user,
|
||||
description: value.category.category + " " + value.user.user
|
||||
});
|
||||
oldname = value.user.user;
|
||||
cindex++;
|
||||
});
|
||||
|
||||
console.log(holidays);
|
||||
|
||||
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 birthdayEvents = {
|
||||
id: 1,
|
||||
backgroundColor: 'rgba(255, 0, 0 , 1)',
|
||||
borderColor: 'rgba(255, 0, 0 , 1)',
|
||||
textColor: '#fff',
|
||||
events: holiDays
|
||||
|
||||
};
|
||||
|
||||
|
||||
var holidayEvents = {
|
||||
id: 5,
|
||||
backgroundColor: 'rgba(0,204,204,.25)',
|
||||
borderColor: 'rgb(192 0 255)',
|
||||
textColor: '#000',
|
||||
events: holidays
|
||||
};
|
||||
|
||||
|
||||
var initialLocaleCode = 'en';
|
||||
var calendarEl = document.getElementById('calendar');
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
locale: 'de',
|
||||
headerToolbar: {
|
||||
left: "prev,today,next",
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
|
||||
},
|
||||
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: [holidayEvents, birthdayEvents]
|
||||
});
|
||||
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"); ?>
|
||||
Reference in New Issue
Block a user