111 lines
4.4 KiB
Twig
111 lines
4.4 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 currentWeek = null %}
|
|
|
|
{% for day in days %}
|
|
{# Check if month changed #}
|
|
{% if currentMonth != day.date|date('F Y') %}
|
|
{% set currentMonth = day.date|date('F Y') %}
|
|
<div class="calendar-week" style="background-color: #e9ecef;">{{ day.date|date('F Y') }}</div>
|
|
|
|
{# Add empty cells for first row of month #}
|
|
{% set dayWeekday = day.weekday %}
|
|
{% if dayWeekday > 1 %}
|
|
{% for i in 1..dayWeekday-1 %}
|
|
<div class="calendar-day"></div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{# Check if week changed #}
|
|
{% if currentWeek != day.weekNumber %}
|
|
{% set currentWeek = day.weekNumber %}
|
|
{% if day.weekday > 1 and not loop.first and currentMonth == day.date|date('F Y') %}
|
|
{# If it's not the first day overall and not the first day of a month, but it's the first day of a week #}
|
|
{% for i in 1..day.weekday-1 %}
|
|
<div class="calendar-day"></div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{# Render the day #}
|
|
<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>
|
|
|
|
{# After the last day of a month, fill remaining days in the week #}
|
|
{% set nextDay = days[loop.index] is defined ? days[loop.index] : null %}
|
|
{% if nextDay and nextDay.date|date('F Y') != day.date|date('F Y') %}
|
|
{% if day.weekday < 7 %}
|
|
{% for i in day.weekday+1..7 %}
|
|
<div class="calendar-day"></div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{# After the very last day, fill remaining days in the week #}
|
|
{% if loop.last and day.weekday < 7 %}
|
|
{% for i in day.weekday+1..7 %}
|
|
<div class="calendar-day"></div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |