power-calendar-multiple-test

controllers.application.js

import Controller from '@ember/controller';
import { computed } from '@ember/object';
import {
  add,
} from 'ember-power-calendar-utils';

export default Controller.extend({
  center: new Date('2016-05-17'),
  selected: null,

  nextMonthsCenter: computed('center', function() {
    return add(this.center, 1, 'month');
  }),

  months: computed('', function() {
    return [
      new Date('2016-01-15'),
      new Date('2016-02-15'),
      new Date('2016-03-15'),
      new Date('2016-04-15'),
      new Date('2016-05-15'),
      new Date('2016-06-15'),
      new Date('2016-07-15'),
      new Date('2016-08-15'),
      new Date('2016-09-15'),
      new Date('2016-10-15'),
      new Date('2016-11-15'),
      new Date('2016-12-15'),
    ];
  }),
});

templates.application.hbs

{{#power-calendar-range
  class='multiple-month-power-calendar-horizontal'
  center=center
  selected=selected
  onCenterChange=(action (mut center) value="date")
  onSelect=(action (mut selected) value="date")
  as |calendar|
}}
  {{#calendar.nav}}
    <div class='month-name'>
      {{power-calendar-format-date calendar.center 'MMMM' locale=calendar.locale}}
    </div>
    <div class='month-name'>
      {{power-calendar-format-date nextMonthsCenter 'MMMM' locale=calendar.locale}}
    </div>
  {{/calendar.nav}}


  <div class='months-container'>
    {{calendar.days showDaysAround=false}}

    {{calendar.days center=nextMonthsCenter showDaysAround=false}}
  </div>
{{/power-calendar-range}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-power-calendar": "0.12.0",
    "ember-power-calendar-moment": "0.1.6"
  }
}