Hotwire example

[spacerobotTR]

I have been struggling a bit getting the days to update with hotwire when events are put in. Is there a full working example that shows this?

Update: I ended up getting the events rendering with hotwire! The last thing I am looking to do is to change the month calendar to the month the event start_time was put in for. I was trying to do something like this but is not working. Any suggestions?

<%= turbo_stream.replace "calendar", partial: "scheduleevents/calendar", locals: {events: @scheduleevents, date: @scheduleevent.start_time} %>

[E36lewis]

I'm trying to do the same thing you are, I keep getting calendar requires a block template error tho.

Did you set up turbo_frame_tag like in the example?

I'm guessing your calendar partial is in the views folder with the controller making the call and not referencing it from the simple_calendar folder?

[E36lewis]

Also if I create a calendar partial in my views folder and update that partial the way you are I get undefined method 'reject' for the object. Did you run into these problems?

[spacerobotTR]

I hit both of those errors. i can't remember what I had to do to fix the block error but the reject if error I fixed by declaring the events in the create action of the events model. So in scheduleevents/create I had to set @scheduleevents = Scheduleevent.all.

[E36lewis]

so something like:

def create
@scheduleevents = Scheduleevent.all
@scheduleevents.create.new
@scheduleevents.save
end

[E36lewis]

Figured out how to incorporate turbo frames into the calendar itself.

In the actual calendar block add turbo frames as such:

  <%= turbo_frame_tag 'calendar' do %>
    <%= month_calendar(events: @schedule) do |date, meetings| %>
  <div class="day">
    <%= date.day %>
  </div>

      <%= turbo_frame_tag date do %>
        <% meetings.each do |meeting| %>
        <%= render 'tools/schedules/calendar', meeting: meeting %>
      <% end %>
    <% end %>
  <% end %>
  <% end %>

your partial location would replace 'tools/schedules/calendar'. Then the partial would look like:

<%= turbo_frame_tag nested_dom_id(meeting.start_time.strftime("%Y-%m-%d"), meeting) do %>
<div class = schedule_last>
<div>
  <%= meeting.name %>
  <%= meeting.routine.name %>
  From: <%= meeting.start_time.strftime('%A, %B %d, %Y at %I:%M %p') %>
  To: <%= meeting.end_time.strftime('%A, %B %d, %Y at %I:%M %p') %>
</div>
</div>
<% end %>

I had to use a custom method to create the turbo ids , because in order to update the correct day of the month turbo needs the unique id, well the date will always be unique because there will never be two 9/22/22.

So using the date that the meeting was created we have our unique id.

the method for creating the dom id: I placed it in the application_helper.rb

  def nested_dom_id(*args)
    args.map { |arg| arg.respond_to?(:to_key) ? dom_id(arg) : arg }.join("_")
  end

For my setup on creating/updating/deleting objects with turbo I created 3 views. Since my calendar is used on the schedule model; this is mine, yours could be events model, activity model, whatever you called it. In my views folder for schedule, reference my partial path above, I have create.turbo_stream.erb, update.turbo_stream.erb, and delete_turbo.stream.erb the controller has

respond_to do |format|
if @schedule.save / @schedule.update / @schedule.destroy whatever action is being called
all other code
format.turbo_stream { flash.now[:success] = 'Event was created' }
else
all other code

create_turbo file

<% if @schedule.save %>
<%= turbo_stream.prepend "schedules", @schedule %>
<%= turbo_stream.update Schedule.new, "" %>
<%= turbo_stream.prepend @schedule.start_time.strftime("%Y-%m-%d") do %>
    <%= render 'tools/schedules/calendar', meeting: @schedule %>
<% end %>
<%= render_turbo_stream_flash_messages %>
<% else %>
<%= render_turbo_stream_flash_messages %>
<% end %>

update_turbo:

<%= turbo_stream.replace @schedule %>
<%= turbo_stream.replace nested_dom_id(@schedule.start_time.strftime("%Y-%m-%d"), @schedule) do %>
    <%= render 'tools/schedules/calendar', meeting: @schedule %>
<% end %>
<%= render_turbo_stream_flash_messages %>

destroy_turbo:

<% if @schedule.destroy %>
<%= turbo_stream.remove @schedule %>
<%= turbo_stream.remove nested_dom_id(@schedule.start_time.strftime("%Y-%m-%d"), @schedule) %>

<%= render_turbo_stream_flash_messages %>
<% else %>
<%= render_turbo_stream_flash_messages %>
<% end %>

