<h2 class="mb-3 mb-sm-0"> <%= icon_div @socket, "bi-calendar3", [class: "icon baseline"] %> Assign Shift To Dates </h2> <%# month navigation %> <div class="d-flex justify-content-between align-items-baseline mt-4"> <h3 class="ms-4 text-muted mb-0"> <%= Timex.format!(@cursor_date, "%B %Y", :strftime) %> </h3> <div class="me-4"> <a href="#" phx-click="prev-month" class="btn btn-primary"> <%= icon_div @socket, "bi-chevron-left", [class: "icon baseline"] %> Prev </a> <a href="#" phx-click="next-month" class="btn btn-primary"> Next <%= icon_div @socket, "bi-chevron-right", [class: "icon baseline"] %> </a> </div> </div> <%# calendar month table display %> <table class="table table-rounded shadow mt-3"> <thead> <tr> <%= for {day_name, _i} <- Enum.with_index(@day_names) do %> <th width="14%"> <%= day_name %> </th> <% end %> </tr> </thead> <tbody> <%= for week <- @week_rows do %> <tr> <%= for day <- week do %> <%= cond do %> <% Timex.compare(day, @current_date, :days) == 0 -> %> <td width="14%" style="height: 6rem;" class="bg-info text-white"> <% day.month != @cursor_date.month -> %> <td width="14%" style="height: 6rem;" class="bg-light text-gray"> <% true -> %> <td width="14%" style="height: 6rem;"> <% end %> <%= Timex.format!(day, "%d", :strftime) %> </td> <% end %> </tr> <% end %> </tbody> </table>