Tutorial De Ejemplo De Calendario Completo De Laravel 8 Vue JS

Hoy, aprenderemos paso a paso cómo integrar vuejs fullcalendar en laravel 8 (Tutorial de ejemplo de Laravel 8 Vue JS Fullcalendar). estamos usando los paquetes npm vue-full-calendar y Moment en este ejemplo de calendario completo.

FullCalendar es útil para reservar citas, programar eventos, administrar tareas y ver qué personas se van en este mes en curso, etc.

También puede ver a continuación nuestro Tutorial de ejemplo de calendario completo de Laravel 8.

Para que pueda ver nuestro código fuente de ejemplo.

Visión general

Paso 1: Instalar laravel
Paso 2: Establecer la configuración de la base de datos
Paso 3: Crear tabla usando la migración
Paso 4: Crear ruta
Paso 5: Crear un modelo y controlador
Paso 6: Instalar Vue
Paso 7: Crear componente y actualizar app.js
Paso 8: Actualizar Blade Files
Paso 9: Ejecute nuestra aplicación Laravel

Paso 1: instala laravel

Instala el laravel usando el siguiente comando.

1	composer create-project --prefer-dist laravel/laravel laravel8_vuejs_fullcalendar

Paso 2: Establecer la configuración de la base de datos
Después de la instalación completa de laravel. tenemos que configurar la base de datos. ahora abriremos el archivo .env y cambiaremos el nombre de la base de datos, el nombre de usuario y la contraseña en el archivo .env. Vea los cambios a continuación en un archivo .env.

1 2 3 4 5 6

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Enter_Your_Database_Name(laravel8_vuejs_fullcalendar) DB_USERNAME=Enter_Your_Database_Username(root) DB_PASSWORD=Enter_Your_Database_Password(root)

Paso 3: Crear tabla usando la migración
Ahora, necesitamos crear una migración. por lo que a continuación usaremos el comando crear la migración de la tabla de reservas.
Cree la tabla usando el siguiente comando.

1	php artisan make:migration create_bookings_table --create=bookings

Después de completar la migración. necesitamos los siguientes cambios en el archivo database / migrations / create_bookings_table.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateBookingsTable extends Migration {     /**      * Run the migrations.      *      * @return void      */     public function up()     {         Schema::create('bookings', function (Blueprint $table) {             $table->bigIncrements('id');             $table->string('title');             $table->date('start');             $table->date('end');             $table->timestamps();         });     }     /**      * Reverse the migrations.      *      * @return void      */     public function down()     {         Schema::dropIfExists('bookings');     } } ?>

Ejecute el siguiente comando. después de los cambios del archivo anterior.

1	php artisan migrate

Paso 4: Crear ruta
Agregue el siguiente código de ruta en el archivo “routes / web.php”.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<?php use App\Http\Controllers\FullCalendarController;   /* |-------------------------------------------------------------------------- | 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('/', function () {     return view('welcome'); });       Route::get('/booking',[FullCalendarController::class, 'index']); ?>

Paso 5: crear un modelo y un controlador

Ahora, crearemos el controlador y el modelo usando el siguiente comando y pegaremos el siguiente código en este controlador.

1	php artisan make:controller FullCalendarController

1	php artisan make:model Booking

FullCalendarController.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<?php   namespace App\Http\Controllers;   use Illuminate\Http\Request; use App\Models\Booking; use Redirect,Response;   class FullCalendarController extends Controller {     public function index() { $bookings = Booking::get(['title','start','end']); return response()->json(["bookings" => $bookings]); } }   ?>

Booking.php

1 2 3 4 5 6 7 8 9 10 11 12

<?php   namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model;   class Booking extends Model {     use HasFactory;     protected $fillable = ['title','start','end']; } ?>

Paso 6: Instale Vue
En este paso, vaya al directorio del proyecto usando el símbolo del sistema. después de eso, instalaremos Vue js en laravel 8 y ejecutaremos la dependencia fullcalender.

1 2 3 4 5 6 7

php artisan preset vue npm install   npm install --save vue-full-calendar npm install --save babel-runtime npm install babel-preset-stage-2 --save-dev npm install moment --save

Paso 7: Cree el componente y actualice los recursos de app.js
/ js / components / FullCalendarComponent.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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

resources / js / app.js

1 2 3 4 5 6 7 8 9 10 11

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', });

Paso 8: Actualice los archivos Blade
Por último, primero debemos crear el archivo app.blade.php en "resources / views / layouts /" y actualizar el archivo welcome.blade.php en el directorio "resources / views /". para que pueda ver el siguiente código.
recursos / vistas / diseños / app.blade.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!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>{{ config('app.name', 'Laravel') }}</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>

welcome.blade.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@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 8 Vue JS Fullcalendar Example Tutorial</div>                   <div class="card-body">                   <fullcalendar-component></fullcalendar-component>                 </div>             </div>         </div>     </div> </div> @endsection

Paso 9: Ejecutar nuestra aplicación Laravel
Podemos iniciar el servidor y ejecutar este ejemplo usando el siguiente comando.

1 2 3

npm run dev //or npm run watch

Ahora ejecutaremos nuestro ejemplo usando la siguiente URL en el navegador.

1	http://127.0.0.1:8000/users