84 lines
4.8 KiB
HTML
84 lines
4.8 KiB
HTML
<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">{{
|
|
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"
|
|
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=""
|
|
style="--darkreader-inline-stroke: currentColor;">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" data-darkreader-inline-stroke=""
|
|
style="--darkreader-inline-stroke: none;"></path>
|
|
<polyline points="15 6 9 12 15 18"></polyline>
|
|
</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"
|
|
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=""
|
|
style="--darkreader-inline-stroke: currentColor;">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" data-darkreader-inline-stroke=""
|
|
style="--darkreader-inline-stroke: none;"></path>
|
|
<polyline points="9 6 15 12 9 18"></polyline>
|
|
</svg>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col pt-6">
|
|
<div class="grid grid-cols-7">
|
|
<div class="py-3 px-4">
|
|
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Su</p>
|
|
</div>
|
|
<div class="py-3 px-4">
|
|
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Mo</p>
|
|
</div>
|
|
<div class="py-3 px-4">
|
|
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Tu</p>
|
|
</div>
|
|
<div class="py-3 px-4">
|
|
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">We</p>
|
|
</div>
|
|
<div class="py-3 px-4">
|
|
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Th</p>
|
|
</div>
|
|
<div class="py-3 px-4">
|
|
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Fr</p>
|
|
</div>
|
|
<div class="py-3 px-4">
|
|
<p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Sa</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-7 overflow-hidden flex-1 w-full">
|
|
{% for d in calendar_month.days_of_month %}
|
|
<div class="py-3 px-4">
|
|
<p
|
|
class="text-base {% if d.is_current_month %} text-gray-500 {% else %} text-gray-300 {% endif %} dark:text-gray-100 font-medium text-center">
|
|
<div class="w-full h-full">
|
|
<div class="flex items-center justify-center w-full rounded-full cursor-pointer">
|
|
<a role="link" tabindex="0"
|
|
class="{% if d.is_workout %}focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-500 hover:bg-indigo-500{% endif %} {% if d.is_current_date %}bg-indigo-700{% elif d.is_workout %}bg-indigo-300{% endif %} text-base w-8 h-8 px-2 flex items-center justify-center font-medium text-white rounded-full">{{
|
|
d.day_of_month }}</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</p>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div> |