JS完整日历，将PHP变量解析为JSON时出现类型错误

Question

我在使用FullCalendar v3.8.2和 eventDataTransform 方法时遇到问题。 我现在正在寻找几个小时，所以为了防止发疯，我写了我的第一篇 StackOverflow 帖子......

我想将一个附加参数传递给事件对象，调用blockd.因此，在前面，被阻止的事件会获得不同的样式

如果我将blocked参数与Int 1一起传递，日历的事件将显示在前端。(如下面的代码所示)

虽然我e.g. $is_blocked做了一个PHP变量，但我在前端得到了一个TypeError，事件没有显示。

这是我fullcalendar.js脚本：

eventSources: [
{
url: WP_PUBLIC_DATA.pluginsUrl + '/dev-booking-system/dbs-calendar-feed.php', // use the `url` property
className: 'dbs-event',
eventDataTransform: function( eventData ){
var blocked = parseInt( eventData.blocked );
if( blocked == 1 ){
var substr = 'Reserviert - ' + eventData.title.substring( 0, 15 ) + '...';
return {
id: eventData.id,
title: substr,
start: eventData.start,
end: eventData.end,
className: 'dbs-event--disabled-by-load'
};
}
}
}
],

当将JSON发送到javascript文件时，发生了一些奇怪的事情。 eventSoruces url 通过 WordPress 循环从 php 文件中获取数据。

这就是它变得奇怪的一点。传递'blocked' => 1有效，传递'blocked' => $is_blocked不起作用(值通过 intval 转换为 int)

if( $event_listing->have_posts() ) :
while( $event_listing->have_posts() ) : $event_listing->the_post();
$post_id = get_the_ID();
$title = get_the_title();
$is_blocked = intval( get_post_meta( $post_id, 'event_reserved', true ) );
$start = get_post_meta( $post_id, 'start_trip', true ) != '' ? get_post_meta( $post_id, 'start_trip', true ) : NULL;
$end = get_post_meta( $post_id, 'end_trip', true ) != '' ? get_post_meta( $post_id, 'end_trip', true ) : NULL;

$event_array[] = array(
'id' => $post_id,
'title' => $title,
'start' => $start,
'end' => $end,
// 'blocked' => 1,
'blocked' => $is_blocked,
'allDay' => true // Event ist nicht Zeitabhängig
);
endwhile;
else:
wp_send_json_error( "No events found" );
endif; 
echo json_encode($event_array);
exit;

使用Wordpress，我以正确的顺序对脚本进行排队：

//fullcalendar
wp_enqueue_script('dbs-fullcalendar-moment-scripts',  plugins_url('assets/fullcalendar/lib/moment.min.js', __FILE__ ), array('jquery'), '3.8.2', true );
wp_enqueue_script('dbs-fullcalendar-scripts',  plugins_url('assets/fullcalendar/fullcalendar.js', __FILE__ ) , array('jquery'), '3.8.2', true );

火狐说TypeError: eventInput is undefined，Chrome反对说Uncaught TypeError: Cannot read property 'start' of undefined

你知道发生了什么吗？ 听到你的消息会很棒，阻止我喝太多咖啡;)

以下是 JSON 结果：

0:
id: 3453
title:  "19. März bis 23. März Beipieltext"
start:  "2018-03-19"
end:    "2018-03-23"
blocked:    0
allDay: true
1:
id: 3451
title:  "09. März bis 11. März Beispieltext"
start:  "2018-03-09"
end:    "2018-03-11"
blocked:    1
allDay: true

作为 int 值接收的"阻塞"值，但似乎 javascript 对"0"有问题，因为如上所述仅传输"1"值，整个事情都可以工作

Answer 1

问题是，只要blocked为 0，您的 eventDataTransform 方法就不会向日历返回任何内容，因此尝试使用返回的事件的代码崩溃，因为它试图访问不存在的事件对象。

即使您不打算更改事件数据，您仍然需要再次返回现有事件数据。

你也不需要做 parseInt()，因为blocked已经是一个数字，而且你真的不需要构建一个新的事件对象 - 你可以修改给你的那个。所以你的代码可以如下：

eventDataTransform: function( eventData ){
if( eventData.blocked == 1 ){
var substr = 'Reserviert - ' + eventData.title.substring( 0, 15 ) + '...';
eventData.title = substr;
eventData.className = 'dbs-event--disabled-by-load';
}
return eventData; //always return something, even if it wasn't modified
}