87 lines
4.8 KiB
HTML
87 lines
4.8 KiB
HTML
<div class="md:p-8 p-5 dark:bg-gray-800 bg-white rounded-t">
|
|
<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>
|
|
<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">
|
|
<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">
|
|
<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">
|
|
{% if d.is_current_date %}
|
|
<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="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-500 hover:bg-indigo-500 text-base w-8 h-8 flex items-center justify-center font-medium text-white bg-indigo-700 rounded-full">{{
|
|
d.day_of_month }}</a>
|
|
</div>
|
|
</div>
|
|
{% elif d.is_workout %}
|
|
<div class="flex items-center justify-center w-full rounded-full cursor-pointer"><a role="link"
|
|
tabindex="0"
|
|
class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-200 hover:bg-indigo-200 text-base w-8 h-8 flex items-center justify-center font-medium border border-indigo-700 rounded-full">{{
|
|
d.day_of_month }}</a>
|
|
</div>
|
|
{% else %}
|
|
{{ d.day_of_month }}
|
|
{% endif %}
|
|
|
|
</p>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div> |