schedulerzored

components.candidate-scheduler.js

import Ember from 'ember';
import moment from 'moment';

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 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

   
    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: 'Scheduler'
});

templates.application.hbs

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

templates.components.candidate-scheduler.hbs

{{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

{{candidates-scheduler}}

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"
  },
  "addons": {}
}