87 lines
3.1 KiB
Twig
87 lines
3.1 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Arbeitskalender Tim Lappe</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
.type-urlaub {
|
|
background-color: rgb(166, 199, 203);
|
|
}
|
|
.type-ftk {
|
|
background-color: rgb(0, 124, 0);
|
|
color: white;
|
|
z-index: 10;
|
|
position: relative;
|
|
}
|
|
.calendar-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 4px;
|
|
}
|
|
.calendar-day {
|
|
padding: 10px;
|
|
border: 1px solid #dee2e6;
|
|
min-height: 100px;
|
|
}
|
|
.calendar-header {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
padding: 10px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
.calendar-week {
|
|
grid-column: 1 / -1;
|
|
background-color: #f8f9fa;
|
|
padding: 5px;
|
|
text-align: left;
|
|
color: #6c757d;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5">
|
|
<h3 class="fw-bold mb-3">Arbeitskalender Tim Lappe</h3>
|
|
<div class="calendar-grid">
|
|
<div class="calendar-header">Mo</div>
|
|
<div class="calendar-header">Di</div>
|
|
<div class="calendar-header">Mi</div>
|
|
<div class="calendar-header">Do</div>
|
|
<div class="calendar-header">Fr</div>
|
|
<div class="calendar-header">Sa</div>
|
|
<div class="calendar-header">So</div>
|
|
|
|
{% set currentMonth = null %}
|
|
{% set firstDay = days|first %}
|
|
{% if firstDay.weekday > 1 %}
|
|
{% if currentMonth != firstDay.date|date('F') %}
|
|
{% set currentMonth = firstDay.date|date('F') %}
|
|
<div class="calendar-week" style="background-color: #e9ecef;">{{ firstDay.date|date('F Y') }}</div>
|
|
{% endif %}
|
|
{% for i in 1..firstDay.weekday - 1 %}
|
|
<div class="calendar-day"></div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
{% for day in days %}
|
|
{% if currentMonth != day.date|date('F') %}
|
|
{% set currentMonth = day.date|date('F') %}
|
|
<div class="calendar-week" style="background-color: #e9ecef;">{{ day.date|date('F Y') }}</div>
|
|
{% endif %}
|
|
<div class="calendar-day {{ day.class }}">
|
|
<div>{{ day.date|date('d.m.Y') }}</div>
|
|
{% if day.isFtk %}<div>FTK</div>{% endif %}
|
|
{% if day.isUrlaub %}<div>Urlaub</div>{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% if days|last.weekday < 7 %}
|
|
{% for i in days|last.weekday + 1..7 %}
|
|
<div class="calendar-day"></div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |