Hey devs, in this Laravel example tutorial i will discuss about Laravel 8 Fullcalendar event. From this Laravel 8 Fullcalendar tutorial you will learn how we can set our event. For setting the event in Laravel callendar i will use jQuery.
So this Laravel calendar event example will help you laravel 8 fullcalendar tutorial. Here you also learn how to use fullcalendar in Laravel 8. In this Laravel calendar tutorial we will simply create crud of calendar event.
So you can easily create event, edit event by drag and drop and delete event also. From this example we will create events table with start, edit date and title column. then you can add, edit and delete that event with database.
Step 1: Install Laravel 8
Now time to install a fresh Laravel project to start our Laravel full calendar event tutorial. Install it via command line.
composer create-project --prefer-dist laravel/laravel blog
Step 2: Create Model
In this second step we need to create migration for events table using Laravel 8 php artisan command, so first fire bellow command:
php artisan make:model Event -m
Recommended : Laravel 8.x API Permissions Using Passport Scope
After this command you will find one file in following path "database/migrations" and you have to put bellow code in your migration file for create events table.
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateEventsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('events', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->date('start');
$table->date('end');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('events');
}
}
app/Models/Event.php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Event extends Model
{
use HasFactory;
protected $fillable = [
'title', 'start', 'end'
];
}
Step 3: Create Routes
In this step we will create routes and controller file so first add bellow route in your routes.php file.
routes/web.php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FullCalenderController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('fullcalender', [FullCalenderController::class, 'index']);
Route::post('fullcalenderAjax', [FullCalenderController::class, 'ajax']);
After this we have to create FullCalenderController.php file in your app/Http/Controllers directory. open FullCalenderController.php file and put bellow code in that file.
app/Http/Controllers/FullCalenderController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Event;
class FullCalenderController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index(Request $request)
{
if($request->ajax()) {
$data = Event::whereDate('start', '>=', $request->start)
->whereDate('end', '<=', $request->end)
->get(['id', 'title', 'start', 'end']);
return response()->json($data);
}
return view('fullcalender');
}
/**
* Write code on Method
*
* @return response()
*/
public function ajax(Request $request)
{
switch ($request->type) {
case 'add':
$event = Event::create([
'title' => $request->title,
'start' => $request->start,
'end' => $request->end,
]);
return response()->json($event);
break;
case 'update':
$event = Event::find($request->id)->update([
'title' => $request->title,
'start' => $request->start,
'end' => $request->end,
]);
return response()->json($event);
break;
case 'delete':
$event = Event::find($request->id)->delete();
return response()->json($event);
break;
default:
# code...
break;
}
}
}
Step 4: Create Blade File
Ok, now all are set to almost. just we have to create our blade view. So let's create.
resources/views/fullcalender.blade.php
Read also: Laravel 6 | Create API Authentication using Laravel Passport
Now you can run it and check it.
#laravel #fullcalendar-js #laravel-8x