我如何在 laravel 完整日历中通过数据库表发送 - PHP (1)

📌 相关文章

📜 我如何在 laravel 完整日历中通过数据库表发送 - PHP (1)

📅 最后修改于: 2023-12-03 15:09:57.393000 🧑 作者: Mango

我如何在 Laravel 中使用数据库表发送完整的日历 - PHP

如果您正在构建一个应用程序或网站，并且需要在其中包括一个完整的日历功能，您可能会遇到以下问题：

如何在 Laravel 中创建和管理日历？
如何将数据库表与日历结合起来，以便可以通过数据库添加和更新事件？
如何将日历事件发送给用户？

在本文章中，我将演示如何使用 Laravel 和 PHP 创建和管理完整的日历，并通过数据库表发送事件。我们将使用 FullCalendar JS 来创建日历。

准备工作

在开始之前，请确保您已经拥有以下软件和工具：

PHP 环境
Laravel
FullCalendar JS

您可以按照 Laravel 的文档来安装 Laravel， FullCalendar JS可以从官网下载 https://fullcalendar.io/docs/getting-started，或从该页面的底部下载 the Latest Version。

第一步：安装 FullCalendar

首先，将 FullCalendar 嵌入到您的 Laravel 项目中，这里以通过 npm 安装为例。

npm install @fullcalendar/core @fullcalendar/daygrid

第二步：创建数据库表

为了在后台管理日历，我们需要在数据库中创建一张表。创建一个 migration 文件来创建表。

php artisan make:migration create_events_table --create=events

在这个 migration 文件中，您需要定义一个 events 表，以保存事件数据。在 events 表中，您需要为每个事件定义以下字段：

id: 事件的唯一 ID，自增长。
title: 事件的标题。
start_date: 事件的开始日期/时间。
end_date: 事件的结束日期/时间。

可以通过以下代码来编写上述 migration：

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateEventsTable extends Migration
{
    public function up()
    {
        Schema::create('events', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->dateTime('start_date');
            $table->dateTime('end_date');
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::dropIfExists('events');
    }
}

现在运行 migration：

php artisan migrate

第三步：创建路由

与创建任何 Laravel 应用程序一样，在 routes/web.php 文件中定义一个路由。

Route::get('/', 'EventController@index');
Route::post('/create-event', 'EventController@create')->name('event.create');

在这里我们定义了两个路由：

GET 请求 "/", 将调用 index 方法。
POST 请求 "/create-event"，将调用 create 方法。

第四步：创建控制器

现在在控制器中添加两个方法 index 和 create。 index 方法显示日历，create 方法创建事件。

<?php

namespace App\Http\Controllers;

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

class EventController extends Controller
{
    public function index()
    {
        return view('events.index');
    }

    public function create(Request $request)
    {
        $event = new Event();
        $event->title = $request->title;
        $event->start_date = \Carbon\Carbon::parse($request->start_date);
        $event->end_date = \Carbon\Carbon::parse($request->end_date);
        $event->save();

        return response()->json([
            'success' => true,
            'message' => 'Event created successfully.',
        ]);
    }
}

在上面的代码中，我们首先从请求中获取到标题和日期信息，然后将它们保存到数据库中。我们使用 Carbon 来解析和格式化日期。

第五步：创建视图

要创建和管理事件，我们需要两个视图。第一个视图是用于显示完整的日历。第二个视图是用于添加新事件。

完整的日历视图

对于完整的日历视图，我们需要创建一个名为 index.blade.php 的视图文件，其中包含我们 previously mention 安装的 FullCalendar JS 和以下代码。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset='UTF-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar</title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['dayGrid'],
                events: '/events'
            });
            calendar.render();
        });
    </script>
</head>

<body>
    <div id='calendar'></div>
</body>

</html>

在上面的代码中，我们首先链接 FullCalendar 样式和 JavaScript 文件，然后使用 JavaScript 代码创建日历。

