FullCalendar is a popular JavaScript library that allows you to create a customizable calendar for your web application. Laravel 10, on the other hand, is a popular PHP web framework that simplifies web development. Livewire is a Laravel package that allows you to build dynamic interfaces using PHP.
In this tutorial, we’ll walk you through the process of integrating FullCalendar with Laravel 10 and Livewire. By the end of this tutorial, you’ll have a working calendar that displays events and allows you to add new events.
Prerequisites Before we get started, you’ll need to have the following installed:
Laravel 10 Composer Node.js NPM
Step 1: Install FullCalendar and jQuery First, we need to install FullCalendar and jQuery using NPM. Open up your terminal and navigate to your Laravel project directory. Then, run the following command:
npm install @fullcalendar/core @fullcalendar/daygrid jquery
This will install FullCalendar, the DayGrid plugin, and jQuery.
Step 2: Create a new Livewire component Next, we need to create a new Livewire component that will render the calendar. In your terminal, run the following command:
php artisan make:livewire Calendar
This will create a new Livewire component called Calendar.
Step 3: Update the Livewire component Open up the app/Http/Livewire/Calendar.php file and add the following code:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Calendar extends Component
{
public $events = [];
public function render()
{
return view('livewire.calendar');
}
}
This code defines a public property called $events, which we’ll use to store the events that will be displayed on the calendar. It also defines a render() method that will render the Livewire component.
Step 4: Create a new view for the Livewire component Next, we need to create a new view for the Livewire component. In your terminal, run the following command:
touch resources/views/livewire/calendar.blade.php
This will create a new view called calendar.blade.php. Open up this file and add the following code:
<div wire:ignore>
<div id="calendar"></div>
</div>
<script>
document.addEventListener('livewire:load', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid'],
events: @json($events)
});
calendar.render();
});
</script>
This code creates a div element with an id of calendar, which is where we’ll render the FullCalendar. It also includes a script that initializes FullCalendar with the DayGrid plugin and the $events data.
Notice the wire:ignore attribute on the div element. This is because Livewire updates the DOM using JavaScript, which can interfere with FullCalendar. The wire:ignore attribute tells Livewire to ignore this element and not update it.
Step 5: Add the Livewire component to a route Finally, we need to add the Livewire component to a route so that we can view the calendar. Open up the routes/web.php file and add the following code:
use App\Http\Livewire\Calendar;
Route::get('/', function () {
return view('welcome');
});
Route::get('/calendar', Calendar::class);
This code adds a new route called /calendar that will render the `Calendar Livewire component.
Step 6: Create a controller for the calendar events Now we need to create a controller that will fetch the calendar events from the database and return them to the Livewire component. In your terminal, run the following command:
php artisan make:controller CalendarController
This will create a new controller called CalendarController. Open up this file and add the following code:
<?php
namespace App\Http\Controllers;
use App\Models\Event;
use Illuminate\Http\Request;
class CalendarController extends Controller
{
public function index()
{
$events = Event::all();
return response()->json($events);
}
}
This code fetches all the events from the events table in the database and returns them as JSON.
Step 7: Add a route for the calendar events Next, we need to add a route for the calendar events. Open up the routes/web.php file and add the following code:
use App\Http\Controllers\CalendarController;
Route::get('/calendar/events', [CalendarController::class, 'index']);
This code adds a new route called /calendar/events that will call the index() method of the CalendarController.
Step 8: Update the Livewire component to fetch the calendar events Finally, we need to update the Livewire component to fetch the calendar events from the controller. Open up the app/Http/Livewire/Calendar.php file and update the render() method as follows:
public function render()
{
$events = $this->fetchEvents();
return view('livewire.calendar', compact('events'));
}
private function fetchEvents()
{
$response = $this->http()->get('/calendar/events');
return json_decode($response->getBody()->getContents());
}
This code defines a private method called fetchEvents() that sends a GET request to the /calendar/events route and returns the events as an array. It also updates the render() method to pass the events to the view.
Step 9: Add the ability to create new events If you want to allow users to create new events on the calendar, you can add a form to the calendar.blade.php file and a method to the Calendar Livewire component.
Here’s an example of how you can add a form:
<form wire:submit.prevent="createEvent">
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" id="title" wire:model="title">
</div>
<div class="form-group">
<label for="start">Start Date</label>
<input type="datetime-local" class="form-control" id="start" wire:model="start">
</div>
<div class="form-group">
<label for="end">End Date</label>
<input type="datetime-local" class="form-control" id="end" wire:model="end">
</div>
<button type="submit" class="btn btn-primary">Create Event</button>
</form>
This code adds a form with fields for the event title, start date, and end date. It also includes a submit button that will call the createEvent() method of the Calendar Livewire component.
Here’s an example of how you can add the createEvent() method to the Calendar Livewire component:
public function createEvent()
{
$event = new Event;
$event->title = $this->title;
$event->start = $this->start;
$event->end = $this->end;
$event->save();
$this->resetFields();
}
private function resetFields()
{
$this->title = '';
$this->start = '';
$this->end = '';
}
This code defines a new public method called createEvent() that creates a new event in the database with the data entered in the form. It also includes a private method called resetFields() that resets the form fields to their default values.
Step 10: Test the application
To test the application, run the following command in your terminal:
This will start the Laravel development server. Open up your web browser and navigate to `http://localhost:8000/calendar`. You should see a calendar with any existing events displayed on it.
You can also create a new event by filling out the form at the bottom of the page and clicking the “Create Event” button.
Conclusion
In this article, we’ve shown you how to integrate the FullCalendar JavaScript library into a Laravel 10 application using the Livewire framework. With this integration, you can easily display and manage calendar events in your Laravel application. We hope this article has been helpful to you!
This Article Ideas has been taken from the following websites; which are following:
https://www.nicesnippets.com/blog/laravel-livewire-fullcalendar-integration-tutorial
Laravel 10 Livewire Fullcalendar Integration Example
Laravel Livewire Fullcalendar Integration Example
https://morioh.com/p/94cd65e1149f
https://gist.github.com/nowendwell/42f68ee513728732c0fca7c58764c3a5
https://www.itsolutionstuff.com/post/laravel-10-fullcalendar-ajax-tutorial-exampleexample.html
Leave a Reply