Header Ads Widget

Ticker

6/recent/ticker-posts

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.

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.

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.

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.

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

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

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

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.

FullCalendarController.php

Booking.php

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.

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

resources / js / app.js

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

welcome.blade.php

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

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

Publicar un comentario

0 Comentarios