how to show json event data on fullcalender in zf2?

Question

I am new in zf2 and i use fullcalender to show events of calender for this i make a loadaction who return me response like:

[{"event_id":"2","calendar_id":"1","author_id":"1","title":"Launch","description":"Launch Break","begin":"2014-03-02 20:00:00","end":"2014-03-31 16:53:00","calendar_title":"Hijri Calender","author_email":"arif.liaqat@yahoo.com"},{"event_id":"79","calendar_id":"1","author_id":"1","title":"cccvcv","description":"bcbcbbcbbcbccbcbb","begin":"2014-03-31 21:00:00","end":"2014-04-08 11:16:00","calendar_title":"Hijri Calender","author_email":"arif.liaqat@yahoo.com"},{"event_id":"80","calendar_id":"1","author_id":"1","title":"dgdgdgdgdgdg","description":"dgdgdgdgdg","begin":"2014-04-01 21:00:00","end":"2014-04-08 11:17:00","calendar_title":"Hijri Calender","author_email":"arif.liaqat@yahoo.com"}]

and here is my loadaction:

public function loadAction()
    {
        $response = $this->getResponse();

        //if ($request->isPost()) {
            $id = (int) $this->params()->fromRoute('id', 0);
            if ($id) {
                $events = $this->getEventTable()->fetchAllByCalendar($id);

                $response->setContent(\Zend\Json\Json::encode($events));

            }
        //}

        return $response;
    }

and here is my calender show code:

 public function showAction()
    {
        if ($this->zfcUserAuthentication()->hasIdentity())
        {
            $id = (int) $this->params()->fromRoute('id', 0);
            if (!$id) {
                return $this->redirect()->toRoute('calendar', array(
                    'action' => 'create'
                ));
            }

            $calendar = $this->getCalendarTable()->getCalendar($id);

            return array('calendar' => $calendar);
        }
        else
        {
            $this->redirect()->toRoute('zfcuser/login');
        }
    }

and here is my show.phtml in which i show events on calender:

 <?php
$calendar = $this->calendar;

$title = $this->escapeHtml($calendar->title);
$this->headTitle($title);
 ?>

 <h3><?php echo $this->escapeHtml($title); ?></h3>

 <p>Click in the blank space to add a new term, click on your choice to see the detail of y.</p>

 <p>Calender Author:
<?php echo $this->escapeHtml($calendar->email) . ' ' . $this->gravatar($this->escapeHtml($calendar->email)); ?>
 </p>

 <p>description: <?php echo $this->escapeHtml($calendar->description); ?></p>

 <p><a href="<?php echo $this->url('calendar');?>">Back to list Calender</a></p>

  <div id="fullcalendar"></div>

  <script>
  $(document).ready(function() {
// page is now ready, initialize the calendar...
$('#fullcalendar').fullCalendar({


    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },

    defaultView: 'month',
    allDaySlot: false,

    events: '<?php echo $this->url('event',array('action'=>'load', 'id' => $this->escapeHtml($calendar->calendar_id)));?>',

    eventDataTransform: function(eventData) {
        //eventData.start = new Date(eventData.begin);
        //eventData.end = new Date(eventData.end);
        eventData.start = new Date(eventData.year, eventData.month, eventData.day, eventData.hours, eventData.minutes, eventData.seconds, eventData.milliseconds);
        eventData.end = new Date(eventData.year, eventData.month, eventData.day, eventData.hours, eventData.minutes, eventData.seconds, eventData.milliseconds);
        eventData.allDay = false;
        eventData.url = '<?php echo $this->url('event',array('action'=>'show'));?>' + '/' + eventData.event_id;
        return eventData;
    },

    dayClick: function(date, allDay, jsEvent, view) {

        var action = '<?php echo $this->url('event',array('action'=>'create', 'id' => $this->escapeHtml($calendar->calendar_id))) ?>';
        var dateUri = date.getTime() / 1000;
        var allDayUri = allDay ? 1 : 0;

        console.log(action + '/' + dateUri  + '/' + allDayUri);
        window.location = action + '/' + dateUri  + '/' + allDayUri;
    },

    //console.log(events);
});

 });    

  </script>

how i use this json data of events for showing events on calender? Any advice should Appriciated

Answer 1

I do not have any experience with the calendar but i am currently working with something similar that requires json. So i will guide you to what i found helpful on the web in order to get the result i was looking for.

important part.

'strategies' => array(
        'ViewJsonStrategy',
    ),

add the above code in your module.config.php if you haven't already.

then read these two brief tutorials. Returning JSON from a ZF2 controller action , Zend Framework 2 AJAX: return JSON response from controller action. The proper way.

if this is not what you are looking for please don't judge me. I was only trying to help :p