JS fullcalendar，将PHP变量解析为JSON时出现TypeError

Question

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

我想向事件对象传递一个附加参数，调用blockd。所以在前端被阻止的事件会得到不同的样式

如果我将blocked 参数与Int 1 一起传递，则日历的事件会显示在前端。 （如下代码ex所示）

虽然我改为使用 PHP 变量 e.g. $is_blocked，但我在前端得到了一个 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 );

Firefox 说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

'blocked' 值作为 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
}