title: for each loop to add events to full calendar
body: <p>I'm using Full calendar jQuery component and I'm trying to add events too it by going through a loop of divs .. but it's not working .. </p>
  
  <p>Here is the Javascript code .. <strong>the commented line are the code the has the problem when added ..</strong>
      </p>
  
  <pre><code>$(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
          ]
      });
  
  });
  </code></pre>
  
  <p></p>
  
  <p>and Here is the CSS and HTML Code .. </p>
  
  <p>
      </p>
  
  <pre><code>&lt;div class="allEvents"&gt;
  &lt;input type='hidden' id='event' value='Alaa' /&gt;
  &lt;input type='hidden' id='date' value='21' /&gt;
  &lt;/div&gt;
  &lt;div class="allEvents"&gt;
  &lt;input type='hidden' id='event' value='Waheeb' /&gt;
  &lt;input type='hidden' id='date' value='29' /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;style type='text/css'&gt;
  
  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;
      }
  </code></pre>
  
  <p></p>