Full Calendar Events data display issue

Question

let's say I am creating event From Date : 2017-06-14 To Date: 2017-06-16 From Time : 13:00:00 To Time : 16:00:00

I am storing in these in database correctly. Now an issue is in full calendar data should be display between time 13:00:00 to 16:00:00 instead it is displaying for a full day on 2017-06-15. Any Mistake? My Code is

Full Calendar Displaying Data:

var id=$("#hidden_id").val();
    $('#calendar').fullCalendar({
         defaultView: 'agendaWeek',

            header: {
                    left: '',
                    center: 'prev title next',                
                    right: ''
            },
            /*          
                loading: function (bool) {
                        $("#loading_div").show();
                },
            */
            defaultDate: "<?php echo date('Y-m-d');?>",
            navLinks: true, // can click day/week names to navigate views
            editable: false,
            events: "json_rate-info/"+id,
            allDay: true,
            selectable: true,
            selectHelper: true,
      });

Fetching Data Function

public function GetJsonRateInfo($rate_id)
    {
        $json = array();
        $start=$_REQUEST['start'];
        $end=$_REQUEST['end'];
        if($start != '' && $end != '')
        {
            $where="(from_date BETWEEN '$start' and '$end') or (to_date BETWEEN '$start' and '$end')";
            $finalArray=[];
            $json=$this->Rates_model->getAnyData($where);
            /*echo '<pre>';
            print_r($json);
            die();*/
            if(!empty($json))
            {

                foreach ($json as $key => $js) {

                    $finalArray[$key]['id']= $js->id;

                    $finalArray[$key]['start']= date('Y-m-d',strtotime($js->from_date))."T".$js->from_time;
                    $finalArray[$key]['end'] = date('Y-m-d',strtotime($js->to_date))."T".$js->to_time;

                    if(!empty($js->rate_per_hour) && !empty($js->rate_per_mile))
                    {
                        $fullTitle="Per Hour: ".$js->rate_per_hour.",Per Mile: ".$js->rate_per_mile;
                    }
                    elseif(!empty($js->rate_per_hour) && empty($js->rate_per_mile)){
                        $fullTitle="Per Hour: ".$js->rate_per_hour;
                    }
                    elseif(empty($js->rate_per_hour) && !empty($js->rate_per_mile)){
                       $fullTitle="Per Mile: ".$js->rate_per_mile;
                    }
                    $finalArray[$key]['title']=$fullTitle;
                }

                echo json_encode($finalArray);
            }
        }

    }

My Json Data :

[{"id":"1","start":"2017-06-14T13:00:00","end":"2017-06-15T16:00:00","title":"Per Hour: 11.00,Per Mile: 11.00"}]

you have a single event which starts on the 14th at 13:00 and ends on the 15th at 16:00. Therefore all the time in between that (1 day + 3hrs) will be covered by the event. This is entirely correct behaviour by the calendar - see it working here: jsfiddle.net/4bznpxc5/1 . If that is not the result you wanted, please explain more clearly what you are hoping to achieve. P.S. allDay: true is not a valid option in the calendar initialisation, check the documentation. Not sure what your intention was by setting that? — ADyson
I need to display record only between 13:00:00 and 16:00:00, on all 3 days which include dates 2017-06-14 2017-06-15 2017-06-16 — Jaymin
right so you want repeating events not one single event? In that case you have to make 3 separate objects in your events array. — ADyson
Like? Can U give me demo example to do that? because i am storing as a single record in database. with to and from date respectively. — Jaymin
[{"id":"1","start":"2017-06-14T13:00:00","end":"2017-06-14T16:00:00","title":"Per Hour: 11.00,Per Mile: 11.00"}, {"id":"2","start":"2017-06-15T13:00:00","end":"2017-06-15T16:00:00","title":"Per Hour: 11.00,Per Mile: 11.00"}, {"id":"3","start":"2017-06-16T13:00:00","end":"2017-06-16T16:00:00","title":"Per Hour: 11.00,Per Mile: 11.00"}] — ADyson

ADyson ADyson · Accepted Answer · 2017-06-14T13:28:45

In your example you have a single event which starts on the 14th at 13:00 and ends on the 15th at 16:00. Therefore all the time in between that (1 day + 3hrs) will be covered by the event. This is entirely correct behaviour by the calendar - see it working here: https://jsfiddle.net/4bznpxc5/1 .

If you want to repeat the same times on 3 different days, you have to output 3 separate event objects in the JSON feed, something like this:

[
  {"id":"1","start":"2017-06-14T13:00:00","end":"2017-06-14T1‌6:00:00","title":"Pe‌r Hour: 11.00,Per Mile: 11.00"},
  {"id":"2","start":"2017-06-15T13:00:00","end":"2017-06-15T16‌:00:00","title":"Per Hour: 11.00,Per Mile: 11.00"},
  {"id":"3","start":"2017-06-16T13:00:00","end":"2017-06-16T16‌:00:00","title":"Per Hour: 11.00,Per Mile: 11.00"}
]

Full Calendar Events data display issue

1 Answers