添加新事件视图

接下来，我们需要为添加新事件创建一个视图。创建名为 create.blade.php （并确保这个视图包含在视图文件夹 events 中）的视图文件，并包含以下 HTML 和 JavaScript 代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Event</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
    <script>
        $(document).ready(function () {

            var calendar = $('#calendar').fullCalendar({
                editable: true,
                events: "/events",
                selectable: true,
                selectHelper: true,
                select: function (start, end, allDay) {
                    $('#modal').modal('show');
                    $('#event_start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
                    $('#event_end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
                }
            });

            $('form#create-form').on('submit', function (e) {
                e.preventDefault();
                let title = $('#title').val();
                let start_date = $('#event_start').val();
                let end_date = $('#event_end').val();

                if (!title || !start_date || !end_date) {
                    alert('The event title, start date, and end date are required!');
                    return;
                }

                $.ajax({
                    url: '{{ route('event.create') }}',
                    type: 'POST',
                    data: $(this).serialize(),
                    dataType: 'json',
                    success: function (response) {
                        if (response.success) {
                            calendar.fullCalendar('refetchEvents');
                            $('#modal').modal('hide');
                            $('form#create-form').trigger('reset');
                        } else {
                            console.log(response.message);
                        }
                    },
                    error: function (response) {
                        console.log(response);
                    }
                });
            });
        });
    </script>

</head>

<body>
    <div class="container">
        <br />
        <h2>Add Event</h2>
        <form id="create-form">
            <div class="form-group">
                <label for="title">Title:</label>
                <input type="text" class="form-control" id="title" name="title">
            </div>
            <div class="form-group">
                <label for="event_start">Start:</label>
                <input type="datetime-local" class="form-control" name="start_date" id="event_start">
            </div>
            <div class="form-group">
                <label for="event_end">End:</label>
                <input type="datetime-local" class="form-control" name="end_date" id="event_end">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</body>

</html>

上面的 HTML 和 JavaScript 代码会通过弹出一个模态框来添加事件。此模态框是使用 Bootstrap 创建的，如果您想使用另一个库也是可以的。

事件信息将通过 AJAX 请求从表单中提取出来，并从客户端发送到服务器，从而将其保存到数据库中。

第六步：添加路由和视图

最后，我们需要将视图添加到路由中，并创建一个用于处理 AJAX 请求的控制器方法。

首先定义一个路由 /events 返回事件数据，如下所示：

Route::get('/events', 'EventController@events')->name('event.events');

接下来在控制器方法中添加以下代码

public function events()
{
    $events = Event::select('id', 'title', 'start_date', 'end_date')->get();
    $formatted_events = [];
    foreach ($events as $event) {
        $formatted_events[] = [
            'id' => $event->id,
            'title' => $event->title,
            'start' => $event->start_date->tz('UTC')->toDateTimeString(),
            'end' => $event->end_date->tz('UTC')->toDateTimeString(),
        ];
    }
    return response()->json($formatted_events);
}

该方法将查询所有事件，并将这些事件格式化为 FullCalendar JSON 数据格式，然后以 JSON 格式返回。您可以在 FullCalendar 文档中找到有关该格式的更多详细信息。

现在在返回的路由中，我们使用 event.create 命名路由并链接到模态窗口的表单：

Route::post('/create-event', 'EventController@create')->name('event.create');

结论

通过使用 Laravel 和 FullCalendar JS ，我们可以创建一个完整的日历，并使用数据库表来存储和管理事件。此方法允许您以可维护的方式管理和更新应用程序中的日历。

要了解有关 FullCalendar 或 Laravel 的进一步信息，请访问官方文档 –

FullCalendar ：https://fullcalendar.io/

Laravel：https://laravel.com/docs/master

以上内容可参考如何在Laravel中使用数据库表，创建完整日历 - PHP_EN 英语版，您也可以根据您的需要对代码进行定制并更改样式等。