Ayobami
61 lines
2.0 KiB
Plaintext
61 lines
2.0 KiB
Plaintext
<%- include('partials/header') %>
|
|
<div class="calendar-container">
|
|
<div class="calendar-header">Calendar</div>
|
|
<div class="calendar-content">
|
|
<div class="calendar-labels">
|
|
<div class="calendar-label-main">Pick a date and time</div>
|
|
<div class="calendar-label-duration">Duration: <span>1 hour</span></div>
|
|
<div class="calendar-label-timezone">
|
|
Your timezone: <%= selectedTimezone %> <a href="/timezone">(Change)</a>
|
|
</div>
|
|
</div>
|
|
<div class="calendar-table-wrapper">
|
|
<table class="calendar-table">
|
|
<thead>
|
|
<tr>
|
|
<% weekDays.forEach(function(day) { %>
|
|
<th>
|
|
<div class="calendar-day-label"><%= day.label %></div>
|
|
<div class="calendar-date-label"><%= day.date %></div>
|
|
</th>
|
|
<% }) %>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% for (let i = 0; i < maxSlots; i++) { %>
|
|
<tr>
|
|
<% weekDays.forEach(function(day) { %>
|
|
<td>
|
|
<% if (day.slots[i]) { %>
|
|
<form action="/book" method="get">
|
|
<input type="hidden" name="date" value="<%= day.dateISO %>" />
|
|
<input type="hidden" name="time" value="<%= day.slots[i] %>" />
|
|
<input
|
|
type="hidden"
|
|
name="tz"
|
|
value="<%= selectedTimezone %>"
|
|
/>
|
|
<button class="calendar-slot-btn"><%= day.slots[i] %></button>
|
|
</form>
|
|
<% } %>
|
|
</td>
|
|
<% }) %>
|
|
</tr>
|
|
<% } %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="calendar-week-nav">
|
|
<% if (showPrevWeek) { %>
|
|
<a href="/calendar?tz=<%= selectedTimezone %>&week=<%= prevWeek %>"
|
|
>Previous Week</a
|
|
>
|
|
<% } %>
|
|
<a href="/calendar?tz=<%= selectedTimezone %>&week=<%= nextWeek %>"
|
|
>Next Week</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%- include('partials/footer') %>
|