How to show events in full calendar in zend framework2?

Question

I am new in zend and i use full calender for creating events,my events are stored in database but not shown on calender how i show events on calender? here is my code:

<?php
// module/Album/view/album/album/add.phtml:

$title = 'Create New Event';
$this->headTitle($title);
?>
<h3><?php echo $this->escapeHtml($title); ?></h3>
<?php
$form = $this->form;
$form->setAttribute('action', $this->url('event', array(
'action' => 'create',
'id' => $form->get('calendar_id')->getValue()
)));
$form->prepare();

echo $this->form()->openTag($form);
echo $this->formHidden($form->get('event_id'));
echo $this->formHidden($form->get('calendar_id'));
echo $this->formHidden($form->get('author_id'));
echo $this->formRow($form->get('title'));
echo $this->formRow($form->get('description'));
echo $this->formRow($form->get('begin'));
echo $this->formRow($form->get('end'));
echo $this->formSubmit($form->get('submit'));
echo $this->form()->closeTag();
?>

<?php $this->headScript()->captureStart(); ?>

$(function(){
$('*[name=begin]').appendDtpicker({
    "dateFormat": "YYYY-MM-DD hh:mm:00"
}  );
$('*[name=end]').appendDtpicker({
    "dateFormat": "YYYY-MM-DD hh:mm:00"
});
});

<?php $this->headScript()->captureEnd();

and here is my events show code:

 <?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>Author Calender:
<?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>

 <?php $this->headScript()->captureStart(); ?>

 $(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.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;
    },


});
 });    

 <?php $this->headScript()->captureEnd(); 

and here is my load action of event:

 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 show action of calender:

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');
        }
    }

here is my response:

 [{"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"}]

how i show events on calender?

Answer 1

The problem is at the date format you try to pass to new Date function. You can't create a js Date object with this: new Date('2014-03-02 20:00:00'). If you run this in your browser's console it fails. You have to convert it first to a "real" datetime that includes timezone data as well.

so what you have to do is somehow get separated the values of the date string you have and eventData.start = new Date(year, month, day, hours, minutes, seconds, milliseconds);

and same thing for

eventData.end