11: カレンダーに予定を描画する

1. renderで予定を描画する

renderメソッド内で予定を描画するようにします。collection.findByDateで一日ごとの予定を取得してきて描画していきます。

js/view.js

App.CalendarView = Backbone.View.extend({
  //...
  render: function() {
    var $caption = this.$('caption');
    var $tbody = this.$('tbody');
    var currentDay = this.current.clone().startOf('month').startOf('week');
    var endDay = this.current.clone().endOf('month');

    $tbody.empty();
    $caption.text( this.current.format('YYYY年MM月') );

    while (currentDay <= endDay) {
      var $tr = $('<tr>').appendTo($tbody);
      for (var i = 0; i < 7; i++) {
        var $date = $('<div class="calendar-date">').text(currentDay.format('MM/DD'));
        var $list = $('<ul class="calendar-list">');
        var schedules = this.collection.findByDate(currentDay);

        _.each(schedules, function(model) {
          var text = model.dateFormat('HH:mm') + ' ' + model.get('title');
          $('<li>').text(text).appendTo($list);
        });

        $('<td>').append($date, $list).appendTo($tr);
        currentDay.add(1, 'day');
      }
    }
  },
  //...
});

これでダミーデータが描画されれば成功です。

2. addイベント時にrenderする

addイベント時にもrenderすることでデータが追加されたときにも反映するようにします。

js/view.js

App.CalendarView = Backbone.View.extend({
  initialize: function() {
    this.current = moment();
    this.render();

    this.listenTo(this.collection, 'add', this.render);
  },
  //...
});

これで予定をつくったときに描画されれば成功です。

3. ダミーデータをつくる

デバッグのため、何件かのデータを予め登録しておきます。

js/app.js

window.App = {};

$(function() {
  var schedules = new App.Schedules();

  schedules.add([
    { title: '打ち合わせ1', datetime: moment('2013-10-01 13:00') },
    { title: '打ち合わせ2', datetime: moment('2013-10-02 15:00') },
    { title: '打ち合わせ3', datetime: moment('2013-10-02 13:00') },
    { title: '打ち合わせ4', datetime: moment('2013-10-05 13:00') },
    { title: '打ち合わせ5', datetime: moment('2013-10-10 14:00') }
  ]);

  //...
});