initfullcalendar.js

window.onload=()=> {
        let form = document.querySelector('#form-search')
        let btnSubmit= form.querySelector("button[type=submit]")
        const btnSubmitText= btnSubmit.textContent
    form.addEventListener("submit",function(e){
        e.preventDefault()
        let searchField= form.querySelector('#q')
        app.showAjaxAnimation()
        const requestUri=form.getAttribute('href')
        let xhr = new XMLHttpRequest();

        xhr.open('POST',requestUri,true)
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4) {
                if(xhr.status === 200)console.log(xhr.responseText)
                else console.error(`error:${xhr.responseText}`)
            }else{
                app.removeAjaxAnimation()
            }
        };
        // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.send(new FormData(form));
    })

    let elementCalendar = document.getElementById("calendar")
    let today = new Date,
        y = today.getFullYear(),
        m = today.getMonth(),
        d = today.getDate();

    //création d'un evenement à inserer dans l obj calendar
    let events = [{
        'title':'je suis un titre de test',
        'start':'2020-05-26 09:10:00',
        'end':'2020-05-26 11:30:00',
        'backgroundColor':'silver',
        color: 'yellow',   // an option!
        textColor: 'black' // an option!
    },
        {
            'title':'je suis un titre de test 2',
            'start' :'2020-05-26 14:15:00',
            'end' :'2020-05-26 16:30:00',
            'backgroundColor':'white',
            color: 'yellow',   // an option!
            textColor: 'blue' // an option!
        }
    ]
    let events22=
        [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1),
                description: 'description for All Day Event',
                className: 'event-red'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d - 4, 6, 0),
                allDay: !1,
                className: 'event-rose'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d + 3, 6, 0),
                allDay: !1,
                className: 'event-rose'
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d - 1, 10, 30),
                allDay: !1,
                className: 'event-green'
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d + 7, 12, 0),
                end: new Date(y, m, d + 7, 14, 0),
                allDay: !1,
                className: 'event-red'
            },
            {
                title: 'Md-pro Launch',
                start: new Date(y, m, d - 2, 12, 0),
                allDay: !0,
                className: 'event-azure'
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d + 1, 19, 0),
                end: new Date(y, m, d + 1, 22, 30),
                allDay: !1,
                className: 'event-azure'
            },
            {
                title: 'Click for Creative Tim',
                start: new Date(y, m, 21),
                end: new Date(y, m, 22),
                url: 'http://www.creative-tim.com/',
                className: 'event-orange'
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 21),
                end: new Date(y, m, 22),
                url: 'http://www.creative-tim.com/',
                className: 'event-orange'
            }
        ]



    let calendar =  new FullCalendar.Calendar(elementCalendar,{
        //on appelle les plugins
        plugins:['dayGrid','list','timeGrid','interaction','moment','bootstrap'],
        // themeSystem: 'bootstrap',
        buttonText:{today:'اليوم'},

        buttonIcons:{
            prev: 'left-single-arrow',
            next: 'right-single-arrow',
            prevYear: 'left-double-arrow',
            nextYear: 'right-double-arrow',

        },
        defaultDate: today,
        defaultView: 'dayGridMonth',
        locale:'ar-tn',
        timeZone: 'Africa/Tunis',
        // timeZone: 'UTC',
        titleFormat: {
            month: 'long',
            year: 'numeric',
            day: 'numeric',
            weekday: 'long'
        } ,
        // themeSystem: 'bootstrap',
        header: {
            left: 'prev,next today',
            // center: 'title',
            center: 'addEventButton, title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay, list'
        },
        eventRender: function(info) {
            let tooltip = new Tooltip(info.el, {
                title: info.event.extendedProps.description,
                placement: 'top',
                trigger: 'hover',
                container: 'body'
            });
        },
        //associations des evenements(les events peuvent etre un obj js simple ou prevenant de bdd)
        events:events22,
        nowIndicator:true,
        editable:true,
        selectable:true,
        views: {
            list: { buttonText: 'قائمة' },
            timeGridWeek: { buttonText: 'الأسبوع' },
            timeGridDay: { buttonText:'يومي' },
            dayGridMonth:{buttonText:'الشهر'}
            // dayGridMonth,timeGridWeek,timeGridDay, list
        },
        customButtons: {
            addEventButton: {
                text: 'new event',

                icon:'fa fa-lock',
                click: function() {
                    // var dateStr = new Date('2020-05-27 15:20:23')
                    $('#newEvent').on('show.bs.modal',function (e) {

                        console.log('debug=== modal is showing ....')

                        $('#btnAddEvent').on('click',function (e) {
                                console.log('choosing title:' + $('#eventTitleField').val())
                                console.log('choosing color:' + $('#eventColorField').val())
                                console.log('choosing startDate:' + $('#startDate').val())
                                console.log('choosing startDate:' + $('#endDate').val())
                                //on fait l'ajout de l'event ici !!

                                //construction de l'obj event
                                let ev = {
                                    title: $('#eventTitleField').val(),
                                    start: $('#startDate').val(),
                                    end: $('#startDate').val(),
                                    backgroundColor: $('#eventColorField').val()
                                }
                                //association de l obj au calendar
                            // calendar.addEvent(ev,false)
                            calendar.fullCalendar('renderEvent',ev,true)
                            calendar.unselect()

                            console.log('debug=== Event added with success ....')
                            //on déclenche l'event hidden.bs.modal de modal
                            $('#newEvent').modal('hide')
                            //on vide les inputs
                            $('#newEvent input[type=text]').each(function(){
                                $(this).val('')
                            })



                            })
                    }).on('hidden.bs.modal',function(e){
                        $('newEvent').modal('dispose')
                        console.log('dispose event called')
                    }).modal('show')




                    }
                }

        },
        navLinks:true, // can click day/week names to navigate views
        dateClick: function(arg) {
            // let m = moment(arg.date, calendar); // calendar is required
            console.log('clicked on ' + arg.date);
        },
        eventDrop: (infos)=>{
            console.log("event start at=" + infos.event.start)
            Swal.fire({
                title: 'تأكيد',
                text: "هل تود نقل الحدث ؟",
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'نعم',
                cancelButtonText: 'لا'
            }).then((result) => {
                if (!result.value) {
                    infos.revert()
                }
            })

        },
        select: function (arg) {
        Swal.fire({
            title: 'إنشاء حدث جديد',
            html: '<div class="form-group"><input class="form-control" placeholder="عنوان الحدث" id="input-field" required></div>',
            showCancelButton: !0,
            confirmButtonClass: 'btn btn-success',
            cancelButtonClass: 'btn btn-danger',
            buttonsStyling: !1
        }).then((result) => {
            if(result.value){
                let eventTitle = $('#input-field').val()
                const newEvent= {
                    title: eventTitle,
                    start: arg.start,
                    end: arg.end,
                    backgroundColor:app.randomColor(),
                    allDay:arg.allDay
                }
                // calendar.fullCalendar('renderEvent',newEvent, !0)

                $.ajax({
                    type: 'POST',
                    url: '/admin/planificator/api/event/add/',
                    sync:true,
                    data: newEvent,
                    /*beforeSend:() =>{
                        // Wed May 13 2020 01:00:00 GMT+0100 (Central European Standard Time)
                        //convertir l objet date en timestamp pour simplifier le traitement coté backend
                        // let toTimestamp = strDate => Date.parse(strDate)
                        // newEvent.test=newEvent.start //pour le test
                        // const startTimeStamp = toTimestamp(newEvent.start)
                        //const endTimeStamp = toTimestamp(newEvent.end)
                        //  newEvent.start=startTimeStamp
                         // newEvent.end=endTimeStamp

                },*/
                    success:(data, textStatus, xhr)=>{
                        console.info("success===" + data)
                        calendar.addEvent(newEvent)
                        calendar.unselect()
                    },
                    error: (xhr)=> {
                        app.showNotification("danger","للأسف حدث خطأ ما")
                        console.error("error=== statut:"+xhr.statusCode().statusText)
                    },
                    done:()=> app.removeAjaxAnimation()
                });




            }

            // app.event.showSuccess() //afficher une notification du success
        }).catch (Swal.noop)
    },
        eventClick:function (event) {
            // console.log(eventClickInfo.event.title)
            // console.log(eventClickInfo.event.classNames)
            // alert('Event: ' + info.event.title);
            // alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
            // alert('View: ' + info.view.type);

            // change the border color just for fun
            // info.el.style.borderColor = 'red';
            // console.log(event)
            let detailsField=$('#detailField')
            // let infosList=[
            //     jsEvent.start,
            //     jsEvent.end,
            //     event._calendar.state.currentDate
            // ]
            // let elemli;
            // for (let i = 0; i < infosList.length ; i++) {
            //     elemli=+ '<li>'+ infosList[i] +'</li>'
            // }
            console.log(event)
            $('<ul><li>1323</li></ul>').appendTo(detailsField)
            // $('#detailField').html(info.event.title)
            $('#eventDetail').modal("show")
        },

    })

    calendar.render()

    //le button ajouter un event
    $(".fc-addEventButton-button")
        .removeClass( "btn btn-primary" )
        .addClass( " btn btn-rose" )
        .attr('data-toggle','tooltip')
        .attr('title','إنشاء نشاط جديد')
        .html('<i aria-hidden="true" class="fa fa-calendar-plus-o"></i>')
        // .click(function () {
        //     $('#newEvent').modal('show')
        // })
    //button list
    $('.fc-list-button')
        .addClass('btn btn-success')
        .attr('data-toggle','tooltip')
        .attr('title','قائمة')
        .html('قائمة <nbsp;<i class="fa fa-list"></i>')
}

