Add actual calendar

Author: RoyalIcing

config/config.exs

@@ -23,6 +23,8 @@ config :logger, :console,
 # Use Jason for JSON parsing in Phoenix
 config :phoenix, :json_library, Jason
 
+config :floki, :html_parser, Floki.HTMLParser.Html5ever
+
 # Allow rendering markdown templates
 config :phoenix, :template_engines,
   md: ComponentsGuideWeb.TemplateEngines.MarkdownEngine,

lib/components_guide_web/components/calendar_component.ex

@@ -7,7 +7,9 @@ defmodule ComponentsGuideWeb.CalendarComponent do
     end_date = Date.end_of_month(today)
     date_range = Date.range(start_date, end_date)
 
-    day_offset = 1 - Date.day_of_week(start_date)
+    day_inset = Date.day_of_week(start_date)
+    day_offset = 1 - day_inset
+    max_week = div(end_date.day + day_inset + 5, 7)
 
     assigns =
       assigns
@@ -20,7 +22,7 @@ defmodule ComponentsGuideWeb.CalendarComponent do
       })
 
     ~H"""
-    <h2><%= @year %> <%= @month %> <%= Gettext.dgettext(ComponentsGuideWeb.Gettext, "months", "april") %></h2>
+    <h2><%= Calendar.strftime(@date_range.first, "%B %Y") %></h2>
     <table class="text-center">
       <thead>
         <tr>
@@ -34,17 +36,17 @@ defmodule ComponentsGuideWeb.CalendarComponent do
         </tr>
       </thead>
       <tbody>
-      <%= for week_n <- 1..6 do %>
+      <%= for week_n <- 1..max_week do %>
         <tr>
           <%= for day_n <- 1..7 do %>
             <% day = day_n + 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={if current, do: "bg-red-900", else: ""}>
+              <td aria-current={if current, do: "date", else: "false"} class={if current, do: "bg-red-900", else: "bg-black"}>
                 <%= day %>
               </td>
             <% else %>
-              <td role="presentation" class="bg-black"></td>
+              <td role="presentation" class=""></td>
             <% end %>
           <% end %>
         </tr>

lib/components_guide_web/controllers/calendar_controller.ex

@@ -226,7 +226,7 @@ defmodule ComponentsGuideWeb.CalendarView do
           "https://cdn.jsdelivr.net/npm/simple-icons@v6/icons/safari.svg"
 
         <<"postgres" <> _>> ->
-          "https://cdn.jsdelivr.net/npm/simple-icons@v6/icons/postgres.svg"
+          "https://cdn.jsdelivr.net/npm/simple-icons@v6/icons/postgresql.svg"
 
         <<"swift" <> _>> ->
           "https://cdn.jsdelivr.net/npm/simple-icons@v6/icons/swift.svg"

lib/components_guide_web/templates/calendar/index.html.heex

@@ -5,12 +5,12 @@
     <label><input type="checkbox" name="released" checked class="rounded text-sky-500"> Released</label>
     <label><input type="checkbox" name="lts_starts" checked class="rounded text-sky-500"> LTS</label>
   </form>
-  <CalendarComponent.calendar_grid date={@today} />
   <article>
     <%= for item <- @list do %>
     <%= present_item(item) %>
     <% end %>
   </article>
+  <CalendarComponent.calendar_grid date={@today} />
 </div>
 
 <div class="prose prose-invert max-w-2xl mx-auto pt-8 pb-16 px-3">

test/collected_live_web/components/calendar_component_test.exs

@@ -18,7 +18,7 @@ defmodule ComponentsGuideWeb.CalendarComponentTest do
       assert current_date |> Enum.count() == 1
 
       assert 7 == count(el, "thead th")
-      assert 6 == count(el, "tbody tr")
+      assert 5 == count(el, "tbody tr")
       assert 30 == count(el, "tbody td:not([role=presentation])")
     end