Check out the CourseFREE Udemy course when you sign up this month
Register
The examples on this site are currently tested to work on Phalcon V3.4 and Phalcon Devtools V3.2 Some issues may arise when using later versions.

Please get in touch or post a comment below the post if you encounter a problem.

In order to add events to Fullcalendar you need the user of your system to be able to fill in a form with the details of the event. When the form is submitted the event details should be stored in the database and then rendered on Fullcalendar with all the other events.

If you were building an appointments scheduling system the user would ideally click on one of the available timeslots and the date and time associated with that timeslot would be pre-populated on the appointment scheduling form. This would be the intuitive way most people would expect a calendar to function.

In order to achieve this we need the Fullcalendar to display timeslots. To do this - add the following setting to your jquery code which renders the Fullcalendar.


In this case the slotDuration is set to 10 minutes which will allow for 10 minute appointments.

In order to get the application to react when you click on one of the timeslots add the following code:


Test the above code. If you click on the event you should get an alert saying hello.

Before we modify the code for the dayClick event we need to add the code for the modal form to our view. This form will remain hidden on the page until we make it visible using the jQuery modal event. Add the following code to the view you are using to render fullCalendar.

<div id="fullCalModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
            <div class="container-fluid">
                <form action="create" method="post">
                    <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>

Now modify the dayClick setting as below. This will do two things. It will set the val of the input with id="startTime" to be the time clicked on by the user (start.format()). It will then bring up the modal form.

dayClick: function(start,end,allDay,jsEvent, view) {
    $('#starttime').val(start.format('hh:mm'));
    $('#bookingDate').val(start.format('YYYY-MM-DD'));
    $('#fullCalModal').modal('show');
},

To make the form submit in the way a regular html form would submit add the following code inside your script tag

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

This function should be added inside the script tag but alongside (rather than inside) the $(document).ready function - as follows.


The user still has to fill in their memberid, the endtime and the courtid in order to create the booking. This is somewhat clunky. Ideally the user would be logged in, their memberid could be picked up automatically from a session variable and inserted here into a hidden field on the form. The enditime could either default to one hour or we could work on full calendar to be able (perhaps) to click and drag accross a timeslot which would give us the start and the endtime. There are plenty of improvements which can be made but what we have is a good start.