JavaScriptを使用して文字列を日付に変換する方法

Question

私のチームと私は現在、フルカレンダーを使用してアジェンダを構成するウェブサイトを作成しようとしています。

私たちは変更できない外部DBと、プロジェクト用の別のDBを持っています。外部DBと通信し、予定を作成するためのアベイラビリティとアポイントを取得するには、APIを作成してjsonファイルを取得する必要があります。 まず、空き状況をイベントとしてレンダリングしようとしています。

私は完全なジュニアなので、jsonファイルが私に送るデータを変換するのに問題があります。 日付に対して受け取った形式は「文字列」であり、日付形式ではありません（イベントを表示するにはFulCalendarで必要です）。

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

、ここでは私のcalendar.jsファイルです：

私たちは、私のコントローラのアクションである。ここにsymfonyに2.8

をWORKD

<!-- 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); 

と私は隠されたdiv要素を使用して情報を渡しますこのように：

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

私は私のコンソールでこれを受け取る：

{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'} 

、私はこのエラーがあります： 我々はfullcalendarに与えられたフォーマットを想定しerror in my console

が良い形式ではありませんが。私たちが良い方向を見ているなら誰でも考えがありますか？そしてもしそうなら、その解決策はどうですか？

Answer 1

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

です。私は日付がfullCalendarが理解できる形式であるように、あなたが

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

に変更するべきだと思います。

https://fullcalendar.io/docs/utilities/Moment/あたりとして、あなたは以下の形式で文字列を使用することができます。

• ISO日付文字列
• Unixタイムスタンプを（Y-m-dをご 目的のために、この日の一部が生成されます）。