Click on Individual Days

[kylestetz]

Click on Individual Days

[kylestetz]

I just did this in a client project of ours. Here's the basic theory:

• Create an area in your markup where the event list will go (but don't populate it with anything in your template).
• Use the click callback to get the event(s) from that day and push them into that container.

Let's say the events list within your template looks like this:

  <div class="events-list"></div>

From your click callback:

$('#calendar').clndr({
  clickEvents: {
    click: function(target) {
      // make a <ul>
      var markup = '<ul>';
      // loop through the events, making a <div> for each with relevation info
      for(var i = 0; i < target.events.length; i++) {
        markup += '<div class="event">' + target.events[i].title + '</div>';
      }
      // close the </ul>
      markup += '</ul>';
      // put your new markup in the events container!
      $('.events-list').html( markup );
    }
  }
});

You could also use a separate underscore template for this portion, so that you can just do something like this in your click callback (nobody really wants to build markup in JS):

$('.events-list').html( eventsTemplate(target.events) );

Let me know if you have any other questions!

[ricbermo]

This MUST be in the README, Thanks a lot!