How to transform a string into date in javascript

Question

My team and I are currently trying to create a website to organize an agenda (using Fullcalendar).

We have an external DB that we cannot modify and another DB for the projet. To communicate with the external DB and get availablities (to create appointments) and appointments already taken, we have to make an API and get json files. I am trying first to render availabilities as events.

As I am a complete junior, I am having trouble to transform the data the json file sends me. The format received for dates is "string" and not a a date format (required by FulCalendar to render events).

We workd on symfony 2.8

Here is my controller action :

public function indexAction()
{

    // parameters
    $datefin = "04-08-2017";
    $centercab = '13';
    $daynum = '5'; // number of days in the week (5,6 or 7)

    if($daynum==5){
        $weekend = 'false';
    } else {
        $weekend = 'true';
    }

    //We take the date of the begining of the week end the ending to initialize the rendering of the calendar 

    $ddate= new \DateTime();
    $endweek= clone $ddate;

    // we add 5 or 7 days according to the pros parameters for the week vue
    $endweek->modify('+'. $daynum .' day');

    // We change de date format of the day date and the end of the week date 
    $ddate= $ddate->format('d-m-Y');
    $endweek= $endweek->format('d-m-Y');

    // print the date to check
    print  "du " . $ddate. " au " . $endweek . "</br>";

    $motif_referent_cab = '238'; // number of the motive in the external DB

    $req = "http://connect.mydb.com/availability?center=".$centercab."&motive=".$motif_referent_cab."&datesince=".$ddate."&timesince=00:00&maxresults=50";

    // read and decode .json file
    $weekdates = file_get_contents($req);
    $weekdatesjson = json_decode($weekdates, true);
   // var_dump($weekdatesjson["data"]);

    $i=0;
    $eventstab =Array();
    foreach ($weekdatesjson["data"] as $key=>$value){       // $value refers to arrays (with dates as index) contained in the array "dispo"
        foreach ($value as $value1){                        // $value1 refers to hours of availabilities (dispo) in arrays (dates)
            $eventstab[$i] =  "{title: 'Dispo', start: '".$ddate."T".$value1.":00'},";

            $i++;
        }
    }
    $lesdispos = implode($eventstab);

    return $this->render(MyBundle:Default:index.html.twig',
        array(
            'Date_jour'=>$ddate,
            'lesdispos'=>$lesdispos  // variable 'lesdispos' client side will contain the data of'$lesdispos', that is on server side.
        )
    );            
}

and here is my calendar.js file :

<!-- Page specific script -->
$(document).ready(function(){

/* --------------------------------------------- */
/* ---------- Initialize the calendar ---------- */
/* --------------------------------------------- */

// Date for the calendar events (dummy data)
var date = new Date();
var d = date.getDate(),
    m = date.getMonth(),
    y = date.getFullYear();

  $('#calendar').fullCalendar({
    lang: 'fr',
    defaultView: 'agendaWeek',

    editable: true,
    selectable: true,
    selectHelper: true,

    /*        aspectRatio: 1,*/
    /*defaultDate: new Date(),*/
    slotDuration: '00:15:00',
    slotLabelInterval: '00:15:00', // marque l'intervalle de temps sur axe des y à gauche
    snapDuration: '00:15:00',

    minTime: '07:00:00', // heure de début du calendrier
    maxTime: '19:00:00', // Heure de fin du calendrier

    axisFormat: 'HH:mm',
    timeFormat: 'HH(:mm)',
    slotLabelFormat:"HH:mm",
    columnFormat: 'ddd D/MM',

    eventLimit: true, // allow "more" link when too many events
    defaultTimedEventDuration: '00:15:00', // Durée d'un rendez vous par défaut

    header: {
        left: 'prevYear,prev,next,nextYear today',
        center: 'title',
        right: 'agendaWeek,agendaDay, listDay'
    },

    buttonText: {
        today: "Aujourd'hui",
        month: 'Mois',
        week: 'Semaine',
        day: 'Jour',
        mois: 'Mois',
        annee: 'Année',
        listDay: 'Planning'
    },

    // Random default events
    events: [
        disponibilities
    ]
  });
});


var disponibilities = document.getElementById('disponibilities').getAttribute('data-disponibility');
console.log(disponibilities);

and I pass info using an hidden div like this :

<div id="calendar"></div>
<div class="visually-hidden" data-disponibility="{{ lesdispos }}" id="disponibilities"></div>

I receive this in my console :

{title: 'Dispo', start: '09-08-2017T10:10:00'},{title: 'Dispo', start: '09-08-2017T10:40:00'},{title: 'Dispo', start: '09-08-2017T11:00:00'},{title: 'Dispo', start: '09-08-2017T11:10:00'},{title: 'Dispo', start: '09-08-2017T11:30:00'}

And i have this error : error in my console

We assumed the format given to fullcalendar is not a good format. Do anybody have an idea if we are looking in the good direction ? And if yes, what the solution could be please ?

Answer 1

$ddate= $ddate->format('d-m-Y');

is the issue. I think you should change it to

$ddate= $ddate->format('Y-m-d');

so that the date is in a format that fullCalendar understands.

As per https://fullcalendar.io/docs/utilities/Moment/ you can use strings in the following formats:

• ISO date string (Y-m-d will produce the date part of this, for your purpose)
• Unix timestamp.