New Twiddle

components.simple-calendar.js

import Ember from 'ember';

const DAY_SUNDAY = 0;
const DAY_MONDAY = 1;
const DOW_SUNDAY_FIRST = [0, 1, 2, 3, 4, 5, 6];
const DOW_MONDAY_FIRST = [1, 2, 3, 4, 5, 6, 0];

export default Ember.Component.extend({
 
  displayDate: null,
  selectedDate: null,

  _startDayOfWeek: DAY_SUNDAY,
  _dayOrder: DOW_SUNDAY_FIRST,
navigateBackward(event) {
  console.log(event);
},
  init() {
    this._super(...arguments);
    
    const displayDate = this.getWithDefault('attrs.displayDate', new Date());
    const selectedDate = this.getWithDefault('attrs.selectedDate', new Date());
    
    if(this.get('_startDayOfWeek') === DAY_MONDAY) {
      this.set('_dayOrder', DOW_MONDAY_FIRST);
    }
    
    this.setProperties({
      displayDate,
      selectedDate
    });
  },
  
  calendar: Ember.computed('displayDate', function() {
    const displayDate = this.get('displayDate');
    
    return {
      currentYear: displayDate.getFullYear(),
      currentMonth: displayDate.getMonth(),
      dayNames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
      weeks: [
        {
          previousMonthDays: [
            { date: 30, weekday: false },
            { date: 31, weekday: true }
          ],
          days: [
            { date: 1, weekday: true },
            { date: 2, weekday: true },
            { date: 3, weekday: true },
            { date: 4, weekday: true },
            { date: 5, weekday: false }
          ],
          nextMonthDays: [
          ]
        },
        {
          previousMonthDays: [
          ],
          days: [
            { date: 6, weekday: false },
            { date: 7, weekday: true },
            { date: 8, weekday: true },
            { date: 9, weekday: true },
            { date: 10, weekday: true },
            { date: 11, weekday: true },
            { date: 12, weekday: false }
          ],
          nextMonthDays: [
          ]
        }  
      ]
    };
  }),
  
  actions: {
    navigateForward() {
      
    },
    
    navigateBackward() {
      
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  tomorrow: new Date(2015, 11, 4)
});

helpers.t.js

import Ember from 'ember';

export function t(params/*, hash*/) {
  return params;
}

export default Ember.Helper.helper(t);

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}

{{simple-calendar}}

{{simple-calendar selectedDate=tomorrow}}
<br>
<br>

templates.components.simple-calendar.hbs

<p>Display date: {{displayDate}}</p>
<p>Selected date: {{selectedDate}}</p>
<br/>

<div class="calendar" tabindex="0">
  {{!-- <div class="calendar-navigation">
    <button onclick={{action navigateBackward}} type="button" class="nav navigate-backward" title={{t "calendar_navigate_backward"}} tabindex="0">
      &lt;
    </button>
  </div> --}}
  <table data-year={{calendar.currentYear}} data-month={{calendar.currentMonth}}>
    <caption>{{t (concat "calendar_month_" calendar.currentMonth)}}</caption>
    <thead>
      <tr>
        {{#each calendar.dayNames as |dayName|}}
          <th>{{dayName}}</th>
        {{/each}}
      </tr>
    </thead>
    <tbody>
      {{#each calendar.weeks as |week|}}
        <tr class="week">
          {{#each week.previousMonthDays as |day|}}
            <td data-date={{day.date}} data-weekday={{day.weekday}} class="{^isInRange}out-of-range{/isInRange} previous-month {?isSelected}selected{/isSelected} {?isToday}today{/isToday}" tabindex="-1">{{day.date}}</td>
          {{/each}}
          {{#each week.days as |day|}}
            <td data-date={{day.date}} data-weekday={{day.weekday}} class="{^isInRange}out-of-range{:else}selector{/isInRange} current-month {?isSelected}selected{/isSelected} {?isToday}today{/isToday}" tabindex="{^isInRange}-1{:else}0{/isInRange}">{{day.date}}</td>
          {{/each}}
          {{#each week.nextMonthDays as |day|}}
            <td data-date={{day.date}} data-weekday={{day.weekday}} class="{^isInRange}out-of-range{/isInRange} next-month {?isSelected}selected{/isSelected} {?isToday}today{/isToday}" tabindex="-1">{{day.date}}</td>
          {{/each}}
        </tr>
      {{/each}}
    </tbody>
  </table>
  <div class="calendar-navigation">
    <button {{action "navigateForward"}} type="button" class="nav navigate-forward" title={{t "i18n_calendar_navigate_forward"}}>
      &gt;
    </button>
  </div>
</div>

twiddle.json

{
  "version": "0.8.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}