从 Fullcalendar 向 PHP 传递参数

Question

我正在尝试创建一个日历，用户在登录后可以select 确定约会的日期和时间。现在，我遇到的问题是我不知道如何将 Fullcalendar 应用程序中的 selected 日期传递到下一个预订步骤发生的 PHP。

这些是我正在使用的代码：

完整日历参数

<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。有关详细信息，请参阅完整日历。io/docs/select-callback。这允许用户直接 select 一个时间段（如果使用时间网格视图）以及一个日期。

2) selected date/time 在进入该回调方法的 info 对象中提供（在您使用 dateClick 时也是如此）。因此，您需要使用 Javascript.

将该日期放入模态表单的某处

从 Fullcalendar 向 PHP 传递参数

Pass parameters to PHP from Fullcalendar

javascript

php

fullcalendar