CODEWITHSUNDEEP
javascriptphpjsonfullcalendartypeerror
mxkraus
mxkraus

Reputation: 191

JS fullcalendar, TypeError when parsing PHP Variable to JSON

I´m having trouble using FullCalendar v3.8.2 and the eventDataTransform Method. I´m searching for hours now, so to prevent going crazy I write my first StackOverflow post...

I want pass an additonal parameter to the event Object, calles blockd. So in frontent the events which are blocked get a different styling

If I pass the blocked parameter with Int 1, the events of the calendar show up in the frontend. ( As shown in code ex below )

Though I do a PHP variable e.g. $is_blocked instead, I get a TypeError in frontend and the events dont show up.

Thats my fullcalendar.js script:

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'
                    };
                }
              }
            }
        ],

When sending a JSON to javascript file, something weird happens. eventSoruces url gets data from php file with a wordpress loop.

That's the point where it gets weird. Passing 'blocked' => 1 works, passing 'blocked' => $is_blocked dont work (value is converted to int via intval)

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;

Using Wordpress, i enqueue the scripts in correct order:

//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 says TypeError: eventInput is undefined, Chrome against says Uncaught TypeError: Cannot read property 'start' of undefined

Do you have any idea whats going on ? Would be great hearing from your, stop me for drinking too much coffee ;)

Here is the JSON Result:

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

The 'blocked' value recieved as an int value, but it seems javascript has a problem with the '0', because transfering only '1' values as explained above, the whole thing works

Upvotes: 1

Views: 119

Answers (1)

ADyson
ADyson

Reputation: 61794

The problem is that whenever blocked is 0, your eventDataTransform method does not return anything to the calendar, so the code which tries to use the returned event is crashing because it's trying to access an event object which doesn't exist.

Even if you're not going to change the event data, you still need to just return the existing event data back again.

You also don't need to do parseInt() since blocked is already a number, and you don't really need to build a new event object - you can just modify the one given to you. So your code can be as follows:

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
}

Upvotes: 1

Related Questions