I have a list being created, updated, and destroyed as well, the calendar portion starts when you see the @schedule as indicated by start_time attribute.

You may ask your self why are they different? For the create action we are looking for the date that the event is happening and just prepending to that id. With the update and destroy we need to make sure that we are also targeting the correct schedule_id. This is why they look different and use a different id method.

Hopefully this helps people when they are playing with this gem, I know I spent a good day trying to figure this out even though when I did it took like 2 hours to code and get it right.

To get a better idea of whats happening, if you use this, open the inspector and view the turbo ids and see how they change when you don't use the @schedule.start_time and @schedule.

Don't know if this is the correct way to do this but it works as I want it to work.

[spacerobotTR]

Wow this is awesome! Great work. I am going to play around with this in a bit!

[spacerobotTR]

One thing I noticed was that when I tried your method the events were getting inserted in the wrong timed order. Not sure if I did something wrong or not. If I had an event that was 8:00AM to 10:00 AM, another from 2:00PM to 5:00PM and I wanted to insert one from 11:00AM to 12:00PM it would prepend that. Doing a replace overwrote the display of the existing events and append put them out of time order still.

Here is what I ended up with. It rebuilds the whole calendar view so newly inserted events are rendered again in correct time order.

Scheduleevents index

<div class="w-full">
  <% if notice.present? %>
    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
  <% end %>
</div>


<%= render partial: 'scheduleevents/calendar', locals: {events: @scheduleevents} %>

Scheduleevents/_calendar.html.erb.

<%= turbo_frame_tag 'calendar' do %>
  <%= month_calendar(events: @scheduleevents) do |date, scheduleevents| %>
    <div class="text-gray-800 dark:text-white px-2 py-2"><%= date.day %></div>
    <% scheduleevents.each do |scheduleevent| %>
    <div id="<%= dom_id scheduleevent %>">
      <div class="px-4 group flex">
          <div class="pb-4 my-2 hidden lg:block">
              <p class="text-xs font-light leading-3 text-gray-500 dark:text-gray-300"><%= scheduleevent.start_time.strftime('%I:%M %p') %> - <%= scheduleevent.end_time.strftime('%I:%M %p') %> </p>
              <a tabindex="0" class="focus:outline-none text-lg font-medium leading-5 text-gray-800 dark:text-gray-100 mt-2"><%= scheduleevent.title %></a>

          </div>
      </div>
    </div>
    <% end %>
    <div class="flex flex-grow block">
        <span class="-mx-0.5 flex flex-grow block flex-wrap-reverse lg:hidden">
          <% scheduleevents.each do |scheduleevent| %>
            <span class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-white"></span>
          <% end %>
        </span>
    </div>
  <% end %>
<% end %>

create.turbo_stream.erb

<%= turbo_stream.replace "calendar", partial: "scheduleevents/calendar", locals: {events: @scheduleevents} %>

<%= turbo_stream.append "toasts", partial: "shared/toast", locals: { title: "New event", message: "Event created successfully.", cssclass: 'toast_success' } %>

It works great. The only thing I am trying to get working is if the calendar is on the month of September and I schedule an event in November say, I want the calendar to render November or whatever month the start date of the event was.

[E36lewis]

That behavior is what will happen, the prepend will just inserts itself below the last turbo id. Your way of updating the calendar is a way to get around that. You could also create a method within the model that would check if the last start_time was < the newly created start_time. Then in the create_turbo, call the method to check the created @scheduleeevent.start_time in an ifclause.

For me, the application did not need events to be in order constantly, so I did not notice this flaw/error. Good eye pointing that out. For the start month problem you might have to create an if statement like:

<% if @scheduleevents.start_time.last > @scheduleevents %>
all code used to render calender <= this would render the calendar but in the month of the event
<% else %>
all code used to render calendar <= would render calendar in current month
<% end %>

Or at least this is my thinking.

[spacerobotTR]

Thanks! I got it working this morning. Had to add one line to the create action in the scheduleevents controller: params[:start_date] = @scheduleevent.start_time.to_date

respond_to do |format|
      if @scheduleevent.save
        params[:start_date] = @scheduleevent.start_time.to_date
        format.turbo_stream
        format.html { redirect_to scheduleevent_url(@scheduleevent), notice: "Scheduleevent was successfully created." }
        format.json { render :show, status: :created, location: @scheduleevent }
      else
        format.html { render :new, status: :unprocessable_entity }
        format.json { render json: @scheduleevent.errors, status: :unprocessable_entity }
      end
    end