Create a room booking system with Laravel and FullCalendar – Part 2

In the index.blade.php file, we will display the events via FullCalendar. Just make sure you link the CSS and JS files properly. Then create a div for the calendar. You may refer to FullCalendar website for full documentation. My setting for FullCalendar as follows:

<script src="{{ url('_asset/fullcalendar') }}/fullcalendar.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
 
 var base_url = '{{ url('/') }}';

 $('#calendar').fullCalendar({
 weekends: true,
 header: {
 left: 'prev,next today',
 center: 'title',
 right: 'month,agendaWeek,agendaDay'
 },
 editable: false,
 eventLimit: true, // allow "more" link when too many events
 events: {
 url: base_url + '/api',
 error: function() {
 alert("cannot load json");
 }
 }
 });
 });
</script>

For list.blade.php, we will display all events in a table format. I use foreach loop to display a event in each row. You may refer to the file for the details.

Create events form for events creation is in the create.blade.php. The form will need inputs such as name of the booker, date and time, and the event’s title. We need to integrate date range picker within the form and below is the javascript setting that I use for your reference.

<script src="{{ url('_asset/js') }}/daterangepicker.js"></script>
<script type="text/javascript">
$(function () {
 $('input[name="time"]').daterangepicker({
 "minDate": moment('<?php echo date('Y-m-d G')?>'),
 "timePicker": true,
 "timePicker24Hour": true,
 "timePickerIncrement": 15,
 "autoApply": true,
 "locale": {
 "format": "DD/MM/YYYY HH:mm:ss",
 "separator": " - ",
 }
 });
});
</script>