Adding a Modal Form to Create new bookings

Now that we have a calendar it would be nice to use it to create new bookings on timeslots which are available. To do this we need a bootstrap modal form. A modal form is a kind of popup dialog box which pops up in front of your webpage and stays present until it has been dealt with.

The dayClick event of Fullcalendar allows us to capture a click event when a user clicks on a timesolt. At the moment, if you click on week or list view of the calendar you can see the days divided into timeslots of 10 minutes. The timeslot duration can be adjusted in the Fullcalendar code in the display view.

To use the modal function we will use bootstrap which is dependent on jQuery. To get our modal working we need to add two new assets to /resources/views/layouts/app.blade.php. Edit the file and add the following lines above the other assets.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Now, using the following code create a file called modalbooking.blade.php in the \resources\views\calendar folder

<div id="fullCalModal" class="modal" role="dialog">
  <div class="modal-dialog"> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4>       </div> 
      <div class="modal-body"> 
        <div class="container-fluid"> 
          <form action="{{route('bookings.store')}}" method="post">
            @csrf
              <div class="form-group"> <label for="memerid">Member ID</label> 
<input type="text" class="form-control" id="memid" name="memberid"/> 
</div> 
<div class="form-group"> 
<label for="bookingdate">Booking Date</label> 
<input type="text" class="form-control" id="bookingDate" name="bookingdate"/> 
</div> 
<div class="form-group"> 
<label for="starttime">Start Time</label> 
<input type="text" class="form-control" id="starttime" name="starttime"/> </div> 
<div class="form-group"> 
<label for="endtime">Start Time</label> 
<input type="text" class="form-control" id="endtime" name="endtime"/> </div> 
<div class="form-group"> 
<label for="courtid">CourtID</label> 
<input type="text" class="form-control" id="courtid" name="courtid"/> </div> 
<div class="modal-footer"> 
<button type="submit" id="submitButton" class="btn btn-default" data-dismiss="modal">Create Appointment</button> 
</div> 
</form> 
</div> 
</div> 
</div> 
</div> 
</div>

Next remove your assets from the view calendar.blade.php and place them in a separate file called assets.blade.php in the \resources\views\calendar folder. We want to include both of these new files in our calendar.blade.php file. This will make our view much easier to work with.

To include the file in our view add the following blade include directives:

Next include some code for the dayclick event as follows:

 dateClick: function(info) {
            $('#starttime').val(info.date.toISOString().substring(11,16));
            $('#bookingDate').val(info.date.toISOString().substring(0,10));
            $('#fullCalModal').modal('show');
 }

Be careful do include a comma on the line above your new dateClick: block.

Now when you click on a timeslot the modal form should pop open. The dates and times of your booking should be pre-populated on the form. Try and fill in some data to create a new Booking for the tennis club. Make sure to use a valid member id and court id.

To make the form submit in the way a regular html form would submit add the following code inside your script tag. Be careful not to put it inside the document.addEventListener( ) function. This code is a separate to that function.

$(function () {
    $('body').on('click', '#submitButton', function (e) {
        $(this.form).submit();
        $('#fullCalModal').modal('hide');
    });
});

Leave a Reply Cancel reply