Rails 6：简单日历+引导带模态+简单形式

问题描述

我正在使用“简单日历” gem 构建日历。我希望用户能够在模态中阻止一些时间段。 为了获得更好的用户体验，它应该使用所选日期预先填充日期。 我试图将 作为一个值，但看起来模态只加载显示的第一个日期，然后不增加，所以它总是用第一天预先填充日期，没有不管我选择哪一天。 有什么建议吗？

<%= month_calendar events: @bookings+@blocked_times do |date,events| %>
  <%= date %>
  <button id="button" type="button" data-toggle="modal" data-target="#exampleModal" data-selected-date="25-07-2021" >
    <i class="far fa-edit"></i>
  </button>
  <!-- Modal -->
  <%= simple_form_for(@blocked_time,method: :new,url: partner_blocked_times_path(@partner)) do |f| %>
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Block slot</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
         <%= f.hidden_field :partner_id,value: params[:id]%>
         <div class= "date-picker">
          <%= f.input :start_time,as: :string %>
        </div>
        <div class= "date-picker">
          <%= f.input :end_time,as: :string%>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <%= f.button :submit,class: 'btn btn-primary' %>
      </div>
      <% end %>
    </div>
  </div>
</div>

解决方法

您可以使用 Javascript 来实现。

只需使用 data-date 属性定义每个按钮

<button id="button" type="button" class="new_event_button" data-toggle="modal" data-target="#exampleModal" data-date="<%= date %>">
   <i class="fas fa-calendar-times" data-date="<%= date %>"></i>
</button>

然后捕获 click 事件并根据此值更改表单

const startDate = document.getElementById('blocked_time_start_time')
const endDate = document.getElementById('blocked_time_end_time')

var buttons = document.querySelectorAll('button.new_event_button');

Array.from(buttons).forEach(function (button) {
    button.addEventListener('click',function(event) {
      var date =  event.target.getAttribute('data-date');

      startDate.value = date;
      endDate.value = date;
    });
});

,

simple_calendar 允许您将 start_date 设置为将在日历上呈现的日期范围的第一个日期，当然事件 (BookedTime) 应与该日期范围匹配，因此您必须从所选日期查询预订时间。

除此之外，您还需要为每一天创建一个新的 BlockedTime，其中 start_time 和 end_time 就是那一天

# model,i assume that your model name Booking
class Booking < ApplicationRecord
  # ...

  def self.calendar(partner_id,start_time)
   @bookings = @partner.bookings # need to filter from start_time
   @blocked_times = BlockedTime.where(partner_id: @partner.id)
                     .where("start_time >= ?",start_time) 
   @bookings+@blocked_times
  end
end
# view
<%= month_calendar(start_date: selected_date,events: Booking.calendar(partner_id,selected_date)) do |date,events| %>
  <%= date %>
  ...
  <% new_blocked_time = BlockedTime.new(start_time: date,end_time: date) %>
  <%= simple_form_for(new_blocked_time ...
  ...

您也可以创建一个 custom-calendars。