heroweb/lib/webcomponents/calendar/templates/calendar.html
2024-09-01 20:00:13 +02:00

92 lines
6.5 KiB
HTML

<div class="widget-calendar border-black/12.5 shadow-xl dark:bg-slate-850 dark:shadow-dark-xl relative flex h-full min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border">
<div class="p-4 pb-0 rounded-t-2xl">
<h6 class="mb-0 dark:text-white">Calendar</h6>
<div class="flex">
<div class="mb-0 text-sm font-semibold leading-normal widget-calendar-day">{{ current_day }}</div>
<span>,&nbsp;</span>
<div class="mb-1 text-sm font-semibold leading-normal widget-calendar-year">{{ current_year }}</div>
</div>
</div>
<div class="flex-auto p-4">
<div data-toggle="widget-calendar" class="fc fc-media-screen fc-direction-ltr fc-theme-standard">
<div class="fc-view-harness fc-view-harness-passive">
<div class="fc-daygrid fc-dayGridMonth-view fc-view">
<table class="fc-scrollgrid">
<thead>
<tr class="fc-scrollgrid-section fc-scrollgrid-section-header">
<td>
<div class="fc-scroller-harness">
<div class="fc-scroller" style="overflow: visible;">
<table class="fc-col-header">
<colgroup></colgroup>
<tbody>
<tr>
{% for day in days_of_week %}
<th class="fc-col-header-cell fc-day">
<div class="fc-scrollgrid-sync-inner">
<a class="fc-col-header-cell-cushion">{{ day }}</a>
</div>
</th>
{% endfor %}
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</thead>
<tbody>
{% for week in calendar %}
<tr class="fc-scrollgrid-section fc-scrollgrid-section-body">
<td>
<div class="fc-scroller-harness">
<div class="fc-scroller" style="overflow: visible;">
<div class="fc-daygrid-body fc-daygrid-body-unbalanced fc-daygrid-body-natural" style="width: 484px;">
<table class="fc-scrollgrid-sync-table" style="width: 484px;">
<colgroup></colgroup>
<tbody>
<tr>
{% for day in week %}
<td class="fc-daygrid-day fc-day fc-day-{{ day.class }}" data-date="{{ day.date }}">
<div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
<div class="fc-daygrid-day-top">
<a class="fc-daygrid-day-number">{{ day.number }}</a>
</div>
<div class="fc-daygrid-day-events">
{% for event in day.events %}
<div class="fc-daygrid-event-harness">
<a class="fc-daygrid-event fc-daygrid-block-event fc-h-event fc-event fc-event-draggable fc-event-resizable fc-event-start fc-event-end fc-event-past bg-gradient-to-tl from-{{ event.color_from }} to-{{ event.color_to }}">
<div class="fc-event-main">
<div class="fc-event-main-frame">
<div class="fc-event-title-container">
<div class="fc-event-title fc-sticky">{{ event.title }}</div>
</div>
</div>
</div>
<div class="fc-event-resizer fc-event-resizer-end"></div>
</a>
</div>
{% endfor %}
</div>
<div class="fc-daygrid-day-bg"></div>
</div>
</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>