edward/agenda
1
0
Fork 0
Code Issues 16 Pull requests Packages Projects Releases Wiki Activity

Replace fullcalendar with TOAST UI Calendar

Browse source 
Fixes #146
This commit is contained in:
Edward Betts 2025-07-24 23:10:23 +01:00
parent 3dd322475f
commit 0e769c3de6
3 changed files with 240 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
agenda/calendar.py
View file

@ -2,78 +2,106 @@
import typing
from datetime import timedelta
import uuid
from .event import Event
event_type_color_map = {
"bank_holiday": "success-subtle",
"conference": "primary-subtle",
"us_holiday": "secondary-subtle",
"birthday": "info-subtle",
"waste_schedule": "danger-subtle",
# A map to associate event types with a specific calendar ID
event_type_calendar_map = {
"bank_holiday": "uk_holidays",
"conference": "conferences",
"us_holiday": "us_holidays",
"birthday": "birthdays",
"waste_schedule": "home",
"accommodation": "travel",
"market": "markets",
}
colors = {
"primary-subtle": "#cfe2ff",
"secondary-subtle": "#e2e3e5",
"success-subtle": "#d1e7dd",
"info-subtle": "#cff4fc",
"warning-subtle": "#fff3cd",
"danger-subtle": "#f8d7da",
}
# Define the calendars (categories) for TOAST UI
# These will be passed to the frontend to configure colors and names
toastui_calendars = [
{"id": "default", "name": "General", "backgroundColor": "#00a9ff"},
{"id": "uk_holidays", "name": "UK Bank Holiday", "backgroundColor": "#28a745"},
{"id": "us_holidays", "name": "US Holiday", "backgroundColor": "#6c757d"},
{"id": "conferences", "name": "Conference", "backgroundColor": "#007bff"},
{"id": "birthdays", "name": "Birthday", "backgroundColor": "#17a2b8"},
{"id": "home", "name": "Home", "backgroundColor": "#dc3545"},
{"id": "travel", "name": "Travel", "backgroundColor": "#ffc107", "color": "#000"},
{"id": "markets", "name": "Markets", "backgroundColor": "#e2e3e5", "color": "#000"},
]
def build_events(events: list[Event]) -> list[dict[str, typing.Any]]:
"""Build list of events for FullCalendar."""
def build_toastui_events(events: list[Event]) -> list[dict[str, typing.Any]]:
"""Build a list of event objects for TOAST UI Calendar."""
items: list[dict[str, typing.Any]] = []
one_day = timedelta(days=1)
for e in events:
if e.name == "today":
continue
# Determine the calendar ID for the event, defaulting if not mapped
calendar_id = event_type_calendar_map.get(e.name, "default")
# Handle special case for 'accommodation'
if e.name == "accommodation":
assert e.title and e.end_date
item = {
"allDay": True,
"title": e.title_with_emoji,
"start": e.as_date.isoformat(),
"end": (e.end_as_date + one_day).isoformat(),
"url": e.url,
}
items.append(item)
item = {
"allDay": False,
"title": "check-in: " + e.title,
"start": e.date.isoformat(),
"url": e.url,
}
items.append(item)
item = {
"allDay": False,
"title": "checkout: " + e.title,
"start": e.end_date.isoformat(),
"url": e.url,
}
items.append(item)
# All-day event for the duration of the stay
items.append(
{
"id": str(uuid.uuid4()),
"calendarId": calendar_id,
"title": e.title_with_emoji,
"start": e.as_date.isoformat(),
"end": (e.end_as_date + one_day).isoformat(),
"isAllday": True,
"raw": {"url": e.url},
}
)
# Timed event for check-in
items.append(
{
"id": str(uuid.uuid4()),
"calendarId": calendar_id,
"title": f"Check-in: {e.title}",
"start": e.date.isoformat(),
"end": (e.date + timedelta(hours=1)).isoformat(),
"isAllday": False,
"raw": {"url": e.url},
}
)
# Timed event for check-out
items.append(
{
"id": str(uuid.uuid4()),
"calendarId": calendar_id,
"title": f"Checkout: {e.title}",
"start": e.end_date.isoformat(),
"end": (e.end_date + timedelta(hours=1)).isoformat(),
"isAllday": False,
"raw": {"url": e.url},
}
)
continue
# Handle all other events
start_iso = e.date.isoformat()
if e.has_time:
end = e.end_date or e.date + timedelta(minutes=30)
end_iso = (e.end_date or e.date + timedelta(minutes=30)).isoformat()
else:
end = (e.end_as_date if e.end_date else e.as_date) + one_day
end_date = (e.end_as_date if e.end_date else e.as_date) + one_day
end_iso = end_date.isoformat()
item = {
"allDay": not e.has_time,
"id": str(uuid.uuid4()),
"calendarId": calendar_id,
"title": e.title_with_emoji,
"start": e.date.isoformat(),
"end": end.isoformat(),
"start": start_iso,
"end": end_iso,
"isAllday": not e.has_time,
}
if e.name in event_type_color_map:
item["color"] = colors[event_type_color_map[e.name]]
item["textColor"] = "black"
if e.url:
item["url"] = e.url
item["raw"] = {"url": e.url}
items.append(item)
return items

234
templates/calendar.html
View file

@ -7,69 +7,18 @@
<link href="{{ url_for("static", filename="bootstrap5/css/bootstrap.min.css") }}" rel="stylesheet">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📅</text></svg>">
<script async src="{{ url_for("static", filename="es-module-shims/es-module-shims.js") }}"></script>
<script type='importmap'>
{
"imports": {
"@fullcalendar/core": "https://cdn.skypack.dev/@fullcalendar/core@6.1.9",
"@fullcalendar/daygrid": "https://cdn.skypack.dev/@fullcalendar/daygrid@6.1.9",
"@fullcalendar/timegrid": "https://cdn.skypack.dev/@fullcalendar/timegrid@6.1.9",
"@fullcalendar/list": "https://cdn.skypack.dev/@fullcalendar/list@6.1.9",
"@fullcalendar/core/locales/en-gb": "https://cdn.skypack.dev/@fullcalendar/core@6.1.9/locales/en-gb"
}
}
</script>
<script type='module'>
import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list'
import gbLocale from '@fullcalendar/core/locales/en-gb';
// Function to save the current view to local storage
function saveView(view) {
localStorage.setItem('fullCalendarDefaultView', view);
}
// Function to get the saved view from local storage
function getSavedView() {
return localStorage.getItem('fullCalendarDefaultView') || 'dayGridMonth';
}
document.addEventListener('DOMContentLoaded', function() {
const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
locale: gbLocale,
plugins: [dayGridPlugin, timeGridPlugin, listPlugin ],
themeSystem: 'bootstrap5',
firstDay: 1,
initialView: getSavedView(),
viewDidMount: function(info) {
saveView(info.view.type);
},
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
nowIndicator: true,
weekNumbers: true,
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
hour12: false,
},
events: {{ fullcalendar_events | tojson(indent=2) }},
eventDidMount: function(info) {
info.el.title = info.event.title;
},
})
calendar.render()
})
</script>
<!-- TOAST UI Calendar CSS -->
<link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />
<style>
/* Custom styles to better integrate with Bootstrap */
.toastui-calendar-layout {
border: 1px solid #dee2e6;
border-radius: 0.375rem;
}
#calendar-header {
margin-bottom: 1rem;
}
</style>
</head>
{% set event_labels = {
@ -91,16 +40,6 @@
}
%}
{%set class_map = {
"bank_holiday": "bg-success-subtle",
"conference": "bg-primary-subtle",
"us_holiday": "bg-secondary-subtle",
"birthday": "bg-info-subtle",
"waste_schedule": "bg-danger-subtle",
} %}
{% from "navbar.html" import navbar with context %}
<body>
{{ navbar() }}
@ -108,7 +47,7 @@
<div class="container-fluid mt-2">
<h1>Agenda</h1>
<p>
<a href="/tools">&larr; personal tools</a>
<a href="/tools">← personal tools</a>
</p>
{% if errors %}
@ -126,8 +65,25 @@
| <a href="{{ url_for(request.endpoint, markets="hide") }}">Hide all</a>
</div>
<div class="mb-3" id="calendar"></div>
<!-- Header for calendar controls -->
<div id="calendar-header" class="d-flex justify-content-between align-items-center mt-3">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" id="prevBtn">Prev</button>
<button type="button" class="btn btn-primary" id="nextBtn">Next</button>
<button type="button" class="btn btn-outline-primary" id="todayBtn">Today</button>
</div>
<h3 id="calendar-title" class="mb-0"></h3>
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-primary" id="monthViewBtn">Month</button>
<button type="button" class="btn btn-outline-primary" id="weekViewBtn">Week</button>
<button type="button" class="btn btn-outline-primary" id="dayViewBtn">Day</button>
</div>
</div>
<div class="mb-3" id="calendar" style="height: 80vh;"></div>
{#
<div class="mt-2">
<h5>Page generation time</h5>
<ul>
@ -137,11 +93,137 @@
{% for name, seconds in timings %}
<li>{{ name }} took {{ "%.1f" | format(seconds) }} seconds</li>
{% endfor %}
</ul>
</div>
#}
</div>
<!-- TOAST UI Calendar JS -->
<script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>
<script src="{{ url_for("static", filename="bootstrap5/js/bootstrap.bundle.min.js") }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const Calendar = tui.Calendar;
const container = document.getElementById('calendar');
// --- Configuration ---
const calendars = {{ toastui_calendars | tojson }};
const events = {{ toastui_events | tojson }};
function getSavedView() {
return localStorage.getItem('toastUiCalendarDefaultView') || 'month';
}
function saveView(view) {
localStorage.setItem('toastUiCalendarDefaultView', view);
}
const options = {
defaultView: getSavedView(),
useDetailPopup: true,
useCreationPopup: false,
calendars: calendars,
week: {
startDayOfWeek: 1, // Monday
taskView: false,
eventView: ['time'],
showNowIndicator: true,
},
month: {
startDayOfWeek: 1, // Monday
// We've removed `visibleWeeksCount: 6` to allow the calendar
// to dynamically show 4, 5, or 6 weeks as needed.
},
timezone: {
zones: [{
timezoneName: Intl.DateTimeFormat().resolvedOptions().timeZone
}]
},
template: {
allday(event) {
return `<span title="${event.title}">${event.title}</span>`;
},
time(event) {
return `<span title="${event.title}">${event.title}</span>`;
},
},
};
const calendar = new Calendar(container, options);
calendar.createEvents(events);
// --- Event Handlers ---
calendar.on('clickEvent', ({ event }) => {
if (event.raw && event.raw.url) {
window.open(event.raw.url, '_blank');
}
});
calendar.on('afterRenderEvent', () => {
const currentView = calendar.getViewName();
saveView(currentView);
updateCalendarTitle();
});
// --- UI Control Logic ---
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const todayBtn = document.getElementById('todayBtn');
const monthViewBtn = document.getElementById('monthViewBtn');
const weekViewBtn = document.getElementById('weekViewBtn');
const dayViewBtn = document.getElementById('dayViewBtn');
const calendarTitle = document.getElementById('calendar-title');
function updateCalendarTitle() {
const tzDate = calendar.getDate();
const nativeDate = tzDate.toDate();
const year = nativeDate.getFullYear();
const monthName = nativeDate.toLocaleDateString('en-GB', { month: 'long' });
calendarTitle.textContent = `${monthName} ${year}`;
}
// --- CORRECTED NAVIGATION LOGIC ---
prevBtn.addEventListener('click', () => {
const currentDate = calendar.getDate().toDate();
// Go to the previous month
currentDate.setMonth(currentDate.getMonth() - 1);
// **Crucially, set the day to the 1st to align the view**
currentDate.setDate(1);
calendar.setDate(currentDate);
updateCalendarTitle();
});
nextBtn.addEventListener('click', () => {
const currentDate = calendar.getDate().toDate();
// Go to the next month
currentDate.setMonth(currentDate.getMonth() + 1);
// **Crucially, set the day to the 1st to align the view**
currentDate.setDate(1);
calendar.setDate(currentDate);
updateCalendarTitle();
});
todayBtn.addEventListener('click', () => {
calendar.today();
updateCalendarTitle();
});
monthViewBtn.addEventListener('click', () => calendar.changeView('month'));
weekViewBtn.addEventListener('click', () => calendar.changeView('week'));
dayViewBtn.addEventListener('click', () => calendar.changeView('day'));
// Initial setup
updateCalendarTitle();
});
</script>
</body>
</html>

6
web_view.py
View file

@ -107,7 +107,6 @@ async def index() -> str:
events=events,
get_country=agenda.get_country,
current_trip=get_current_trip(today),
fullcalendar_events=calendar.build_events(events),
start_event_list=date.today() - timedelta(days=1),
end_event_list=date.today() + timedelta(days=365 * 2),
render_time=(time.time() - t0),
@ -129,11 +128,13 @@ async def calendar_page() -> str:
if markets_arg != "show":
agenda.data.hide_markets_while_away(events, data["accommodation_events"])
# Use the new function to build events and pass both calendars and events
return flask.render_template(
"calendar.html",
today=now.date(),
events=events,
fullcalendar_events=calendar.build_events(events),
toastui_events=calendar.build_toastui_events(events),
toastui_calendars=calendar.toastui_calendars,
**data,
)
@ -374,6 +375,7 @@ def past_conference_list() -> str:
fx_rate=agenda.fx.get_rates(app.config),
)
@app.route("/accommodation")
def accommodation_list() -> str:
"""Page showing a list of past, present and future accommodation."""