Laravel 7 Fullcalendar component
Notice: This is a fork of Edofre/laravel-fullcalendar package, which I have grown to love and use. This package is now code compliant for the newer versions of Laravel 7 and FullCalendar v5. This version will now install adding the required NPM packages directly without Bower or the fxp/composer-asset plugin.
Warning
If you are upgrading from a previous version I would remove Edofre/laravel-fullcalendar package, any unneeded Bower/fxp/composer-asset plugin components if composer fails to remove them, the original Edo service provider and alias in the config/app file and any FullCalendar config and FullCalendar CSS/JS files from that previous package in your public folder. You may need to remove the old Edo package lines from the bootstrap/config.php file if you get this error:
Class 'Edofre\Fullcalendar\FullcalendarServiceProvider' not found
I also had to remove the FullCalendar, Moment and jQuery from the NPM.
npm remove fullcalendar
Use with Laravel/Homestead
This package will NOT install properly under Laravel/Homestead on Windows because of VirtualBox issues without following these steps. Right click your command window (Typically GIT Bash) and choose run as Administrator. In your Homestead Yaml file the folders section should look something like this:
folders:
- map: your_programming_directory
to: /home/vagrant/code
type: "smb"
This will require you to enter your Windows User name and password. More information here: https://www.vagrantup.com/docs/synced-folders/smb.html#smb_username. The first time I made this change I provisioned when I brought Vagrant up.
Installation
The preferred way to install this extension is through composer.
To install, either run
$ php composer.phar require schedulemycoach/laravel7-fullcalendar
or add
"schedulemycoach/laravel7-fullcalendar": "^1.0.5"
to the require
section of your composer.json
file.
Note
The fxp/composer-asset plugin is no longer required for this package to install properly. We have converted this package to use Foxy. This plugin enables you to download NPM packages through composer and is included as part of this package. You can find more info on this page: https://github.com/fxpio/foxy.
Configuration
Add the ServiceProvider to your config/app.php
'providers' => [
...
schedulemycoach\Fullcalendar\FullcalendarServiceProvider::class,
],
And add the facade
'aliases' => [
...
'Fullcalendar' => schedulemycoach\Fullcalendar\Facades\Fullcalendar::class,
],
Publish assets and configuration files
php artisan vendor:publish --tag=config
php artisan vendor:publish --tag=fullcalendar
The Config File
By publish the vendor config file you will find a new file called fullcalendar.php in the /config folder. These configs allow you to load either the minified or non-minified CSS and JS for Fullcalander.
Google Calendar Inclusion
Per the Fullcalendar NPM package the google calendar CSS/JS files are now included and do not need to be loaded seperately.
Manually loading script files
By setting the both the include_scripts options in the config file to false the scripts will not be included when generating the calendar. If you want to manually include the scripts you can call the following static function in your header/footer/etc.
For the Full files
\schedulemycoach\Fullcalendar\Fullcalendar::renderFullScriptFiles();
For the Minified files
\schedulemycoach\Fullcalendar\Fullcalendar::renderMinScriptFiles();
Example
Below is an example of a controller action configuring the calendar
public function index()
{
// Generate a new fullcalendar instance
$calendar = new \schedulemycoach\Fullcalendar\Fullcalendar();
// You can manually add the objects as an array
$events = $this->getEvents();
$calendar->setEvents($events);
// Or you can add a route and return the events using an ajax requests that returns the events as json
$calendar->setEvents(route('fullcalendar-ajax-events'));
// Set options
$calendar->setOptions([
'locale' => 'en',
'weekNumbers' => true,
'selectable' => true,
'themeSystem' =>'bootstrap',
/* Scripts need for this are not included in the package. See bootstrap theming at https://fullcalendar.io/docs/bootstrap-theme */
'initialView' => 'dayGridMonth',
/* options are dayGridMonth,dayGridWeek,dayGridDay,dayGrid,timeGridWeek,timeGridDay,timeGrid,listYear,listMonth,listWeek,listDay,list */
// Add the callbacks
'eventClick' => new \schedulemycoach\Fullcalendar\JsExpression("
function(data, jsEvent, view) {
console.log(data.event); <-- single event
}
"),
]);
// Check out the documentation for all the options and callbacks.
// https://fullcalendar.io/docs/
return view('fullcalendar.index', [
'calendar' => $calendar,
]);
}
/**
* @param Request $request
* @return string
*/
public function ajaxEvents(Request $request)
{
// start and end dates will be sent automatically by fullcalendar, they can be obtained using:
// $request->get('start') & $request->get('end')
$events = $this->getEvents();
return json_encode($events);
}
/**
* @return array
*/
private function getEvents()
{
$events = [];
$events[] = new \schedulemycoach\Fullcalendar\Event([
'id' => 0,
'title' => 'Rest',
'allDay' => true,
'start' => Carbon::create(2016, 11, 20),
'end' => Carbon::create(2016, 11, 20),
]);
$events[] = new \schedulemycoach\Fullcalendar\Event([
'id' => 1,
'title' => 'Appointment #' . rand(1, 999),
'start' => Carbon::create(2016, 11, 15, 13),
'end' => Carbon::create(2016, 11, 15, 13)->addHour(2),
]);
$events[] = new \schedulemycoach\Fullcalendar\Event([
'id' => 2,
'title' => 'Appointment #' . rand(1, 999),
'editable' => true,
'startEditable' => true,
'durationEditable' => true,
'start' => Carbon::create(2016, 11, 16, 10),
'end' => Carbon::create(2016, 11, 16, 13),
]);
$events[] = new \schedulemycoach\Fullcalendar\Event([
'id' => 3,
'title' => 'Appointment #' . rand(1, 999),
'editable' => true,
'startEditable' => true,
'durationEditable' => true,
'start' => Carbon::create(2016, 11, 14, 9),
'end' => Carbon::create(2016, 11, 14, 10),
'backgroundColor' => 'black',
'borderColor' => 'red',
'textColor' => 'green',
]);
return $events;
}
You can then render the calendar by generating the HMTL and scripts
{!! $calendar->generate() !!}
Tests
Run the tests by executing the following command:
composer test