完整日历 - 为事件对象添加额外的属性

ban*_*bob 3 php jquery json fullcalendar

可能是由于我缺乏理解,但我正在使用 PHP 返回一个 JSON 字符串来带回事件数据。

<?php

  $json = array();

  // Query that retrieves events
  $requete = "SELECT * FROM DoctorAvailability ORDER BY id";

   try {
        $bdd = new PDO("mysql:host=$servername;dbname=$dbname",$username,$password);
      } catch(Exception $e) {
        exit('Unable to connect to database.');
      }
     // Execute the query
    $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));

    echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));
 ?>
Run Code Online (Sandbox Code Playgroud)

在数据库中有六个字段。

Id, title, start, end, backgroundColor, name.
Run Code Online (Sandbox Code Playgroud)

我想带回这个名字,尽管例如在 eventClick 中说我尝试

 eventClick: function (calEvent, jsEvent, view) {
           calEvent.name;
Run Code Online (Sandbox Code Playgroud)

它不存在。

我知道我的理解中缺少一些东西,但我花了很长时间在谷歌上搜索无济于事。

小智 5

FullCalendar 版本 4:任何自定义值都可以在事件对象的extendedProps ”中找到

events: [

                    {
                    title: 'My Title',
                    My_Custom_Value: 'non-standard Event Object field',
                    allDay: false,
                    start: 1501056000000,
                    end: 1501057800000
                    }
],

eventRender: function(info){

                    console.log("_______ info _______\n");
                    console.log(info.event.extendedProps.My_Custom_Value);
}
Run Code Online (Sandbox Code Playgroud)

extendedProps
一个普通对象,包含在解析过程中指定的其他杂项属性。接收显式给定的extendedProps 散列中的属性以及其他非标准属性。”

https://fullcalendar.io/docs/event-object


cam*_*ase 2

您可能会考虑使用eventRender它允许您访问添加的非标准字段。

eventRender: function(event, element) {
    console.log(event.name);
}
Run Code Online (Sandbox Code Playgroud)

来自文档

除了上述字段之外,您还可以在每个事件对象中包含您自己的非标准字段。FullCalendar 不会修改或删除这些字段。例如,开发人员通常会包含一个描述字段以用于回调(例如 eventRender)。

更新:

这是我用来构建事件数据的方法:

// construct the array
foreach ($events as $e) {
    $eventList[] = array(
        'id' => 'event-' . $e->id, // unique identifier for aligning editing window 
        'allDay' => false, // makes the times show
        'title' => $e->fullname, // shows the user's name
        'start' => $e->start_time, // their start time (start working)
        'end' => $e->end_time, // their end time (done working)
        'notes' => $e->notes ? $e->notes : '', // notes, if applicable
        'className' => 'event-' . $e->id,
        'user' => $e->user
    );
};

// echo the data, json encoded for the calendar
echo json_encode($eventList);
Run Code Online (Sandbox Code Playgroud)

然后我使用上面提到的访问特定数据eventRender

eventRender: function(event, element) {
    element.qtip({
        content: event.notes, // This is a non-standard, custom attribute!
        position: {
            my: 'top left',
            at: 'bottom left'
        }
    });
},
Run Code Online (Sandbox Code Playgroud)