將參數從 Fullcalendar 傳遞給 PHP

Question

我正在嘗試創建一個日歷，用戶在登錄后可以 select 約會的日期和時間。 現在，我遇到的問題是我不知道如何將選定的日期從 Fullcalendar 應用程序傳遞到 PHP 進行下一個預訂步驟。

這些是我正在使用的代碼：

Fullcalendar參數

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid' ],
      defaultView: 'dayGridMonth',
      selectable: true,
      locale: 'es',
      height: 500,
      longPressDelay: 500,
      dateClick: function(info) {
        $('#calendar-modal').modal('show');
      }
  });
            calendar.render();
  });

</script>

CSS 彈出窗口顯示小時，然后帶您進入預訂過程的下一步：

        <div id="calendar-modal" class="modal fade" tabindex="-1" role="dialog">
            <form action="step.php?id=<?php foreach($result as $r): ?><?php echo $r['id']; ?><?php endforeach; ?>" method="post" enctype="multipart/form-data">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Pick your date</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <?php 
                            $calendar_hours = explode(',', $r['calendar_hours']);
                            foreach ($calendar_hours as $hours) {
                                echo '
                                <div class="form-check">
                                    <input type="radio" id="'.$hours.'" name="'.$hours.'" value="'.$hours.'" class="form-check-input">
                                    <label class="form-check-label" for="'.$hours.'">'.$hours.'</label>
                                </div>
                                ';
                            }
                        ?>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <input type="submit" class="btn btn-primary" value="Book">
                    </div>
                </div>
                </form>
            </div>
        </div>

我錯過了什么？ 我該如何解決這個問題？

Answer 1

這里有幾點可以幫助你：

1）您應該使用select回調來選擇 fullCalendar 中的日期，而不是dateClick 。 有關詳細信息，請參閱 fullcalendar.io/docs/select-callback。 這允許用戶直接 select 一個時間段（如果使用 timegrid 視圖）以及一個日期。

2) 選擇的日期/時間在info object 中提供，該信息進入該回調方法（在您使用該回調方法時與 dateClick 相同）。 因此，您需要使用 Javascript 將該日期放入模態表單的某個位置。