Allow user to browse next/prev month on calendar

This commit is contained in:
Peter Stockings
2023-10-13 17:27:06 +11:00
parent 1dccd85711
commit cd03256245
3 changed files with 89 additions and 68 deletions

View File

@@ -1,10 +1,13 @@
<div class="md:p-8 p-5 dark:bg-gray-800 bg-white rounded-t">
<div class="md:p-8 p-5 dark:bg-gray-800 bg-white rounded-t" id="monthly-calendar-{{ user_id }}">
<div class="px-4 flex items-center justify-between">
<span tabindex="0" class="focus:outline-none text-base font-bold dark:text-gray-100 text-gray-800">October
2020</span>
<span tabindex="0" class="focus:outline-none text-base font-bold dark:text-gray-100 text-gray-800">{{
calendar_month.month_year }}</span>
<div class="flex items-center">
<button aria-label="calendar backward"
class="focus:text-gray-400 hover:text-gray-400 text-gray-800 dark:text-gray-100">
class="focus:text-gray-400 hover:text-gray-400 text-gray-800 dark:text-gray-100"
hx-get="{{ url_for('calendar_view', user_id=user_id) }}"
hx-vals='{"date": "{{ calendar_month.previous_month }}"}' hx-target="#monthly-calendar-{{ user_id }}"
hx-swap="outerHTML">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24"
height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke=""
@@ -15,7 +18,10 @@
</svg>
</button>
<button aria-label="calendar forward"
class="focus:text-gray-400 hover:text-gray-400 ml-3 text-gray-800 dark:text-gray-100">
class="focus:text-gray-400 hover:text-gray-400 ml-3 text-gray-800 dark:text-gray-100"
hx-get="{{ url_for('calendar_view', user_id=user_id) }}"
hx-vals='{"date": "{{ calendar_month.next_month }}"}' hx-target="#monthly-calendar-{{ user_id }}"
hx-swap="outerHTML">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24"
height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke=""

View File

@@ -63,7 +63,7 @@
</button>
</h2>
<div class="!visible collapse p-4 hidden">
{{ render_partial('partials/calendar.html', calendar_month=u.calendar_month) }}
{{ render_partial('partials/calendar.html', calendar_month=u.calendar_month, user_id = u.id) }}
<ol class="relative border-l border-gray-200 dark:border-gray-700">