Calendars are a very important and useful feature of many modern web-based applications. Every time we want to book a trip or an event we need to check the available dates to see which one suits us. This inevitably means having the information presented in some kind of Calendar format.
We could write code to do this ourselves but it would take a long time and would be difficult to do well. A better approach is to download and use one of the many third party components or "plugins" that are available.
In this example we will use V4.43 Fullcalendar . This is a popular javascript-based component. Visit the Fullcalendar github repository Fullcalendar.zip for this version from here https://github.com/fullcalendar/fullcalendar/releases/tag/v4.4.3 file that you find there. Extract the zip to its own folder. Go into the packages folder within the archive and copy all of the folders you find there to the /public folder within your tennisclub application folder. (update the more recent versions of Fullcalendar would be better installed using Node Package Manager) using the approach in the subsequent posts.
Next we need a new Controller to handle Calendar requests copy the code below and save it to a file called calendarController.php in you app/Http/controllers folder
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CalendarController extends Controller
{
public function display()
{
return view('calendar.display');
}
}
?>
Next create a new folder in the resources/views folder called calendar to correspond to the Calendar controller. Us the following code to create a file called display.blade.php which should be placed in the calendar folder you have just created.
@extends('layouts.app')
@section('content')
<link href="{{ asset('core/main.css')}}" rel='stylesheet' />
<link href="{{ asset('daygrid/main.css')}}" rel='stylesheet' />
<link href="{{ asset('timegrid/main.css')}}" rel='stylesheet' />
<link href="{{ asset('list/main.css')}}" rel='stylesheet' />
<script src="{{ asset('core/main.js')}}"></script>
<script src="{{ asset('interaction/main.js')}}"></script>
<script src="{{ asset('daygrid/main.js')}}"></script>
<script src="{{ asset('timegrid/main.js')}}"></script>
<script src="{{ asset('list/main.js')}}"></script>
<div id="calendar"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' ],
header: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' },
slotDuration: '00:10:00',
defaultDate: '2019-08-01',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [ { title: 'All Day Event', start: '2019-08-01' },
{ title: 'Long Event', start: '2019-08-07', end: '2019-08-10' } ]
});
calendar.render(); });
</script>
@endsection
From your knowledge of routes, create a route in routes/web.php which create allow you to visit /calendar/display - this should call the display function of the Calendar Controller which will, in turn, bring up the display.blade.php view.
