Pass parameters to PHP from Fullcalendar

Question

I'm trying to create a calendar where users, after logging in, can select the day and hour for their appointment. Right now, the problem i'm having is that I don't know how to pass the selected day from the Fullcalendar app to PHP where the next booking step takes place.

These are the codes I'm working with:

Fullcalendar parameters

<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 popup that shows hours and then takes you to the next step in the booking process:

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

What am I missing? How can I solve this?

Answer 1

Here are a couple of points which will help you:

1) you should be using the select callback to choose dates in fullCalendar, not dateClick . See fullcalendar.io/docs/select-callback for details. This allows the user to select a time period directly (if using the timegrid views) as well as just a date.

2) the selected date/time is provided in the info object which comes into that callback method (and the same in dateClick, while you're using that). So you need to then put that date somewhere into your modal form, by using Javascript.