Laravel完整日历 [英] Laravel Full Calendar

问题描述

我正在尝试遵循本教程 https://laravelcode.com/post/laravel-full-calendar-tutorial-example-using-maddhatter-laravel-fullcalendar .我完成了每个步骤，但日历仍然没有出现，只有Laravel标头和完整日历示例"文字，但没有日历本身，或者如果我删除了"extends('layout.php')"，则什么也不会出现.:(可能是什么问题?我希望有人能给出一个快速的答案.对不起，如果这是一个不好的问题.我的代码:

I'm trying to follow this tutorial https://laravelcode.com/post/laravel-full-calendar-tutorial-example-using-maddhatter-laravel-fullcalendar. I completed every steps but the calendar still does not appear, only the Laravel header and the "Full Calendar Example" writing but not the calendar itself or if I remove "extends('layout.php')" nothing appears. :( What could be the problem? I hope someone can give a quick answer. Sorry if it's a bad question here. My code:

config/app.php

config/app.php

'providers' => [
    .....
    .....
    MaddHatter\LaravelFullcalendar\ServiceProvider::class,
],
'aliases' => [
    .....
    .....
    'Calendar' => MaddHatter\LaravelFullcalendar\Facades\Calendar::class,
]

数据库/迁移/CreateEventsTable

database/migrations/CreateEventsTable

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateEventsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('events', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->date('start_date');
            $table->date('end_date');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop("events");
    }
}

app/Event.php

app/Event.php

namespace App;
use Illuminate\Database\Eloquent\Model;

class Event extends Model
{
    protected $fillable = ['title','start_date','end_date'];
}

database/seeds/AddDummyEvents.php

database/seeds/AddDummyEvents.php

use Illuminate\Database\Seeder;
use App\Event;

class AddDummyEvent extends Seeder
{
    public function run()
    {
        $data = [
            ['title'=>'Demo Event-1', 'start_date'=>'2017-09-11', 'end_date'=>'2017-09-12'],
            ['title'=>'Demo Event-2', 'start_date'=>'2017-09-11', 'end_date'=>'2017-09-13'],
            ['title'=>'Demo Event-3', 'start_date'=>'2017-09-14', 'end_date'=>'2017-09-14'],
            ['title'=>'Demo Event-3', 'start_date'=>'2017-09-17', 'end_date'=>'2017-09-17'],
        ];
        foreach ($data as $key => $value) {
            Event::create($value);
        }
    }
}

routes/web.php

routes/web.php

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');
Route::get('events', 'EventController@index');

app/Http/Controllers/EventController.php

app/Http/Controllers/EventController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Calendar;
use App\Event;

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' => '#f05050',
                        'url' => 'pass here url and any route',
                    ]
                );
            }
        }
        $calendar = Calendar::addEvents($events);
        return view('fullcalendar', compact('calendar'));
    }
}

resources/views/fullcalendar.blade.php

resources/views/fullcalendar.blade.php

@extends('layouts.app')

@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

推荐答案

不确定为什么将其排除在本教程之外，但是他们没有设置布局刀片文件.他们还忘记了包括jQuery.如果将fullcalendar.blade.php更改为以下代码，它将起作用.

Unsure why it was left out of the tutorial, but they didn't have you set up a layout blade file. They also forgot to include jquery. If you change fullcalendar.blade.php to the following code it works.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>




<link rel="stylesheet" type="text/css"         
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet"    
ref="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>

<body>

<div class="container" style="margin-top: 100px">
    <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>

</body>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></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() !!}
</html>

这篇关于Laravel完整日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！