Question

我正在使用完整的日历jQuery组件，我正在尝试通过循环div来添加事件..但它不起作用..

以下是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;
    }

Answer 1

你不能在[...]内进行循环;相反，使用function初始化您的活动......

Answer 2

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

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

2 个答案: