Php 完整日历外部事件列表

我正在尝试将开始日期为null的所有事件加载到我的外部事件列表中，这可以通过在div标记中使用PHP来完成

Unassigned.php

<?php

//load.php
$connect = new PDO('mysql:host=localhost;dbname=service', 'root', '');

$data = array();

$query = "SELECT * FROM install WHERE date_assigned IS NULL";

$statement = $connect->prepare($query);

$statement->execute();
?>

然后将它放在我的html文件中

<div id='external-events'>

      <h4>Draggable Events</h4>

      <div id='external-events-list'>

        <?php while($result = $statement->fetch()): ?>
          <div class='fc-event'><?= $result['Customer']?></div>
        <?php endwhile; ?>
      </div>



    </div>

拖拉事件

我遇到的问题是，它没有保存数据库的id，因此无法更新。我还可以将php转换为json格式

<?php

//load.php
$connect = new PDO('mysql:host=localhost;dbname=service', 'root', '');

$data = array();

$query = "SELECT * FROM install WHERE date_assigned IS NULL";

$statement = $connect->prepare($query);

$statement->execute();
$result = $statement->fetchAll();

foreach($result as $row)
{
 $data[] = array(
  'id'   => $row["Job"],
  'title'   => $row["Customer"],
  'start'   => $row["date_assigned"]
 );
}
echo json_encode($data);
?>

我的想法是，将json值传递到一个循环中以创建我的列表会更简单，我只是不确定如何做到这一点。有人能给我指出正确的方向吗

   window.onload = function() {
  $.getJSON( "calendar/unassigned.php", function(Data2) {
    var tmp = '';
    $.each(Data2, function(key, value){
      tmp += '  <div class="fc-event" data="{title:"'+value.title+'"}"id="'+value.id+'">';
      tmp += value.title;
      tmp += '  </div>';
    });
    $('#cgMain').prepend(tmp);
    $('#calendar-events .fc-event').each(function(event) {
    // store data so the calendar knows to render an event upon drop
    $(this).data('event', {
      id: value.id,
     // id: $.trim($(this).text()), // use the element's text as the event title
      stick: true // maintain when user navigates (see docs on the renderEvent method)
    });
    // make the event draggable using jQuery UI

  });
  });
}

编辑： 我决定使用php文件来创建我的json数据，因为这似乎是FullCalendar所使用的。我像这样阅读这个文件，它可以完美地循环浏览它，把标题拉到我想要的地方。但由于某种原因，我似乎无法让它附加id。有人给我指出正确的方向吗

   window.onload = function() {
  $.getJSON( "calendar/unassigned.php", function(Data2) {
    var tmp = '';
    $.each(Data2, function(key, value){
      tmp += '  <div class="fc-event" data="{title:"'+value.title+'"}"id="'+value.id+'">';
      tmp += value.title;
      tmp += '  </div>';
    });
    $('#cgMain').prepend(tmp);
    $('#calendar-events .fc-event').each(function(event) {
    // store data so the calendar knows to render an event upon drop
    $(this).data('event', {
      id: value.id,
     // id: $.trim($(this).text()), // use the element's text as the event title
      stick: true // maintain when user navigates (see docs on the renderEvent method)
    });
    // make the event draggable using jQuery UI

  });
  });
}

window.onload=function（）{
$.getJSON（“calendar/unassigned.php”，函数（Data2）{
var tmp=''；
$。每个（数据2，函数（键，值）{
tmp+=''；
tmp+=value.title；
tmp+=''；
});
$（'#cgMain'）.prepend（tmp）；
$（'#calendar events.fc event'）。每个（函数（事件）{
//存储数据，以便日历知道在删除时呈现事件
$（此）.data（'事件'{
id:value.id，
//id:$.trim（$（this）.text（）），//使用元素的文本作为事件标题
stick:true//在用户导航时进行维护（请参阅renderEvent方法中的文档）
});
//使用jQuery UI使事件可拖动
});
});
}

FullCalendar有一个内置函数，可以将外部DOM元素拖到日历本身上，并使用源DOM元素的数据添加事件

在HTML中：

 <div id='external-events'>
    <div class='fc-event'>My Event 1</div>
    <div class='fc-event'>My Event 2</div>
    <div class='fc-event'>My Event 3</div>
    <div class='fc-event'>My Event 4</div>
</div>

---

请参阅此处的手册和代码笔：

将ID放入可拖动元素的数据属性中，以便以后可以检索它。我尝试过这样做，但是，我似乎无法在正确的位置调用该属性。您希望在HTML中实现类似的目标：

。我已经尝试过了，这让我选择了将php查询结果加载到div标记中的第一个选项。它循环了所有的东西，只是没有传递任何东西，只是传递了标题。标题只是一个例子，你可以在事件对象中粘贴任何你想要的内容。您可以将数据mydataname=“something”添加到DOM元素中，然后像event.myData=eventEl.dataset.mydataname那样检索它。特殊值将存储在event.extendedProps.mydata中。我认为问题在于，在预先添加div标记本身时，没有发送事件数据。我将不得不做更多的研究，因为显然编码不是我的强项。