Rails 6 : 简单的日历 + bootstrap modal + 简单的表单

Question

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

<%= 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>

Answer 1

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。

Answer 2

您可以使用 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;
    });
});

Rails 6 : 简单的日历 + bootstrap modal + 简单的表单

Rails 6 : Simple calendar + boot strap modal + simple form for

ruby-on-rails

calendar

bootstrap-modal

simple-form-for