planificatorController.php

<?php

    namespace App\Controller\Admin;

    use App\AppUtils;
    use App\Entity\Event;
    use App\Form\EventType;
    use DateTime;
    use DateTimeZone;
    use Doctrine\Persistence\ObjectManager;
    use Exception;
    use Sensio\Bundle\FrameworkExtraBundle\Configuration\IsGranted;
    use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
    use Symfony\Component\HttpFoundation\Request;
    use Symfony\Component\HttpFoundation\Response;
    use Symfony\Component\Routing\Annotation\Route;

    class PlanificatorController extends AbstractController
    {
        /**
         * @Route("/admin/planificator", name="admin.planificator.index")
         * @IsGranted("ROLE_STAFF")
         */
        public function index()
        {
            return $this->render('admin/planificator/index.html.twig', [
                'controller_name' => 'PlanificatorController',
            ]);
        }

        /**
         * @Route("/admin/planificator/new", name="admin.planificator.new")
         * @IsGranted("ROLE_STAFF")
         * @param Request       $request
         * @param ObjectManager $manager
         * @return Response
         */
        public function new(Request $request, ObjectManager $manager): Response
        {
            $event = new Event();
            $form = $this->createForm(EventType::class, $event);
            $form->handleRequest($request);
            if ($form->isSubmitted() && $form->isValid()) {
                $manager->persist($event);
                $manager->flush();
                $this->addFlash('success', 'لقد تمت الإضافة بنجاح');
                return $this->redirectToRoute('admin.planificator.index', [], 301);

            }
            return $this->render('admin/planificator/new.html.twig', [
                "form" => $form->createView()
            ]);
        }

        /**
         * @Route("/admin/planificator/api/event/add/",format="json", methods={"POST|GET"},name="admin.planificator.api.add")
         * @IsGranted("ROLE_STAFF")
         * @param Request       $request
         * @param ObjectManager $manager
         * @return Response
         * @throws Exception
         */
        public function add(Request $request, ObjectManager $manager): Response
        {
//        sleep(1);
            $form = $request->request->all();
            //Thu May 07 2020 01:00:00 GMT+0100 (Central European Standard Time)
//        $format ='D M m Y h:i:s e+O \Central European Standard Time';
            $format = 'D/m/Y H:i:s';
//        $start=  DateTime::createFromFormat($format, $form['start']);

//        $dstart = date("c", (int)$form['start']);
//        $dend = date("c", (int)$form['end']);

            $dtStart = new DateTime(strtotime($form['start']));
            $dtStart->setTimezone(new DateTimeZone('Europe/Amsterdam'));
            $dtEnd = new DateTime(strtotime($form['end']));
            $dtEnd->setTimezone(new DateTimeZone('Europe/Amsterdam'));

            $event = new Event();
            $event->setTitle($form['title'])
                ->setUrl(null)
                ->setStart(new DateTime($dtStart))
                ->setEnd(new DateTime($dtEnd))
                ->setTextColor(AppUtils::randomColor());
            return $this->json($event, 200);

        }
    }