jQueryでシンプルなカレンダー


リッチなプラグインが必要無いとき時用につくったカレンダー

#ゴール
![cal.png](https://qiita-image-store.s3.amazonaws.com/0/7370/0b6e62c0-b84d-3503-dd6f-fad63a83f184.png)

#ソース

##HTML
Backboneを利用している。
表示用のDIVタグを設定

```index.html
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>シンプルなカレンダー</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
    <style type="text/css">.cal {width: 300px;margin: 20px auto;}</style>
  </head>
  <body>
    <div id="cal" class="cal"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
    <script type="text/javascript" src="/cal.js"></script>
    <script type="text/javascript">
    $(function () {
      new CalendarView({el: '#cal'});
    });
    </script>
  </body>
</html>
```

##js
1日の曜日 `isWeek`
最終日  `totalDays `
日にちを表示するのに必要な行数 `tableRowNum `

表示する日を準備

```
var tablecont = [];
_(7*tableRowNum).times(function(i){
	tablecont[i] = "　";
});
_(totalDays).times(function(i){
	tablecont[i + isWeek] = i + 1;
});
```

#全文

```
var CalendarView = null;

(function(){

  CalendarView = Backbone.View.extend({

    weekLbl: ["日","月","火","水","木","金","土"],

    initialize: function (config) {
      this.c = config.current || moment();
      this.render();
    },

    render: function () {
      var self = this;
      var isWeek = this.c.startOf('months').days();
      var totalDays = this.c.endOf('month').date();
      var tableRowNum = Math.ceil((isWeek + totalDays) / 7);
      var tablecont = [];
      _(7*tableRowNum).times(function(i){
        tablecont[i] = "　";
      });
      _(totalDays).times(function(i){
        tablecont[i + isWeek] = i + 1;
      });
      this.table = $('<table class="table">');
      this.table.append($("<tr><td colspan='7' bgcolor='#EFEFEF' style='text-align:center'>"+this.c.format('YYYY年MM月')+"</td></tr>"));
      this.$el.append(this.table);

      var tr = $("<tr></tr>");
      _(7).times(function(i){
        var td = $("<td class='weektd' data-week='"+i+"'></td>").css({
          "font-size": "small",
          "padding": "5px 0px",
          "text-align": "center",
          "user-select": "none",
          "cursor": "pointer"
        });
        td.text(self.weekLbl[i]);
        tr.append(td);
      });
      this.table.append(tr);

      _(tableRowNum).times(function(i){
        var trw = $("<tr></tr>");
        _(7).times(function(j){
          var td = $("<td style='padding:5px;'></td>");
          var dayview = new CalenderDayView({
            el: td,
            day: tablecont[j + i * 7],
            week: j,
            status: 1,
            disp: tablecont[j + i * 7] && tablecont[j + i * 7] != "　"
          });
          trw.append(dayview.el);
        });
        self.table.append(trw);
      });
    }
  });

  var CalenderDayView = Backbone.View.extend({
    initialize: function (config) {
      this.config = config;
      this.day = config.day;
      this.render();
    },
    render: function () {
      this.$el.css({
        "padding": "10px 0px",
        "text-align": "center",
        "height": "48px",
        "user-select": "none",
        "cursor": "pointer"
      });
      this.$el.html(this.day);
    }
  });
})();
```

#月を指定する場合
```
new CalendarView({
  el: '#cal',
  current: moment("2016-04", "YYYY-MM") 
});
```