I am trying to show multiple events based upon dates from the same row of the table in the database separated by commas as show in picture:
This is the my php/wordpress code that fetch the result from database:
$my_query = new WP_Query($args);
if ($my_query->have_posts()) {
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
?>
<?php
$title = get_the_title();
//$date = explode(',',get_post_meta($post->ID, 'trainee_date_pick', true));
$date = get_post_meta($post->ID, 'trainee_date_pick', true);
//$dateArray = explode(',', $date);
$mealdes = nl2br(get_post_meta($post->ID, 'meal_plan_des', true));
$url = get_post_meta($post->ID, 'youtube_videos', true);
$url_two = get_post_meta($post->ID, 'youtube_videos_sec', true);
$meal_lable = get_post_meta($post->ID, 'meal_plan_label', true);
$array_cal[$i]["title"] = $title;
$array_cal[$i]["start"] = $date;
$array_cal[$i]["url"] = $url;
$array_cal[$i]["urltwo"] = $url_two;
$array_cal[$i]["description"] = $mealdes;
$array_cal[$i]["meallable"] = do_shortcode("[nutrition-label id=" . $meal_lable . "]");
$i++;
?>
<?php
endwhile;
}
echo json_encode($array_cal);
?>
After searching I try it doing myself, above code return the json like this but didn’t show anything on the calendar but when there is single date it showed up.
[{"title":"Full Body","start":"2015-12-09, 2015-12-31","url":"","urltwo":"","description":"Deadlift 5x5
rnPause Squats 3x8
rnBench Press 3x8
rnClose Grip Bench 3x12
rnAlternating Curls 3x12
rnDips 3xMax
rnJump Rope 20 minutes
rn","meallable":""}]
And this is the jQuery code where I read json array:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#calendar').fullCalendar({
editable: true,
droppable: true,
eventLimit: true,
events: "/calendar-events/",
eventRender: function (event, element) {
element.attr('href', 'javascript:void(0);');
element.click(function () {
jQuery("#startTime").html(moment(event.start).format('DD-MM-YYYY'));
jQuery("#eventInfo").html(event.description);
jQuery("#eventLink").attr('href', event.url);
jQuery("#eventLink2").attr('href', event.urltwo);
jQuery("#meal_label").html(event.meallable);
// jQuery("#labeledit").attr('href',event.editlab);
// jQuery('#eventedit').attr('href',event.eventedit);
jQuery("#eventContent").dialog({modal: true, title: event.title, width: 350});
});
}
});
});
</script>
I really need help please somebody come up the solution.
Okay, now that I understand your problem… It’s just a matter of going through the list of dates for each event that may have multiple. For this, going to un-comment one of your lines, and add two more. It will look something like this: