Laravel 10 Vue 3 FullCalendar Integrate Example

Hey there, fellow developers! Have you ever wondered how to seamlessly integrate FullCalendar into your Laravel 10 project with the magic of Vue 3? Well, you're in for a treat! In this step-by-step guide, we'll journey together to enhance your web application by enabling users to add events to FullCalendar effortlessly.

From setting up the environment to creating a sleek Vue component, and tying it all together with Laravel's backend prowess, we'll demystify the process of event management.

So, grab your coding gear, and let's dive into the wonderful world of Laravel 10 and Vue 3 magic! 🚀✨

So, let's see the laravel 10 vue 3 fullcalendar integration example and how to create an event in calendar laravel 10 vue 3.

Step 1: Install Laravel

If you haven't installed Laravel, use the following command to create a new Laravel project:

composer create-project --prefer-dist laravel/laravel your-project-name


Step 2: Create Event Model and Migration

Generate a model and migration for the events table:

php artisan make:model Event -m


// database/migrations/yyyy_mm_dd_create_events_table.php

public function up()
    Schema::create('events', function (Blueprint $table) {

Open the generated Event.php file (located in the app directory) and define the model properties and relationships. Add the following code:

// app/Models/Event.php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Event extends Model
    protected $fillable = ['title', 'start', 'end'];

    // You can define any relationships here if needed

After defining the model, you need to run the migration to create the corresponding table in the database.

php artisan migrate



Step 3: NPM Module Configuration For Vue JS

We'll vue dependencies using NPM using the following command.

php artisan preset vue

Install all Vue dependencies:

npm install

After that, install vue FullCalendar dependencies by using the below command:

npm install --save vue-full-calendar

npm install --save babel-runtime

npm install babel-preset-stage-2 --save-dev

npm install moment --save


Step 4: Create an Event Controller

Implement the EventController to handle CRUD operations for events.

php artisan make:controller EventController

Update the EventController methods to handle creating, updating, and fetching events.

// app/Http/Controllers/EventController.php

use App\Models\Event;
use Illuminate\Http\Request;

class EventController extends Controller
    public function index()
        $events = Event::get(['title','start']);
        return response()->json(["events" => $events]);

//    public function store(Request $request)
//    {
//        $event = Event::create($request->all());
//        return response()->json($event, 201);
//    }


Step 5: Define Routes

Edit routes/web.php to include the routes for the events:

use App\Http\Controllers\EventController;

Route::get('events', [EventController::class, 'index']);


Step 6: Set Up FullCalendar in Vue Component

Create a new Vue component to handle the FullCalendar functionality.


<div class="container">
       <full-calendar :event-sources="eventSources"></full-calendar>
    export default{
  data() {
    return {
      eventSources: [
          events(start, end, timezone, callback) {
            axios.get('http://localhost:8000/events').then(response => {
          color: 'red',
          textColor: 'black',

Now, open resources/assets/js/app.js and include the FullCalendarComponent.vue component as follows:


import 'fullcalendar/dist/fullcalendar.css';

window.Vue = require('vue');

import FullCalendar from 'vue-full-calendar'; //Import Full-calendar


Vue.component('fullcalendar-component', require('./components/FullCalendarComponent.vue').default);

const app = new Vue({
    el: '#app',



Then, we'll create an app.blade.php file in the resources/views/layout folder.

<!doctype html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>How to Add an Event in FullCalendar using Laravel 10 and Vue 3 - Techsolutionstuff</title>

    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">


    <div id="app">
        <main class="py-4">

Now, open resources/views/welocome.blade.php file.


<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Laravel 10 Vue3 FullCalendar Example - Techsolutionstuff</div>
                <div class="card-body">


Step 7: Run Your Application

Run your application using the following command.

php artisan serve

npm run dev


npm run watch



And there you have it – a comprehensive guide on integrating FullCalendar with Laravel 10 and Vue 3 to empower your web application with dynamic event management.

You're ready to create dynamic, user-friendly calendars that bring your projects to life. Happy coding! 🌐💻


You might also like:


Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.