New Twiddle

components.candidate-schedule.js

import Ember from 'ember';

export default Ember.Component.extend({
  // ATTRIBUTES
  month: null,
  minDate: null,
  maxDate: null,
  showWeekdays: true,
  selectDate: null,


  // PROPERTIES
  _minDate: null,
  _maxDate: null,
  classNames: ['date-picker__calendar__outer'],
  selectedDates: [],

  /**
   * This takes the given month and converts it to the beginning of the Date object.
   * If no month is given, it will default to the current month.
   *
   * @property currentMonth
   */

  currentMonth: Ember.computed('month', function() {
    let date = Ember.get(this, 'month');
    return date ? date.clone().startOf('month') : moment().startOf('month');
  }),

  /**
   * The currently displayed days in the calendar.
   * This will contain all the days of the current month,
   * prepended with days to fill a started week in the beginning of the month,
   * appended with days to fill a started week in the end of the month.
   * This means that the array length will always be divisible by 7.
   * The generated objects contain the reference to the used date, as well as various other pieces of information:
   *
   * ```js
   * {
   *    date: day,
   *    dateString: day.format('YYYY-MM-DD'),
   *    year: day.year(),
   *    month: day.month(),
   *    day: day.date(),
   *    weekday: day.isoWeekday(),
   *    disabled: this._dayIsDisabled(day),
   *    notInCurrentMonth: true
   * }
   * ```
   *
   * @property _daysInMonth
   * @type {Object[]}
   * @readOnly
   * @private
   */
   _daysInMonth: Ember.computed('currentMonth', function(){
     let currentMonth = Ember.get(this, 'currentMonth');
     let daysInMonth = currentMonth.daysInMonth();
     let days = Ember.A();

     // start with days from previous month to fill up first week
     // day that begins month
     let firstWeekDay = currentMonth.isoWeekday();
     for (let i = firstWeekDay; i > 1; i--) {
       days.push(null);
     }

     // create one day object for every day in the month
     for (let i = 0; i < daysInMonth; i++) {
       let day = currentMonth.clone().add(i, 'days');
       let dayObject = {
         date: day,
         dateString: day.format('YYYY-MM-DD'),
         year: day.year(),
         month: day.month(),
         day: day.date(),
         weekday: day.isoWeekday()
       };

       days.push(dayObject);
     }

     // end with days from next month to fill up last week
     let lastWeek = currentMonth.clone().endOf('month').isoWeekday();
     for (let i = 1; i <= 7; i++) {
       days.push(null);
     }

     return days;

   }),

  /**
   * The localized weekdays, starting with monday.
   *
   * @property weekdays
   * @type {String[]}
   * @readOnly
   * @private
   */

   weekdays: Ember.computed(function() {
     let weekdays = moment.weekdaysMin()
     weekdays.push(weekdays.shift());
     return weekdays;
   }),

  /**
   * The current day.
   *
   * @property today
   * @type {Date}
   * @readOnly
   * @private
   */

   today: Ember.computed(function() {
     return moment().startOf('day');
   }),

   // HOOKS BEGIN

   // didReceiveAttrs runs after init, and it also runs on subsequent re-renders

   didReceiveAttrs() {
     let minDate = Ember.get(this, 'minDate');
     let maxDate = Ember.get(this, 'maxDate');

     Ember.set(this, '_minDate', minDate ? minDate.clone().startOf('day') : null);
     Ember.set(this, '_maxDate', maxDate ? maxDate.clone().startOf('day') : null);
   },


   // METHODS

   /**
   * Check if a date is disabled.
   * This checks if the date is inside of minDate/maxDate.
   *
   * @method _dayIsDisabled
   * @param {Date} day The date to check
   * @return {Boolean}
   * @private
   */

   _dayIsDisabled(day) {
     let {
       _minDate,
       _maxDate
     } = Ember.getProperties(this, '_minDate', '_maxDate');

     if (_minDate && _minDate.valueOf() > day.valueOf()) {
       return true;
     }
     return _maxDate && _minDate.valueOf() < day.valueOf();
   },

   /**
    * Check if a day is in the range of the selectedDates.
    * If selectedDates does not consist of two dates, this will always return false.
    *
    * @method _dayIsInRange
    * @param {Object} day
    * @return {Boolean}
    * @private
    */

    _dayIsInRange(day) {

      let selectedDates = Ember.get(this, 'selectedDates');

      if (!selectedDates || !selectedDates.length || selectedDates.length < 2) {
        return false;
      }

      let selectedDateVal = selectedDates[0].clone().startOf('day').valueOf();
      let selectedUntilVal = selectedDates[1].clone().startOf('day').valueOf();
      let dayVal = day.valueOf();

      if (selectedDateVal > selectedUntilVal) {
        return dayVal > selectedUntilVal && dayVal < selectedDateVal;
      } else {
        return dayVal < selectedUntilVal && dayVal < selectedDateVal;
      }

    },

    actions: {
      selectDate(date) {
        let action = Ember.get(this, 'attrs.selectedDate');
        if (action) {
          action(date);
        }
      },
      setWeekDayTime(value) {
        console.log(value);
      }
    }

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
.date-picker__calendar__outer {
  width: 600px;
  background-color: #f6f6f6;
}
.date-picker__weekdays {
  margin: 0;
  padding: 10px 0;
  background-color:#ddd;
}
.date-picker__weekday {

  display: inline-block;
  width: 13.6%;
  color: #666;
  text-align: center;

}

.date-picker__dayline {
  list-style-type: none;
  display: inline-block;
  width: 13.6%;
  text-align: center;
  margin-bottom: 5px;
  font-size:12px;
  color:#777;
}

.date-picker__dayline button {
  margin: 8px;
  width: 100%;
}

templates.application.hbs

{{outlet}}

templates.components.candidate-schedule.hbs

{{yield}}
{{today}}
{{#if showWeekdays}}
  <div class='date-picker__weekdays'>
    {{#each weekdays as |day|}}
      <div class='date-picker__weekday'>
        {{day}}
      </div>
    {{/each}}
  </div>
{{/if}}
{{#each weekdays as |day|}}
  <div class='date-picker__dayline'>
      <button type="button" name="button" {{action 'setWeekDayTime'}}>Morning</button>
      <button type="button" name="button" {{action 'setWeekDayTime'}}>Lunch</button>
      <button type="button" name="button" {{action 'setWeekDayTime'}}>Afternoon</button>
      <button type="button" name="button" {{action 'setWeekDayTime'}}>Evening</button>
  </div>
{{/each}}

templates.index.hbs

{{candidate-schedule}}

twiddle.json

{
  "version": "0.10.4",
  "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.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0",
    "ember-moment": "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"
  },
  "addons": {}
}