Show n weeks before and after instead of just the current month

Author: RoyalIcing

lib/components_guide_web/components/calendar_component.ex

@@ -19,9 +19,9 @@ defmodule ComponentsGuideWeb.CalendarComponent do
     end_date = Date.end_of_month(date)
     date_range = Date.range(start_date, end_date)
 
-    day_inset = Date.day_of_week(start_date)
-    day_offset = 1 - day_inset
-    max_week = div(end_date.day + day_inset + 5, 7)
+    day_of_week = Date.day_of_week(start_date)
+    day_offset = 1 - day_of_week
+    max_week = div(end_date.day + day_of_week + 5, 7)
 
     assigns =
       assigns
@@ -30,12 +30,16 @@ defmodule ComponentsGuideWeb.CalendarComponent do
         year: year,
         month: month,
         day: day,
+        current: Date.new!(year, month, day),
+        day_of_week: day_of_week,
         day_offset: day_offset
       })
       |> Map.put_new(:extra, fn _ -> "" end)
 
     ~H"""
-    <h2 class="text-center"><%= Calendar.strftime(@date_range.first, "%B %Y") %></h2>
+    <%= if false do %>
+      <h2 class="text-center"><%= Calendar.strftime(@date_range.first, "%B %Y") %></h2>
+    <% end %>
     <table class="text-center">
       <thead class="border-0">
         <tr>
@@ -49,13 +53,13 @@ defmodule ComponentsGuideWeb.CalendarComponent do
         </tr>
       </thead>
       <tbody>
-      <%= for week_n <- 1..max_week do %>
+      <%= for week_n <- 1..max_week, false do %>
         <tr class="min-h-16">
-          <%= for weekday <- 1..7 do %>
-            <% day = weekday + day_offset + ((week_n - 1) * 7) %>
+          <%= for weekday <- 0..6 do %>
+            <% day = weekday + 1 + day_offset + ((week_n - 1) * 7) %>
             <%= if day in @date_range.first.day..@date_range.last.day do %>
-              <% current = day == @day %>
-              <td aria-current={if current, do: "date", else: "false"} class={td_class(%{current: current, weekday: weekday})}>
+              <% current? = day == @day %>
+              <td aria-current={if current?, do: "date", else: "false"} class={td_class(%{current?: current?, weekday: weekday})}>
                 <div class="text-sm"><%= day %></div>
                 <%= @extra.(Date.new!(year, month, day)) %>
               </td>
@@ -65,12 +69,29 @@ defmodule ComponentsGuideWeb.CalendarComponent do
           <% end %>
         </tr>
       <% end %>
+      <%= for week_offset <- -4..4 do %>
+        <tr class="min-h-16 group">
+          <%= for weekday <- 0..6 do %>
+            <% date = Date.add(@current, (week_offset - 1) * 7 + weekday - day_offset) %>
+            <% current? = week_offset == 0 && day_of_week == weekday %>
+            <td aria-current={if current?, do: "date", else: "false"} class={td_class(%{current?: current?, weekday: weekday})}>
+              <div class={cell_text_class(week_offset)}><%= Calendar.strftime(date, "%d %b") %></div>
+              <%= @extra.(date) %>
+            </td>
+          <% end %>
+        </tr>
+      <% end %>
       </tbody>
     </table>
     """
   end
 
-  defp td_class(%{current: true}), do: "bg-green-900 text-green-100"
-  defp td_class(%{weekday: weekday}) when weekday in [6, 7], do: "bg-black/40"
+  defp td_class(%{current?: true}), do: "bg-green-900 text-green-100"
+  defp td_class(%{weekday: weekday}) when weekday in [5, 6], do: "bg-black/40"
   defp td_class(_), do: "bg-black"
+
+  defp cell_text_class(0), do: "text-sm opacity-100"
+  defp cell_text_class(week_offset) when week_offset in [-1, 1], do: "text-sm opacity-75"
+  defp cell_text_class(week_offset) when week_offset in [-2, 2], do: "text-sm opacity-60"
+  defp cell_text_class(_), do: "text-sm opacity-50"
 end