Question

因此，我正在创建一个具有日历的页面，我想显示插入到数据库另一页上的事件

如何在日历上显示事件？

这是模板随附的js代码（我没有很多js技能）

我认为显示事件的部分在“事件：[...] 但我不知道如何从数据库中获取数据

var initCalendar = function() {
    var $calendar = $('#calendar');
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $calendar.fullCalendar({
        header: {
            left: 'title',
            right: 'prev,today,next,basicDay,basicWeek,month'
        },

        timeFormat: 'h:mm',

        titleFormat: {
            month: 'MMMM YYYY',      // September 2009
            week: "MMM d YYYY",      // Sep 13 2009
            day: 'dddd, MMM d, YYYY' // Tuesday, Sep 8, 2009
        },

        themeButtonIcons: {
            prev: 'fa fa-caret-left',
            next: 'fa fa-caret-right',
        },
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false,
                className: 'fc-event-danger'
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    });

我还没有创建数据库表，但是我知道如何制作它。

Answer 1

有很多方法可以实现这一目标。

最好和最简单的方法是将 AJAX REQUEST 发送到服务器端脚本。服务器端脚本查询数据库，处理数据并返回对ajax请求的响应。考虑使用echo json_encode($array_values)中的Php进行此操作。从那里，您可以在ajax请求中使用javascript处理响应。您可能需要像var result = JSON.parse(data)中的javascript那样解析响应。

例如：

//Within Your HTML Script
axios({
  method: 'POST', //you can set what request you want to be
  url: 'getdb.php',
  data: {id: 1},
})
.then(function (response) {
  // Server side response
  var result = JSON.parse(response.data);
  console.log(result );
})
.catch(function (error) {
  console.log(error);
});

//getdb.php
<?php
$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$array_values = array();
// output data of each row
while($row = $result->fetch_assoc()) {
   $array_values[] = $row;
};
echo json_encode($array_values)
$conn->close();
?>

另一种方法是在Php中使用HTML进行服务器端调用时。在这种情况下：

    <script>
      var result = JSON.parse(JSON.stringify("<?php echo json_encode($array_values)?>"));
    </script>

最后，您也可以将HTML嵌入Php中。将会是：

    <?php
     echo "<script>var result = JSON.parse(JSON.stringify('json_encode({$array_values})'))</script>"
    ?>

您从服务器端脚本获得的响应如下：

$array_values = array('header' => 
                           array('left' => 'title', 'right' => 'prev,today....'),
                      'timeFormat' => 'h:mm',
                      .....,
                      'events' => array(
                           array('title' => 'All Day', 'start' => 'Date...'),
                           array('title' => 'All Day', 'start' => 'Date...'),
                           array('title' => 'All Day', 'start' => 'Date...'),
                       )

                )
echo json_encode($array_values );

然后在您的JavaScript中，您可以执行以下操作：

var result = JSON.parse(response.data);
$calendar.fullCalendar(result);

OR

//independently change each property without affecting others
var result = JSON.parse(response.data);
$calendar.fullCalendar().header= result.header;
$calendar.fullCalendar().timeFormat= result.timeFormat;
$calendar.fullCalendar().events= result.events;

//$calendar.fullCalendar() function is simply accepting an object as a parameter

之所以可以执行此操作，是因为服务器端响应之后，javascript变量结果现在看起来像这样：

result = {
        header: {
            left: 'title',
            right: 'prev,today,next,basicDay,basicWeek,month'
        },
        timeFormat: 'h:mm',
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
        }

这显然取决于您如何构造来自Php的响应；

Answer 2

使用jquery ajax函数获取数据。

    events: function(start, end, timezone, callback) {
jQuery.ajax({
            url: 'abc.php',
            type: 'POST',
            dataType: 'json',
            data: {
                start: start.format(),
                end: end.format()
            },
            success: function(responce) {
                var events = responce.bookingData;
                callback(events);
            }
        });
}

从数据库获取数据到js数组

2 个答案: