+1 for full calendar.io here I have used it for my master thesis project and it worked pretty well for me. I have a demo here if you want to have a look and see if that suits your needs: https://youtu.be/pH58U4tmZoU.
Let me know in case you need some help, although I should say I am a noob with Phoenix and Elixir so don’t rely too much on the way I implemented the solution it might not follow best practices

you can achieve that via javascript, ajax and fullcalendar library.

or you can create simple weekly view like that and you can generate hardcoded fields dynamically

  dates= ["2018-06-01", "2018-06-02", "2018-06-03", "2018-06-04", "2018-06-05", "2018-06-06"],
  fake_database_appointmens = [
    %{date: "2018-06-01"},
    %{date: "2018-06-01"},
    %{date: "2018-06-02"},
    %{date: "2018-06-03"}
  ]
render(conn, "whatever.hmtl", dates: dates, fake_database_appointmens: fake_database_appointmens)

and in whatever.html.eex

<div class="container">
<div class="row">

<%= for date <- @dates do %>

<div class="col"><h6><%= date %></h6> 

<%= for appointment <- Enum.filter(@fake_database_appointmens, fn x -> x.date == date end ) do %>
<div class="btn btn-primary"><%= appointment.date %></div>
<% end %>

</div>
<% end %>

</div>
</div>

As the guys pointed out, fullcalendar is the best to deal with that kind of requirement, here are some steps to help you figure it all out.

• You need to add fullcalendar on your project by either using a script tag or using brunch and npm
• On your current template used to render the table of appointments change it to include a simple div <div id="calendar" style="width:600px"></div>.
• On a javascript file include the following snippet to render the calendar on the div you placed: (Events Docs)

// get the calendar element with jquery
 const calendarDiv = $('#calendar');
// check if the div is on the page
 if (calendarDiv) {
   // load the fullcalendar on div
   calendarDiv.fullCalendar({
     // events is a url to your controller that respond with json
     events: "/appointments/calendar"
   });
 }

• Now you need to handle the events path you just added on js side. On the router.ex, add a route next to the already present resources("/appointments", AppointmentController): get("/appointments/calendar", AppointmentController, :calendar), which will add the /appointment/calendar.
• Go to your AppointmentController. Now you need to create an action named calendar, there you will handle the data fetching for the current view of calendar such as the date range, you will get a url /appointiment/calendar?start=2013-12-01&end=2014-01-12&_=1386054751381, then you can parse the parameters, convert to a date time format and pass it to the Ecto query. Here is an example:

defmodule MyApp.AppointmentsController do
  # ... other actions
  
  def calendar(conn, %{"start" => start_date, "end" => end_date} = _params) do
    data = 
      AppointmentsContext.fetch_appointments(start_date, end_date)
      |> AppointmentsConverter.convert()
    # instead of render and a view, use json to a quick json serializing and return
    json(conn, data)
    
  end
end

Here some notes on the implementation on the example:

• The functoin fetch_appointments needs to convert the start_date and end_date into a date time format to be usable on ecto such as Ecto.DateTime. Next we pipe the list resulting of the query to a function that convert the structs of Appointments to an map or new struct that conforms with fullcalendar’s Event Object that will return as json.

Then its done.
Hope this helps you