README

Laravel Nova Fullcalender 是基于 Laravel Nova 工具构建的事件日历。

开始使用

按照官方网站的说明创建一个新的 Laravel 应用程序并使用 Laravel Nova

• Laravel
• Laravel Nova

创建一个简单的 Event 模型

php artisan make:model Event --migration

将 Event 字段添加到 create_events_table.php 迁移文件

    public function up()
    {
        Schema::create('events', function (Blueprint $table) {
            $table->increments('id');
            $table->text('title');
            $table->dateTime('start_date')->nullable();
            $table->dateTime('end_date')->nullable();
            $table->timestamps();
        });
    }

安装 Laravel 5 Full Calendar Helper 并 实现事件接口

composer require maddhatter/laravel-fullcalendar

执行迁移

php artisan migrate

更新 App\Nova\Event.php 资源的字段

    public function fields(Request $request)
    {
        return [
            ID::make()->sortable(),
            Text::make('Title')->rules('required'),
            DateTime::make('From', 'start_date'),
            DateTime::make('To', 'end_date'),
        ];
    }

在 App\Event.php 模型中定义 $dates

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

制作过程

本节是构建 Laravel Nova Fullcalendar 的逐步指南。一旦正确设置了 Laravel 和 Laravel Nova，请遵循 Laravel Nova 文档 创建一个空白工具

php artisan nova:tool horaceho/fullcalendar

Would you like to install the tool's NPM dependencies? (yes/no) [yes]:
> yes
Would you like to compile the tool's assets? (yes/no) [yes]:
> yes
Would you like to update your Composer packages? (yes/no) [yes]:
> yes

更新 app/Providers/NovaServiceProvider

use Horaceho\Fullcalendar\Fullcalendar;

    public function tools()
    {
        return [
            new Fullcalendar,
        ];
    }

将路由添加到 nova-components/Fullcalendar/routes/api.php

use App\Event;

Route::get('/events', function (Request $request) {
    $events = Event::all();
    return response()->json($events);
});

安装一个日历模块，我们选择了 @fullcalendar/vue

npm install --save @fullcalendar/vue
npm install --save @fullcalendar/core
npm install --save @fullcalendar/daygrid
npm install --save @fullcalendar/timegrid
npm install --save @fullcalendar/interaction

移除 ajv@^6.0.0 警告

npm install ajv@^6.0.0 --save

切换到工具文件夹，并自动编译资源

cd nova-components/Fullcalendar
npm run watch

在 nova-components/Fullcalendar/resources/js/tool.js 中导入日历

Nova.booting((Vue, router) => {
    router.addRoutes([
        {
            name: 'fullcalendar',
            path: '/fullcalendar',
            component: require('./components/Tool'),
        },
    ])
})

在 nova-components/Fullcalendar/resources/js/components/Tool.vue 中显示日历

<template>
    <div>
        <FullCalendar 
            @dateClick="handleDateClick"
            @eventClick="handleEventClick"
            @eventMouseEnter="handleMouseEnter"
            @eventMouseLeave="handleMouseLeave"
            ref="fullCalendar"
            :plugins="calendarPlugins"
            :weekends="calendarWeekends"
            :events="calendarEvents"
            :header="{
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,listWeek'
            }"
        />
    </div>
</template>

<script>

import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

export default {
    components: {
        FullCalendar
    },
    methods: {
        handleDateClick(info) {
            console.log(info);
        },
        handleEventClick(info) {
            console.log(info);
        },
        handleMouseEnter(info) {
            console.log(info);
        },
        handleMouseLeave(info) {
            console.log(info);
        },
    },
    data() {
        return {
            calendarPlugins: [
                dayGridPlugin,
                timeGridPlugin,
                interactionPlugin
            ],
            calendarWeekends: true,
            calendarEvents: [
                { title: "Today", start: new Date() }
            ]
        };
    },
    mounted() {
        console.log('mounted()')
        axios.get('/horaceho/fullcalendar/events').then(response => {
            this.events = response.data
            if (this.events) {
                this.calendarEvents = []
                this.events.forEach((event) => {
                    this.calendarEvents.push({
                        title: event.title,
                        start: event.start_date,
                        end: event.end_date
                    })
                })
            }
        });
    },
}

</script>

<style>
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timegrid/main.css";
</style>

现在，创建一些事件以显示在日历上...

致谢

• 发布您的第一个 Laravel Nova 工具 by Sara Bine

许可证

Laravel Nova Fullcalendar 是开源软件，受 MIT 许可 许可。