将PHP值传递给Jquery Calendar

Question

我正在开发一个JQuery事件日历，我想用PHP中的多个值填充它。我有一个foreach来提取所有需要的PHP值，但我不知道如何用PHP收集的值正确地填充JQuery中的事件数组。

提前感谢您的建议。

这是PHP foreach，它收集所需的所有事件数据

<?php foreach ($collection as $content) : ?>
<?php 
$eventTitle = $content->getData('title');
$ogDate = $content -> render('mmedia_library_publish_date', array('type' => 'date_short')); 
// REFORMAT DATES FROM PHP TO A CALENDAR FRIENDLY FORMAT
$newDate = date('Y-d-m', strtotime($ogDate));
echo $newDate;
?>

<?php endforeach; ?>

这是填充日历的jQuery，其中包含一些伪事件，以供所需格式的参考

<script type="text/javascript">
require([
'jquery',
'calendar-gc',
'domReady!'
], function ($) {
require(['jquery'],function(e){
var calendar = $("#calendar").calendarGC({
dayBegin: 0,
prevIcon: '&#x3c;',
nextIcon: '&#x3e;',
onPrevMonth: function (e) {
console.log("prev");
console.log(e)
},
onNextMonth: function (e) {
console.log("next");
console.log(e)
},
// *********** ADD EVENTS FROM PHP HERE *************
events: [
{
date: new Date("2022-03-15"),
eventName: "EVENT 1",
className: "badge bg-danger",
onclick(e, data) {
console.log(data);
},
dateColor: "red"
},
{
date: new Date("2022-03-20"),
eventName: "EVENT 2",
className: "badge bg-danger",
onclick(e, data) {
console.log(data);
},
dateColor: "red"
},
{
date: new Date("2022-03-22"),
eventName: "EVENT 3",
className: "badge bg-success",
onclick(e, data) {
console.log(data);
},
dateColor: "green"
}
],
onclickDate: function (e, data) {
console.log(e, data);
}
});
})

});
</script>

Answer 1

我不推荐这种方法，但你能试试吗

//...
$dateArr = [];
foreach () {
...
$dateArr[] = $newDate;
..
}
echo sprintf('<script>let eventStr = %s;</script>', implode(',', $dateArr));

然后稍后或在页面末尾，

let cal = [];
let dates = eventStr.split(',');
dates.forEach(date => cal.push({
date: new Date(date),
eventName: "EVENT 2",
className: "badge bg-danger",
onclick(e, data) {
console.log(data);
},
dateColor: "red"
})
);

还没有测试过它，但类似这样的东西会使值在页面上可用，然后当您初始化日历时，您可以使用该数组。

var calendar = $("#calendar").calendarGC({
...
...
events: cal,
...
});

Answer 2

我只是想发布我对原始问题的解决方案。Adison Masih的评论/帖子为我指明了正确的方向(谢谢(，同时进行了广泛的搜索、尝试和错误处理，以使数组根据需要在jquery中显示。

希望这将帮助其他希望执行类似任务的人。

我最终用PHP构建了数组，并用以下代码格式化日期：

<?php $eventData = array(); ?>

<?php 
$eventTitle = '<a class="eventCalTitle" href="'.$content->getLinkUrl().'">' .$content->getData('title'). '</a>';
$ogDate = $content -> render('mmedia_library_publish_date', array('type' => 'date_short')); 
$newDate = date('Y-m-d', strtotime($ogDate));
$jDate = $newDate;
$tempArray = array("date" => $jDate, "eventName" => $eventTitle, "className" => "badge", "dateColor" => "#006fba");
array_push($eventData, $tempArray)
?>

创建PHP数组后，我使用json_encode将数组传递给jQuery，然后进一步修改日期对象，添加新的date((函数，然后用我的自定义事件数据填充事件数组：

const jsonData = <?php echo json_encode($eventData); ?>;
$.each(jsonData, function( i, obj ) {
var dateOrig = obj.date;
obj.date = new Date(dateOrig);
});
const option = {
dayBegin: 0,
};
option["events"] = jsonData;
$("#calendar").calendarGC(option)