Loading Custom Post Type Events into jQuery-based FullCalendar?

by

Here is a question I have spent over 3 hours attempting to solve but each approach I take ends up not working out for me.

All I am attempting to do is utilize this opensource ajax calendar script:

  • FullCalendar

and have the entries display all posts within a specific post type. For each of the posts within this event post type I have a custom metabox with the following custom fields:

  • event category
  • event start date
  • event start time
  • event end date
  • event end time

At the most basic level I just need each post to show up within the applicable calendar box based on the “event start date” and “event start time” and link to the applicable event post details page.

In an ideal situation I was looking to have each event category with its own color and have each event span multiple days if the applicable event has an "event_end_date" that is different than the start date.

Has anyone done this before and can past the applicable code to get either of these in place. I feel this would be highly valuable to the WordPress community as well.

1 Answer
1

FullCalendar is a nice find.

Looks to me like you’ll need to write a shortcode (which I show how to do here):

  • Adding an Archive of Posts to the Navigation Menu in WordPress 3.0

And then generate the code to call the FullCalendar within the shortcode.

After that you’ll need to write code to generate a Javascript array or have it references a JSON feed:

  • Full Calendar Events (as an array)
  • Full Calendar Events (as an json feed)

Here’s code you can put into a standalone .PHP file which you could call /fullcalendar-json-feed.php or whatever you like. The code queries a custom post types called event which will run in the root directory of your website and will generate a JSON feed and it assumes you’ve got some custom fields needed to populate the array/feed. (I’m going to leave the rest of the query and custom field details to you. Note I didn’t actually test this with FullCalendar so it might take a bit of tweaking):

<?php
/*
* See: https://wordpress.stackexchange.com/questions/1447/
*
*/
include "wp-load.php";
global $wpdb;
header('Content-Type:application/json');
$events = array();
$result = new WP_Query('post_type=event&posts_per_page=-1');
foreach($result->posts as $post) {
  $events[] = array(
    'title'   => $post->post_title,
    'start'   => get_post_meta($post->ID,'_start_datetime',true),
    'end'     => get_post_meta($post->ID,'_end_datetime',true),
    'allDay'  => (get_post_meta($post->ID,'_all_day',true) ? 'true' : 'false'),
    );
}
echo json_encode($events);
exit;

You can generate the array option with very similar code to that above. Still, this is going to take a bit of coding for you to get right. Maybe you just want to use a solution that’s already built? Here’s a Q&A discussion about calendars for WordPress:

  • Recommendation for a WordPress Calendar Plugin with Recurring Events?

Leave a Comment