made bootstrap colors more flexible, styled calendar table better

lib/shift73k_web/live/shift_assign_live/index.ex

@@ -24,7 +24,6 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
     |> rotate_week()
     |> Keyword.values()
     |> Enum.map(&Timex.day_shortname/1)
-    |> IO.inspect(label: "day names...")
   end
 
   defp week_rows(cursor_date, week_start_at) do
@@ -37,12 +36,10 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
       cursor_date
       |> Timex.end_of_month()
       |> Timex.end_of_week(week_start_at)
-      |> IO.inspect(label: "last found")
 
     Interval.new(from: first, until: last, right_open: false)
     |> Enum.map(& &1)
     |> Enum.chunk_every(7)
-    |> IO.inspect(label: "week rows")
   end
 
   defp assign_day_names(socket) do
@@ -51,9 +48,7 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
   end
 
   defp assign_init_dates(socket, today) do
-    socket
-    |> assign(:current_date, today)
-    |> assign(:cursor_date, today)
+    assign(socket, [current_date: today, cursor_date: today])
   end
 
   defp assign_week_rows(socket) do
@@ -63,4 +58,25 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
     assign(socket, :week_rows, week_rows(cursor_date, week_start_at))
   end
 
+  def handle_event("prev-month", _, socket) do
+    cursor_date = Timex.shift(socket.assigns.cursor_date, months: -1)
+
+    assigns = [
+      cursor_date: cursor_date,
+      week_rows: week_rows(cursor_date, socket.assigns.current_user.week_start_at)
+    ]
+
+    {:noreply, assign(socket, assigns)}
+  end
+
+  def handle_event("next-month", _, socket) do
+    cursor_date = Timex.shift(socket.assigns.cursor_date, months: 1)
+
+    assigns = [
+      cursor_date: cursor_date,
+      week_rows: week_rows(cursor_date, socket.assigns.current_user.week_start_at)
+    ]
+
+    {:noreply, assign(socket, assigns)}
+  end
 end

lib/shift73k_web/live/shift_assign_live/index.html.leex

@@ -6,7 +6,7 @@
 <%# month navigation %>
 <div class="d-flex justify-content-between align-items-baseline mt-4">
   <h3 class="ms-4 text-muted mb-0">
-    <%= Timex.format!(@current_date, "%B %Y", :strftime) %>
+    <%= Timex.format!(@cursor_date, "%B %Y", :strftime) %>
   </h3>
   <div class="me-4">
     <a href="#" phx-click="prev-month" class="btn btn-primary">
@@ -35,11 +35,19 @@
     <%= for week <- @week_rows do %>
       <tr>
       <%= for day <- week do %>
-        <%= if Timex.compare(day, @current_date, :days) == 0 do %>
-        <td width="14%" style="height: 5rem;" class="bg-info text-white">
-        <% else %>
-        <td width="14%" style="height: 5rem;">
+        <%= 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 %>