每个循环事件添加到完整的日历

问题描述:

我使用的是完整的日历jQuery的成分,我想通过申报单的循环要添加的事件太..但它不工作..每个循环事件添加到完整的日历

这里是JavaScript代码.. 的注释行,在代码中添加时有问题..

$(document).ready(function() { 

    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 

    $('#calendar').fullCalendar({ 
     editable: true, 
     events: [ 
      //$("div.allEvents").each(function (index){  when I add this to the Jquery code .. it doesn't work 
       { 
        //title: $(this).children('#event').val(), replace this by the next line 
        title: $('#event').val(), 

        //start: new Date(y, m, $(this).children('#date').val()) replace this by the next line 
        start: new Date(y, m, $('#date').val()) 
       }, 
      //});  End of each loop 
     ] 
    }); 

}); 

,这里是CSS和HTML代码..

<div class="allEvents"> 
<input type='hidden' id='event' value='Alaa' /> 
<input type='hidden' id='date' value='21' /> 
</div> 
<div class="allEvents"> 
<input type='hidden' id='event' value='Waheeb' /> 
<input type='hidden' id='date' value='29' /> 
</div> 

<style type='text/css'> 

body { 
    margin-top: 40px; 
    text-align: center; 
    font-size: 14px; 
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 
    } 

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

你不能做[...]内环路;相反,使用function来初始化事件......

HTML

<div id="all-events"> 
    <div class="event"> 
    <input type="hidden" class="title" value="Alaa"/> 
    <input type="hidden" class="date" value="12/21/2012" />  
    </div> 
    ... rest of events go here 
</div> 

的JavaScript

注意:您将需要包装的日期值转换成某种类型的转换器,使之成为Date类型,我会推荐moment.js

var myEvents = []; 

$.each($('.event'), function(event) { 
    myEvents.push({ 
    title : event.find('.title').val(), 
    start : event.find('.date').val(), 
    allDay : true 
    }); 
}); 

$myCal.fullCalendar('addEventSource', myEvents); 
+1

这是另一种方式。但在代码中,Ghost只需要将'events:[code]'改成'events:function(st,en,cb){var events []; > cb(events);}' – MaxD