FullCalendar – How to show event based upon comma separated dates from database(mysql) table row on calendar

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:

Image from the database table

Read More

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.

Related posts

1 comment

  1. 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:

    $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);
            foreach($dateArray as $date) {
                $array_cal[$i]["title"] = $title;
                $array_cal[$i]["start"] = trim($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);
    ?>
    

Comments are closed.