Combine month and year templates and add basic date/view change interactivity

This commit is contained in:
Peter Stockings
2022-12-03 13:43:01 +11:00
parent 467f50cc44
commit 70310747aa
2 changed files with 424 additions and 12 deletions

View File

@@ -4,7 +4,7 @@
<div class="flex">
<div class="flex ml-6">
<button hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-vals='{"date": "{{ previous_date }}"}' hx-include="[name='view']">
hx-vals='{"date": "{{ previous_date }}"}' hx-include="[name='view']" hx-push-url="true">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke:currentColor;">
@@ -13,7 +13,7 @@
</svg>
</button>
<button hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-vals='{"date": "{{ next_date }}"}' hx-include="[name='view']">
hx-vals='{"date": "{{ next_date }}"}' hx-include="[name='view']" hx-push-url="true">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke:currentColor;">
@@ -22,16 +22,23 @@
</svg>
</button>
</div>
{% if selected_view == 'month' %}
<h2 class="ml-2 text-xl font-bold leading-none">{{ strftime(selected_date, '%B, %Y') }}</h2>
{% else %}
<h2 class="ml-2 text-xl font-bold leading-none">{{ strftime(selected_date, '%Y') }}</h2>
{% endif %}
</div>
<select
class="block appearance-none w-40 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 mr-5"
name="view">
<option value="month">Month</option>
<option value="year">Year</option>
name="view" hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-vals='{"date": "{{ selected_date }}"}' hx-push-url="true">
<option value="month" {% if selected_view=='month' %}selected{% endif %}>Month</option>
<option value="year" {% if selected_view=='year' %}selected{% endif %}>Year</option>
</select>
</div>
</div>
{% if selected_view == 'month' %}
<div class="flex flex-col px-2 py-2 -mb-px">
<div class="grid grid-cols-7 pl-2 pr-2">
@@ -428,4 +435,416 @@
</div>
{% elif selected_view == 'year'%}
<div class="flex px-2 py-2 -mb-px">
<div class="flex flex-wrap bg-white overflow-hidden">
<div class="w-auto mx-3 my-3 border-solid border-grey-light rounded border shadow-sm">
<div class="bg-grey-lighter px-2 py-2 border-solid border-grey-light border-b text-center">December 2018
</div>
<div class="">
<table class="w-full">
<tbody>
<tr class="border-b">
<th class="py-3 px-4">S</th>
<th class="py-3 px-4">M</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">W</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">F</th>
<th class="py-3 px-4">S</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">1</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">2</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">3</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">4</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">5</td>
<td
class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer bg-blue text-white">
6</td>
<td
class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer bg-blue text-white">
7</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">8</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">9</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">10</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">11</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">12</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">13</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">14</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">15</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">16</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">17</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">18</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">19</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">20</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">21</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">22</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">23</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">24</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">25</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">26</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">27</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">28</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">29</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">30</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-auto mx-3 my-3 border-solid border-grey-light rounded border shadow-sm">
<div class="bg-grey-lighter px-2 py-2 border-solid border-grey-light border-b text-center">January 2019
</div>
<div class="">
<table class="w-full">
<tbody>
<tr class="border-b">
<th class="py-3 px-4">S</th>
<th class="py-3 px-4">M</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">W</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">F</th>
<th class="py-3 px-4">S</th>
</tr>
<tr>
<td></td>
<td></td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">1</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">2</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">3</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">4</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">5</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">6</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">7</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">8</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">9</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">10</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">11</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">12</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">13</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">14</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">15</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">16</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">17</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">18</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">19</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">20</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">21</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">22</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">23</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">24</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">25</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">26</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">27</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">28</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">29</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">30</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">31</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-auto mx-3 my-3 border-solid border-grey-light rounded border shadow-sm">
<div class="bg-grey-lighter px-2 py-2 border-solid border-grey-light border-b text-center">February 2019
</div>
<div class="">
<table class="w-full">
<tbody>
<tr class="border-b">
<th class="py-3 px-4">S</th>
<th class="py-3 px-4">M</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">W</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">F</th>
<th class="py-3 px-4">S</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">1</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">2</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">3</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">4</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">5</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">6</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">7</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">8</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">9</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">10</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">11</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">12</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">13</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">14</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">15</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">16</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">17</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">18</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">19</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">20</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">21</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">22</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">23</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">24</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">25</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">26</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">27</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">28</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-auto mx-3 my-3 border-solid border-grey-light rounded border shadow-sm">
<div class="bg-grey-lighter px-2 py-2 border-solid border-grey-light border-b text-center">March 2019
</div>
<div class="">
<table class="w-full">
<tbody>
<tr class="border-b">
<th class="py-3 px-4">S</th>
<th class="py-3 px-4">M</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">W</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">F</th>
<th class="py-3 px-4">S</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">1</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">2</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">3</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">4</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">5</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">6</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">7</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">8</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">9</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">10</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">11</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">12</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">13</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">14</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">15</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">16</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">17</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">18</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">19</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">20</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">21</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">22</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">23</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">24</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">25</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">26</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">27</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">28</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">29</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">30</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-auto mx-3 my-3 border-solid border-grey-light rounded border shadow-sm">
<div class="bg-grey-lighter px-2 py-2 border-solid border-grey-light border-b text-center">April 2019
</div>
<div class="">
<table class="w-full">
<tbody>
<tr class="border-b">
<th class="py-3 px-4">S</th>
<th class="py-3 px-4">M</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">W</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">F</th>
<th class="py-3 px-4">S</th>
</tr>
<tr>
<td></td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">1</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">2</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">3</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">4</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">5</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">6</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">7</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">8</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">9</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">10</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">11</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">12</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">13</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">14</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">15</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">16</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">17</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">18</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">19</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">20</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">21</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">22</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">23</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">24</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">25</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">26</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">27</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">28</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">29</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">30</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-auto mx-3 my-3 border-solid border-grey-light rounded border shadow-sm">
<div class="bg-grey-lighter px-2 py-2 border-solid border-grey-light border-b text-center">May 2019
</div>
<div class="">
<table class="w-full">
<tbody>
<tr class="border-b">
<th class="py-3 px-4">S</th>
<th class="py-3 px-4">M</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">W</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">F</th>
<th class="py-3 px-4">S</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">1</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">2</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">3</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">4</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">5</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">6</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">7</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">8</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">9</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">10</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">11</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">12</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">13</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">14</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">15</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">16</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">17</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">18</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">19</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">20</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">21</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">22</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">23</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">24</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">25</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">26</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">27</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">28</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">29</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">30</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">31</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endif %}
</div>