69 lines
3.7 KiB
HTML
69 lines
3.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="de">
|
||
|
|
<head>
|
||
|
|
{#- TODO: replace with locally served files #}
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="{{ url_for('static', path='style.css') }}" type="text/css"/>
|
||
|
|
<link rel="stylesheet" href="{{ url_for('static', path='roboto.css') }}" type="text/css"/>
|
||
|
|
<title>Embeddable calendar</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body{% if max_width %} style="max-width: {{ max_width }}"{% endif %}>
|
||
|
|
<div class="calendar">
|
||
|
|
{% for start_date, events in grouped_events[:3] %}
|
||
|
|
<div class="calendar-date">
|
||
|
|
<div class="calendar-date-date">
|
||
|
|
<div class="calendar-date-month">
|
||
|
|
{{ start_date.strftime("%b") }}
|
||
|
|
</div>
|
||
|
|
<div class="calendar-date-day">
|
||
|
|
{{ start_date.strftime("%d") }}
|
||
|
|
</div>
|
||
|
|
<div class="calendar-date-weekday">
|
||
|
|
{{ start_date.strftime("%a") }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="calendar-events">
|
||
|
|
{% for event in events %}
|
||
|
|
<div class="calendar-event" title="{{ event.summary }}{% if event.description %} — {{ event.description }}{% endif %}">
|
||
|
|
<div class="calendar-event-time">
|
||
|
|
<div class="calendar-event-starttime">{{ event.start.strftime("%H:%M") }}</div>
|
||
|
|
<div class="calendar-event-timesep"></div>
|
||
|
|
<div class="calendar-event-endtime">{{ event.end.strftime("%H:%M") }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="calendar-event-description">
|
||
|
|
{% if event.description or event.location %}
|
||
|
|
<details class="calendar-event-details">
|
||
|
|
<summary>{{ event.summary }}</summary>
|
||
|
|
<div class="calendar-popover-content">
|
||
|
|
{% if event.description %}
|
||
|
|
<div class="calendar-popover-entry">
|
||
|
|
{#- description doesn't need an icon, just wastes space #}
|
||
|
|
<div class="calendar-popover-entry-text">{{ event.description }}</div>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
{% if event.location %}
|
||
|
|
<div class="calendar-popover-entry">
|
||
|
|
<div class="calendar-popover-entry-icon"><i class="fa-solid fa-location-dot"></i></div>
|
||
|
|
<div class="calendar-popover-entry-text">{{ event.location }}</div>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
{% else %}
|
||
|
|
<span>{{ event.summary }}</span>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
<div class="calendar-event-type" style="background-color: {{ event.color }};"></div>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|