jquery完整日曆使用循環動態設置事件

我想使用jQuery完整日曆，我必須動態設置事件。這些事件的例子：事件的結束日期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' 
       } 
      ]

我有一個標題陣列，開始日期和我必須將它們放置在循環。有人可以幫助我，告訴我該怎麼做？感謝的

來源

2016-10-17 Edoardo

-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']; ?>',

來源

2017-04-28 10:02:56

我已經解決了它，但是謝謝你的回答！ – Edoardo

$(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, 
      }); 
     }); 
    });

來源

2016-10-17 13:37:15 Rohit

它不工作對我來說...這是我的代碼： – Edoardo

http://stackoverflow.com/questions/40104390/json-array -for-events-array-in-jquery-fullcalendar – Edoardo

您可以與您events陣去，把它作爲對象選項的events屬性值提供給fullCalendar()：

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>

來源

2016-10-17 14:07:47

jquery完整日曆使用循環動態設置事件

回答

相關問題