Fullcalendar

Posted on: January 29, 2020 12:18 PM

Posted by: Renato

Categories: Laravel

Como implementar fullcalendar jQuery em laravel 5.7

Biblioteca: https://fullcalendar.io/docs

Neste post, estamos compartilhando com você como implementar calendário completo (JavaScript Event Calendar) em laravel 5.7. Para usar o calendário completo, vamos representar nossas tarefas diárias, eventos e agendar uma base diária e também a data de início até a data final. Neste post mostro como instalar e implementar um exemplo básico para o calendário completo com dados fictícios. Depois de concluir este tutorial, sua saída ficará assim.

nstalar o pacote Fullcalendar

use o comando composer

- composer require maddhatter/laravel-fullcalendar

próximo registro em app.php

providers

MaddHatter\LaravelFullcalendar\ServiceProvider::class,

aliases

'Calendar' => MaddHatter\LaravelFullcalendar\Facades\Calendar::class,

Event table

próxima tabela de eventos de criação para dados de eventos da loja com migração

php artisan make:migration create_events_table

abrir o arquivo e preencher a função(migration) com

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

            $table->increments('id');
            $table->string('title');
            $table->date('start_date');
            $table->date('end_date');
            $table->timestamps();
        });

Save e continue.

- php artisan migrate

Insira dados de sementes com a semeadora

php artisan make:seeder AddDummyEvent

abra AddummyEvent.php

<?php

use Illuminate\Database\Seeder;
class AddDummyEvent extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {

          $data = [
         ['title'=>'Finacial forum', 'start_date'=>'2017-10-12', 'end_date'=>'2017-09-15'],
         ['title'=>'Devtalk', 'start_date'=>'2017-10-13', 'end_date'=>'2017-09-25'],
         ['title'=>'Super Event', 'start_date'=>'2017-09-23', 'end_date'=>'2017-09-24'],
         ['title'=>'wtf event', 'start_date'=>'2017-09-19', 'end_date'=>'2017-09-27'],
        ];
        \DB::table('events')->insert($data);
    }
}

Salve

- php artisan db:seed --class=AddDummyEvent

agora temos dados fictícios

Event Model

próximo criar modelo com artesão

- php artisan make:model Event

Próxima inserção preenchível

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Event extends Model
{
    //
    protected $fillable = ['title','start_date','end_date'];
}

Event Controller

Próximo criar controlador de evento com artesão

- php artisan make:controlelr EventController

Abra o arquivo e copie o código abaixo e cole

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Event;
use Calendar;
class EventController extends Controller
{
       public function index()
            {
                $events = [];
                $data = Event::all();
                if($data->count()) {
                    foreach ($data as $key => $value) {
                        $events[] = Calendar::event(
                            $value->title,
                            true,
                            new \DateTime($value->start_date),
                            new \DateTime($value->end_date.' +1 day'),
                            null,
                            // Add color and link on event
                         [
                             'color' => '#ff0000',
                             'url' => 'pass here url and any route',
                         ]
                        );
                    }
                }
                $calendar = Calendar::addEvents($events);
                return view('fullcalender', compact('calendar'));
            }
}

Primeiro incluímos o modelo Event e a classe Calendar e buscamos dados com loop e os tornamos compatíveis com fullcalendar e enviamos o objeto completo para a visualização fullcalendar com o compact

Event view

Em seguida, crie criar o layout, leia o nome layout.blade.php e copie o código abaixo e cole e salve.

<!doctype html>

<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        @yield('style')
        <title>Laravel</title>
<!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
        </style>
    </head>
    <body>
        @yield('content')
    </body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    @yield('script')
</html>

Em seguida, crie fullcalendar.blade.php e copie o código e cole

 @extends('layout')
@section('style')
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
@endsection
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Full Calendar Example</div>
<div class="panel-body">
                    {!! $calendar->calendar() !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
{!! $calendar->script() !!}
@endsection