日程安排控件dhtmlxScheduler的使用教程：如何使用PHP 实现调度程序-控件新闻-慧都网

日程安排控件dhtmlxScheduler的使用教程：如何使用PHP 实现调度程序

翻译|使用教程|编辑：董玉霞|2022-02-28 10:49:23.643|阅读 324 次

概述：在dhtmlxScheduler的使用教程中，您将找到有关如何在没有任何框架的情况下使用PHP创建调度程序的具体操作过程。我们将使用MySQL作为数据存储和数据访问的PDO接口，创建调度程序的先决条件是启用PDO_MYSQL扩展的PHP5.4或更高版本以及MySQL或MariaDB。

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

在dhtmlxScheduler的使用教程中，您将找到有关如何在没有任何框架的情况下使用PHP创建调度程序的具体操作过程。我们将使用MySQL作为数据存储和数据访问的PDO接口，创建调度程序的先决条件是启用PDO_MYSQL扩展的PHP5.4或更高版本以及MySQL或MariaDB。

下面，我们将分布介绍具体操作方法：

点击获取dhtmlxScheduler官方正式版

步骤一：创建项目

我们从在应用程序准备一个新目录开始，让我们创建一个空的项目文件夹并命名它scheduler-howto-php-plain。

步骤二：将调度程序添加到页面

现在我们需要用我们的调度器创建一个页面，在文件夹中创建一个index.html文件，scheduler-howto-php-plain并用以下内容填充它：

<!doctype html>
<html>
    <head>
      <title> Getting started with dhtmlxScheduler</title>
      <meta charset="utf-8">
      <script src="//cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.js"></script>
      <link href="//cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler_material.css" 
              rel="stylesheet" type="text/css" charset="utf-8">
        <style>
            html, body{
                margin:0px;
                padding:0px;
                height:100%;
                overflow:hidden;
            }

        </style> 
    </head> 
    <body> 
    <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'> 
        <div class="dhx_cal_navline"> 
            <div class="dhx_cal_prev_button"> </div> 
            <div class="dhx_cal_next_button"> </div> 
            <div class="dhx_cal_today_button"></div> 
            <div class="dhx_cal_date"></div> 
            <div class="dhx_cal_tab" name="day_tab"></div> 
            <div class="dhx_cal_tab" name="week_tab"></div> 
            <div class="dhx_cal_tab" name="month_tab"></div> 
    </div> 
    <div class="dhx_cal_header"></div> 
    <div class="dhx_cal_data"></div> 
    </div> 
    <script>
        scheduler.init('scheduler_here', new Date(2019,0,20), "week");
        scheduler.load("data/api.php");
 
        var dp = new dataProcessor("data/api.php");
        dp.init(scheduler);
        dp.setTransactionMode("JSON"); // use to transfer data with JSON
    </script> 
    </body> 
</html>

现在您可以运行应用程序以查看调度程序在页面上呈现：

dhtmlxScheduler,JavaScript,日程安排,React JS

步骤三：准备数据库

通过以上步骤我们就拥有一个空的调度程序，是时候创建一个数据库并将其连接到我们的应用程序了。

您可以从您最喜欢的mysql客户端（例如 phpMyAdmin）或通过控制台创建数据库，这是用于创建带有日历事件表的新数据库：

CREATE DATABASE  IF NOT EXISTS `scheduler_howto_php`;
USE `scheduler_howto_php`;
 
DROP TABLE IF EXISTS `events`;
CREATE TABLE `events` (
  `id` int(11) AUTO_INCREMENT,
  `start_date` datetime NOT NULL,
  `end_date` datetime NOT NULL,
  `text` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) DEFAULT CHARSET=utf8;

要通过mysql控制台导入，请使用上面的代码创建一个dump.sql文件，并在shell中执行以下命令：

$ mysql -uuser -ppass scheduler < mysql_dump.sql

步骤四:加载数据

创建数据库后，我们需要用实际数据填充调度程序,我们在项目文件夹中创建一个名为data的新文件夹。

首先，在配置data/config.php文件中定义数据库连接参数：

<?php
$dsn = "mysql:host=localhost;dbname=scheduler_howto_php";
$username = "root";
$password = "";
 
