title: Group Events by Date using KnockoutJS
body: <p><strong>Update</strong>: I provided a best answer to my problem. Feel free to improve the readability and/or efficiency.</p>
  
  <p><hr>
  <strong>Problem</strong>: Using fullcalendar.io in my requireJS set up, Event objects (received from an AJAX call to a .ashx handler) are populated on the calendar on every next/prev/view change. I would like to use that JSON object on callback to create a list of Events grouped by the startDate property.</p>
  
  <p><strong>What I've done</strong><br />
  On Calendar update, such as new month, I was able to set up a basic ViewModel to populate a new list of events with the observable array. The only part that is missing is the group by, such as <a href="http://jsfiddle.net/rniemeyer/mXVtN/" rel="nofollow">this</a> example. Since I'm looking to group by an Event object's start date and then sort each group ascending by start date, I'm not sure of the best practices I should take, such as if it is necessary to transform my JSON data into objects. I will continue to update this post as I learn more. The reason that I am not using the linked example is because I do not understand the complete terminology behind the handler, but do understand some keywords like $root at this point.</p>
  
  <p><strong>AJAX call and requireJS module load</strong>: fullcalendar</p>
  
  <pre><code>var fullCalendar = ".calendar-module",
      viewModel;
  
  function initFullCalendar() {
      $(fullCalendar).fullCalendar({
              events: {
                  url: '/Presentation/DotGov/test/fullcalendar/GetEvents.ashx',
                  type: 'POST',
                  success: function (data) {
  
                      // bind events to KO ViewModel object
                      viewModel.events(data);
                  }
              },
      });
  }
  
  // requireJS module load
  return {
      load: function () {
  
          viewModel = new ViewModel();
          ko.applyBindings(viewModel);
  
          initFullCalendar();
      }
  };
  </code></pre>
  
  <p><strong>ViewModel</strong></p>
  
  <pre><code>// Day constructor that holds the day title and an array of event objects
  var Day = function() {
      dayTitle = null,
      events = []
  }
  
  function ViewModel() {
      var self = this;
  
      self.dates = ko.observableArray();
      self.events = ko.observableArray();
  
      self.uniqueDates = ko.computed(function () {
          var allDates = ko.utils.arrayMap(self.events(), function (event) {
              return new XDate(event.start).toDateString();
          });
          return ko.utils.arrayGetDistinctValues(allDates);
      }, ViewModel);
  
      // TODO: groupedEvents { date: /.., events: [..]}
      self.groupedEvents = ko.computed(function () {
  
          var groupedEvents = [];
          var uniqueDates = self.uniqueDates();
  
          for (var i = 0; i &lt; uniqueDates.length; i++) {
              // create new day object
              var day = new Day();
              day.dayTitle = uniqueDates[i];
              day.events = [];
  
              // get all events within that day
              ko.utils.arrayForEach(self.events(), function (event) {
                  var eventDate = new XDate(event.start).toDateString();
                  if (eventDate == uniqueDates[i]) {
                      day.events[day.events.length] = event;
                  }
              });
              groupedEvents[groupedEvents.length] = day;
          }
          return groupedEvents;
      });
  }
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <pre><code>&lt;div class="calendar-module-mobile"&gt;
      &lt;div class="day-wrapper"&gt;
          &lt;p class="day-title"&gt;Monday, April 16, 2014&lt;/p&gt;   &lt;%--the event startDate--%&gt;
          &lt;div class="mobile-block"&gt;
              &lt;ul data-bind="foreach: events"&gt;
                  &lt;li&gt;
                      &lt;a data-bind="attr: { href: eventUrl }"&gt;
                          &lt;p data-bind="text: title"&gt;&lt;/p&gt;
                          &lt;span class="icon-chevron-right turquoise-icon"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Update</strong>
  I've updated the ViewModel with some computed observable functions. <em>self.groupedEvents</em> goes through the list of unique dates and returns an array of Day objects, in which each Day object contains the unique dates title and an array of Event objects (not transformed from JSON). I have to now update the View to see if it worked.</p>