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

Question

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

我想将一个附加参数传递给事件对象，调用 blockd。所以在前面被阻止的事件有不同的样式

如果我通过 Int 1 传递 blocked 参数，日历的事件会显示在前端。 (如下面代码ex所示)

尽管我做了一个 PHP 变量 ，例如$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

作为 int 值收到的 'blocked' 值，但似乎 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
}