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.

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

 

Generate a model and migration for the events table:

php artisan make:model Event -m

database/migrations:

// database/migrations/yyyy_mm_dd_create_events_table.php

public function up()
{
    Schema::create('events', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->dateTime('start');
        $table->dateTime('end')->nullable();
        $table->timestamps();
    });
}

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

 

 

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

 

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);
//    }
}

 

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

use App\Http\Controllers\EventController;

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

 

Create a new Vue component to handle the FullCalendar functionality.

resources/js/components/FullCalendar.vue

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

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

require('./bootstrap');

import 'fullcalendar/dist/fullcalendar.css';

window.Vue = require('vue');

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

Vue.use(FullCalendar);

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>
<html>
<head>
    <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">

    @stack('fontawesome')

</head>
<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

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

@extends('layouts.app')

@section('content')
<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">
                  <fullcalendar-component></fullcalendar-component>
                </div>
                
            </div>
        </div>
    </div>
//techsolutionstuff
</div>
@endsection 

 

Run your application using the following command.

php artisan serve

npm run dev

or 

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:

• Read Also: How to Install Tailwind CSS in Vue 3
• Read Also: How to Create Event Calendar in Laravel 10
• Read Also: How to Create Vue 3 Authentication in Laravel 10
• Read Also: Creating Vue 3 Datepicker with Tailwind CSS 3