Блог

Я создаю календарь с помощью драгоценного камня «Простой календарь». Я хочу, чтобы пользователь мог блокировать некоторые временные интервалы в пределах модального. Для лучшего UX он должен предварительно заполнить дату выбранной датой. Я попытался указать <%= дата %> в качестве значения, но похоже, что модал загружает только первую показанную дату и не увеличивает ее, поэтому он всегда предварительно заполняет дату первым днем, независимо от того, какой день я выберу. Есть какие-нибудь предложения?

 <%= 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">amp;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 ...
  ...
 

вы также можете создать пользовательские календари.