$options = array(
    PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'",
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
);

添加一个php脚本，该脚本将从客户端调用以从数据库加载数据或将调度程序更改保存回数据库。

api.php在文件夹中创建一个名为的新文件data并添加以下代码以创建和打开连接：

<?php
require_once("config.php");
$db = new PDO($dsn, $username, $password, $options);

然后，我们可以实现一个函数来获取连接并从数据库中读取调度程序数据：

function read($db, $requestParams){
    $queryParams = [];
    $queryText = "SELECT * FROM `events`";
    $query = $db->prepare($queryText);
    $query->execute($queryParams);
    $events = $query->fetchAll();
    return $events;
}

最后，我们可以创建我们的请求处理程序：

switch ($_SERVER["REQUEST_METHOD"]) {
    case "GET":
        $result = read($db, $_GET);
        break;
    case "POST":
        // we'll implement this later
    break;
    default: 
        throw new Exception("Unexpected Method"); 
    break;
}
header("Content-Type: application/json");
echo json_encode($result);

现在，如果您将一些事件添加到数据库中，它们将出现在您的调度程序中。

步骤五：保存更改

实现后端处理程序

目前，调度程序可以从后端读取数据。我们把它将更改写回数据库。客户端将以JSON模式工作，这意味着它将发送事件操作的POST请求，检查请求的格式以及调度程序将使用的所有路由。

现在是时候添加“创建”、“更新”和“删除”函数来执行诸如创建新事件、更新现有事件以及从数据库中删除事件等操作了。

返回data/api.php并将以下代码添加到文件中：

// create a new event
function create($db, $event){
    $queryText = "INSERT INTO `events` SET
        `start_date`=?,
        `end_date`=?,
        `text`=?";
    $queryParams = [
        $event["start_date"],
        $event["end_date"],
        $event["text"]
    ];
    $query = $db->prepare($queryText);
    $query->execute($queryParams);
    return $db->lastInsertId();
}
// update an event
function update($db, $event, $id){
    $queryText = "UPDATE `events` SET
        `start_date`=?,
        `end_date`=?,
        `text`=?
        WHERE `id`=?";
    $queryParams = [
        $event["start_date"],
        $event["end_date"],
        $event["text"],
        $id
    ];
    $query = $db->prepare($queryText);
    $query->execute($queryParams);
}
// delete an event
function delete($db, $id){
    $queryText = "DELETE FROM `events` WHERE `id`=? ;";
    $query = $db->prepare($queryText);
    $query->execute([$id]);
}

之后，我们可以调用这个函数来处理一个POST请求：

$db = new PDO($dsn, $username, $password, $options);
switch ($_SERVER["REQUEST_METHOD"]) {
    case "GET":
        $result = read($db, $_GET);
        break;
    case "POST": 
        $requestPayload = json_decode(file_get_contents("php://input")); 
        $id = $requestPayload->id; 
        $action = $requestPayload->action; 
        $body = (array) $requestPayload->data; 
        $result = [ 
            "action" => $action 
        ]; 
        if ($action == "inserted") {; 
            $databaseId = create($db, $body); 
            $result["tid"] = $databaseId; 
        } elseif($action == "updated") { 
            update($db, $body, $id); 
        } elseif($action == "deleted") { 
            delete($db, $id); 
        } 
    break; 
    default: 
        throw new Exception("Unexpected Method"); 
    break;
}
 
header("Content-Type: application/json");
echo json_encode($result);

在客户端启用数据保存

最后，我们将配置客户端以利用我们刚刚实现的API：

scheduler.init("scheduler_here", new Date(2019, 0, 20), "week");
scheduler.setLoadMode("day");
 
// load data from the backend
scheduler.load("data/api.php"); 
 
// send updates to the backend
var dp = new dataProcessor("data/api.php"); 
dp.init(scheduler);  
// set data exchange mode
dp.setTransactionMode("JSON");

如果您现在重新启动应用程序，您应该能够在调度程序中创建删除和修改事件，所有更改都将在您重新加载页面后出现。

dhtmlxScheduler,JavaScript,日程安排,React JS