Question

I have a calendar with an event list below it on my page. When the user clicks on the next or previous button, I want to populate a div with the contents of rows only containing the currently displayed month and year on the calendar. Here’s the structure of the rows (created with Drupal 7 Views).

<div id="all-events">
  <div class="views-rows">
    <div class="field-date">
      <div class="field-content">
        <span>June 2011</span>
      </div>
    </div>
  </div>
  <div class="views-rows">
    <div class="field-event-title">
      <div class="field-content">
        <span>Some Event</span>
      </div>
    </div>
  </div>
</div>

I got this far with jQuery, but I’m getting a huge list of errors:

   $('#calendar span.fc-button-next').live('click', function(){
      var month = $('#calendar .fc-header-title h2').html();
      $('.event-list').fadeOut(350, function(){
         $(this).html('');
         $('#all-events').each('.views-rows',function(){
            // Code goes here...
         });
      });
   });

I should also mention that I’m using FullCalendar to create the calendar, so it’s created with this plugin. Right now I can get the current month the user is viewing, but I want to go through the list and find all rows that contain this month and display them in the .event-list div.

Answer 1

This seems wrong:

$('#all-events').each('.views-rows',function(){...});

How about this:

$('.views-rows', '#all-events').each(function(){...});