Files
myep/templates/components/calendar/grid.html.twig
T

57 lines
2.8 KiB
Twig

<div class="grid grid-cols-3 gap-8 mb-4">
{% for month in months %}
<div>
<div class="text-sm font-semibold text-center mb-2">{{ month.label }}</div>
<div class="grid grid-cols-7 rounded-md overflow-hidden ring-1 ring-gray-300">
{% for header in ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'] %}
<div class="text-center text-xs text-gray-400 font-medium py-1 bg-gray-50 border-r border-b border-gray-200">{{ header }}</div>
{% endfor %}
{% if month.firstDow > 0 %}
{% for i in 1..month.firstDow %}
<div class="h-8 border-r border-b border-gray-200 bg-gray-50/40"></div>
{% endfor %}
{% endif %}
{% for dayNum, day in month.days %}
<div class="{{ html_classes('h-8 flex flex-col items-center justify-between py-1 border-r border-b border-gray-200 cursor-default', { 'bg-secondary/25': day.isToday }) }}"
{% if day.tooltip %}{{ stimulus_controller('tooltip', {'content': day.tooltip}) }}{% endif %}
>
<span class="text-xs text-gray-700 leading-none">{{ dayNum }}</span>
<div class="flex gap-px">
{% if day.hasPrice %}
<span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
{% endif %}
{% if day.hasBoard %}
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
{% endif %}
{% if day.hasAdditional %}
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
{% endif %}
{% if day.isBlocked %}
<span class="w-1.5 h-1.5 rounded-full bg-red-500"></span>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
<div class="flex justify-around items-center gap-6 mb-4 text-sm text-gray-600">
<div class="flex items-center gap-1.5">
<span class="inline-block w-3 h-3 rounded-full bg-blue-500"></span> Preiskonfigurationen
</div>
<div class="flex items-center gap-1.5">
<span class="inline-block w-3 h-3 rounded-full bg-green-500"></span> Verpflegungsleistungen
</div>
<div class="flex items-center gap-1.5">
<span class="inline-block w-3 h-3 rounded-full bg-amber-500"></span> optionale Zusatzleistungen
</div>
<div class="flex items-center gap-1.5">
<span class="inline-block w-3 h-3 rounded-full bg-red-500"></span> nicht verfügbar
</div>
</div>