132 lines
5.4 KiB
HTML
132 lines
5.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Calendar{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<h1>Calendar</h1>
|
|
|
|
<p>View Mode: {{ view_mode }}</p>
|
|
<p>Current Date: {{ current_date }}</p>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div class="btn-group">
|
|
<a href="/calendar?view=day" class="btn btn-outline-primary">Day</a>
|
|
<a href="/calendar?view=month" class="btn btn-outline-primary">Month</a>
|
|
<a href="/calendar?view=year" class="btn btn-outline-primary">Year</a>
|
|
</div>
|
|
<a href="/calendar/new" class="btn btn-success">
|
|
<i class="bi bi-plus-circle"></i> Create New Event
|
|
</a>
|
|
</div>
|
|
|
|
{% if view_mode == "month" %}
|
|
<h2>Month View: {{ month_name }} {{ current_year }}</h2>
|
|
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Sun</th>
|
|
<th>Mon</th>
|
|
<th>Tue</th>
|
|
<th>Wed</th>
|
|
<th>Thu</th>
|
|
<th>Fri</th>
|
|
<th>Sat</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for week in range(start=0, end=6) %}
|
|
<tr>
|
|
{% for day_idx in range(start=0, end=7) %}
|
|
<td>
|
|
{% set idx = week * 7 + day_idx %}
|
|
{% if idx < calendar_days|length %}
|
|
{% set day = calendar_days[idx] %}
|
|
{% if day.day > 0 %}
|
|
{{ day.day }}
|
|
{% endif %}
|
|
{% endif %}
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% elif view_mode == "year" %}
|
|
<h2>Year View: {{ current_year }}</h2>
|
|
|
|
<div class="row">
|
|
{% for month in months %}
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card">
|
|
<div class="card-header">{{ month.name }}</div>
|
|
<div class="card-body">
|
|
<p>Events: {{ month.events|length }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% elif view_mode == "day" %}
|
|
<h2>Day View: {{ current_date }}</h2>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header bg-primary text-white">
|
|
All Day Events
|
|
</div>
|
|
<div class="card-body">
|
|
{% if events is defined and events|length > 0 %}
|
|
{% for event in events %}
|
|
{% if event.all_day %}
|
|
<div class="alert" style="background-color: {{ event.color }}; color: white;">
|
|
<h5>{{ event.title }}</h5>
|
|
<p>{{ event.description }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="text-muted">No all-day events</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list-group">
|
|
{% for hour in range(start=0, end=24) %}
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="pe-3" style="width: 60px; text-align: right;">
|
|
<strong>{{ "%02d"|format(value=hour) }}:00</strong>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
{% if events is defined and events|length > 0 %}
|
|
{% for event in events %}
|
|
{% if not event.all_day %}
|
|
{% set start_hour = event.start_time|date(format="%H") %}
|
|
{% if start_hour == hour|string %}
|
|
<div class="alert mb-2" style="background-color: {{ event.color }}; color: white;">
|
|
<h5>{{ event.title }}</h5>
|
|
<p>{{ event.start_time|date(format="%H:%M") }} - {{ event.end_time|date(format="%H:%M") }}</p>
|
|
<p>{{ event.description }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Floating Action Button (FAB) for creating new events -->
|
|
<a href="/calendar/new" class="position-fixed bottom-0 end-0 m-4 btn btn-primary rounded-circle shadow" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 24px;">
|
|
<i class="bi bi-plus"></i>
|
|
</a>
|
|
</div>
|
|
|
|
{% block extra_css %}
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
|
{% endblock %}
|
|
{% endblock %} |