eventsThisDay in addition to eventsThisMonth

[kylestetz]

eventsThisDay in addition to eventsThisMonth

[kylestetz]

This is doable. The way I would create this is using clndr's clickEvents.click callback, which is fired whenever you click on a day in the calendar grid. It returns the element you clicked on, the date as a moment object, and- most importantly- any events that are happening on that particular day. You can take the events it returns, build the list markup on the fly, and push it into the event list view.

Here's roughly what you want in your javascript:

$('#calendar').clndr({
  clickEvents: {
    click: function(target) {
      // we are going to build the DOM elements as a string, but you could also
      // take advantage of a templating engine for this portion if you wanted to achieve
      // something more complicated.
      var eventListHtml = "";
      // target.events contains a list of events (if any) happening on this day
      for(var i = 0; i < target.events.length; i++) {
        // you might also want to include other properties of the event in your element
        eventListHtml += '<div class="event">' + target.events[i].title + '</div>';
      }
      // now we find the list of events and push these elements into it.
      // We're using `this.element` because we want to limit the scope of our query selector
      // to this particular instance of clndr (in case there are others).
      $(this.element).find('.events-list').html( eventsListHtml );
    }
  }
});

As I said in the comments, if you're building complex markup you probably don't want to use strings. Since you're already taking advantage of underscore (or some similar templating engine) you could make a template for your events list and keep things very neat.

[cedriccharles4]

Hi Kyle !

What a fast answer ! Amazing support :) !

I've customize your code a little bit to fit my needs and it works well, thank you very much !

Great script !