CODEWITHSUNDEEP
symfonyfullcalendarsymfony-3.4
Edenn Touitou
Edenn Touitou

Reputation: 31

Symfony3 - fullcalendar.js events not displaying

I'm using fullcalendar.js with Symfony 3.4 (as all the bundles are deprecated since version 3). The calendar itself is showing, when I hardcoded in js the events they're showing. But when i send my events with JSON they don't show themselves and the calendar is blank. However, the json source is in the correct format and indeed catched by my page (http 200 response). Here's my controller who got the data and send a JSON:

 /**
 * @Route("/calendrierFeed", name="calendrierFeed", methods={"GET"})
 */
public function feedAction()
{
    $em = $this->getDoctrine()->getManager();
    $aquariums = $em->getRepository('AppBundle\Entity\Aquarium')
        ->findBy(
            array('user' => $this->getUser()->getId())
        );
    $events = $em->getRepository('AppBundle\Entity\Calendrier')
        ->findBy(array(
            'aquarium' => $aquariums
        ));

    $calendrier = array();

    foreach ($events as $event) {
        $e = array();
        $e['id'] = $event->getId();
        $e['title'] = $event->getTypeEntretiens() . " pour l'aquarium " . $event->getAquarium()->getNom();
        $e['start'] = $event->getDateEntretiens();
        if ($event->getRealise()) {
            $e['color'] = 'green';
        } else {
            $e['color'] = 'red';
        }
        $e['allDay'] = true;

        array_push($calendrier, $e);
    }
    return $this->json($calendrier);
}

Here's my twig template:

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/membre/fullcalendar.min.css') }}">
{% endblock %}

{% block body %}
    <div id='calendar'></div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/membre/moment.min.js') }}"></script>
    <script src="{{ asset('js/membre/jquery.min.js') }}"></script>
    <script src="{{ asset('js/membre/fullcalendar.min.js') }}"></script>
    <script src="{{ asset('js/membre/fr.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#calendar').fullCalendar({
                events: '/calendrierFeed',
                defaultView: 'month',
                selectable:true,
                selectHelper:true,
                editable:true
            });
        });
    </script>
{% endblock %}

And here's my JSON feed

[{"id":2,"title":"oui pour l\u0027aquarium 200L","start":{"date":"2018-02-12 00:00:00.000000","timezone_type":3,"timezone":"UTC"},"color":"red","allDay":true}]

Upvotes: 2

Views: 894

Answers (1)

goto
goto

Reputation: 8164

Your date should be a string, not an object.

I checked in my json feed in my personnal project, I got it this way:

"start":"2018-02-13"

From the doc

The date/time an event begins. Required.

A Moment-ish input, like an ISO8601 string. Throughout the API this will become a real Moment object.

This mean you should format your date 

$e['start'] = $event->getDateEntretiens()->format('Y-m-d');

Upvotes: 2

Related Questions