使用 Bootstrap、PHP 和 MySQL 集成 jQuery Fullcalendar

在本节中，我们将学习如何集成 jQuery Fullcalendar。我们将使用 MySQL、Bootstrap 和 PHP 来实现。在我们的示例中，我们将使用 PHP、Bootstrap 和 MySQL 来集成 Fullcalendar 事件的 CRUD 操作。JQuery 库是 Fullcalendar 的一部分，用于提供显示带事件的日历等功能。

Fullcalendar JS 提供了显示周、月、年和日日历的功能。它还具有进行拖放事件管理的功能。当我们处理任务管理、事件管理或任何其他与日期相关的事情时，使用 Fullcalendar 这样的事件日历会非常有用。在我们下面的示例中，我们将使用 MySQL 数据库创建一个名为“events”的表。我们还将使用 JQuery Ajax 来创建 CRUD 操作，如下所述：

• 事件列表
• 创建事件
• 更新事件
• 删除事件

为了通过使用 Php MySQL 集成 fullcalendar 事件，下面将描述逐步过程：

步骤 1

在此步骤中，我们将创建事件表。在这里，我们将使用我们的数据库并在其中创建一个名为“events”的新表。为了创建此表，我们将使用 SQL 查询，如下所述：

item 表

步骤 2

在此步骤中，我们将创建数据库配置文件。为此，我们需要设置数据库的一些详细信息，如用户名、密码和数据库名称。之后，我们将使用我们的根目录并创建一个名为“db_config.php”的新文件，并在此文件中添加以下代码，如下所示：

db_config.php

步骤 3

在此步骤中，我们将创建视图文件。在这里，将创建一个名为 index.php 的新视图文件。此文件用于渲染 Fullcalendar 布局。Ajax 代码和 jQuery 代码将在此文件中编写。此文件将包含各种 js 和 css 文件，如下所述：

• Jquery.mim.js
• Fullcalendar.css
• Fullcalendar.min.js
• Bootstrap.css
• Moment.min.js

现在我们将创建一个名为 index.php 的文件，然后在此文件中添加以下代码，如下所示：

index.php

步骤 4

在此步骤中，我们将创建 Ajax 文件。在我们的应用程序中，将为 Ajax 方法创建四个文件，如下所述：

• Events.php
• Add_events.php
• Delete_events.php
• Update_events.php

现在，将按以下方式描述上述四个文件的创建。我们将逐一将以下代码添加到这些文件中。首先，我们将创建 events.php 文件，并将以下代码放入其中，如下所示：

events.php

现在我们将创建一个 add_events.php 文件，并将以下代码添加到其中，如下所示：

add_events.php

之后，我们将创建一个 delete_event.php 文件，并将以下代码添加到其中，如下所示：

delete_event.php

最后，我们将创建一个 update_events.php 文件，并将以下代码添加到其中，如下所示：

update_events.php

现在我们的上述代码已准备好运行。为了快速运行上述代码，我们将使用我们的根目录并运行以下命令：

现在我们可以使用浏览器打开以下 URL：

打开后，我们可以看到以下输出