jqueryフルカレンダーを使用してイベントを動的に設定するループ

Question

jQueryフルカレンダーを使用しようとしています。イベントを動的に設定する必要があります。これらは、イベントの例です：

events: [ 
       { 
        title: 'Long Event', 
        start: '2016-09-07', 
        end: '2016-09-10' 
       }, 
       { 
        title: 'Conference', 
        start: '2016-09-11', 
        end: '2016-09-13' 
       }, 
       { 
        title: 'Meeting', 
        start: '2016-09-12T10:30:00', 
        end: '2016-09-12T12:30:00' 
       }, 
       { 
        title: 'Lunch', 
        start: '2016-09-12T12:00:00' 
       }, 
       { 
        title: 'Meeting', 
        start: '2016-09-12T14:30:00' 
       }, 
       { 
        title: 'Happy Hour', 
        start: '2016-09-12T17:30:00' 
       }, 
       { 
        title: 'Click for Google', 
        url: 'http://google.com/', 
        start: '2016-09-28' 
       } 
      ] 

私はタイトルの配列を持って、イベントの開始日と終了日、私はループ内でそれらを設定する必要があります。 誰かが私を助けて、どうすればいいのか教えてもらえますか？ 感謝の

Answer 1

このように、ループを使用して動的にイベントを設定することができます（PHPの場合）：

events:[ 
<?php for ($i=0; $i <count($countOfArray); $i++) { ?> 
{ 
    title: '<?php echo $countOfArray[$i]['Long_event']; ?>', 
    start: '2016-09-07', 
    end: '2016-09-10' 
}, 
<?php } ?> 
] 

あなたはまた、同様に日付をカスタマイズすることができます。

start: '<?php echo $countOfArray[$i]['YourDate']; ?>', 

Answer 2

$(document).ready(function(){ 
     var events = [your-json-array-of-events]; 

     var eventsArray = []; 
     console.log('e',events); 
     $.parseJSON(events).forEach(function(element, index){ 
      eventsArray.push({ 
       title:element.title, 
       description:element.description.substring(0,30), 
       start:new Date(element.start_date).toISOString(), 
       end:new Date(element.end_date).toISOString(), 

      }) 
      }) 

     $(function() { 
      $('#calendar').fullCalendar({ 

       header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,agendaWeek,agendaDay' 
       }, 
       defaultDate: Date.now(), 
       editable: false, 
       eventLimit: true, // allow "more" link when too many events 
       events: eventsArray, 
      }); 
     }); 
    }); 

Answer 3

あなたのeventsアレイに行くとfullCalendar()に提供されているオブジェクトのオプションのeventsプロパティ値としてそれを渡すことができます。

var events = [{title: 'Long Event',start: '2016-09-07',end: '2016-09-10'},{title: 'Conference',start: '2016-09-11',end: '2016-09-13'},{title: 'Meeting',start: '2016-09-12T10:30:00',end: '2016-09-12T12:30:00'},{title: 'Lunch',start: '2016-09-12T12:00:00'},{title: 'Meeting',start:'2016-09-12T14:30:00'},{title: 'Happy Hour',start: '2016-09-12T17:30:00'},{title: 'Click for Google',url: 'http://google.com/',start: '2016-09-28'}]; 
 

 
$('#calendar').fullCalendar({ 
 
    header: { 
 
    left: 'prev,next today', 
 
    center: 'title', 
 
    right: 'month,basicWeek,basicDay' 
 
    }, 
 
    defaultDate: '2016-09-12', 
 
    navLinks: true, 
 
    editable: true, 
 
    eventLimit: true, 
 
    events: events 
 
});

body { 
 
    margin: 40px 10px; 
 
    padding: 0; 
 
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 
 
    font-size: 14px; 
 
} 
 

 
#calendar { 
 
    max-width: 900px; 
 
    margin: 0 auto; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script> 
 

 
<div id="calendar"></div>