Skip to content

Instantly share code, notes, and snippets.

@david-duncan
Last active April 19, 2017 05:30
Show Gist options
  • Select an option

  • Save david-duncan/c564810b10a42b93db590252f5d3647a to your computer and use it in GitHub Desktop.

Select an option

Save david-duncan/c564810b10a42b93db590252f5d3647a to your computer and use it in GitHub Desktop.
current week only
import Ember from 'ember';
import computed from 'ember-computed';
import moment from 'moment';
export default Ember.Component.extend({
days: computed(function() {
let now = moment();
let day = now.clone().startOf('week');
let lastDay = now.clone().endOf('week');
let days = [];
while (day.isBefore(lastDay)) {
let copy = day.clone();
let isCurrentMonth = copy.month() === now.month();
days.push({ date: copy._d, moment: copy, isCurrentMonth });
day.add(1, 'day');
}
return days;
}),
currentWeek: computed('isShowingCurrentWeek', function() {
let days = this.get('days');
let weeks = [];
let i = 0;
while (days[i]) {
weeks.push({ days: days.slice(i, i + 5) });
i += 5;
}
return weeks;
})
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
{{week-only}}
{{#power-calendar as |calendar|}}
{{calendar.nav}}
<div class="ember-power-calendar-row ember-power-calendar-weekdays">
<div class="ember-power-calendar-weekday">Sun</div>
<div class="ember-power-calendar-weekday">Mon</div>
<div class="ember-power-calendar-weekday">Tue</div>
<div class="ember-power-calendar-weekday">Wed</div>
<div class="ember-power-calendar-weekday">Thu</div>
<div class="ember-power-calendar-weekday">Fri</div>
<div class="ember-power-calendar-weekday">Sat</div>
</div>
<div class="ember-power-calendar-day-grid">
{{#each currentWeek as |week|}}
<div class="ember-power-calendar-row ember-power-calendar-week">
{{#each week.days as |day|}}
<div class="ember-power-calendar-day {{if day.isCurrentMonth 'ember-power-calendar-day--current-month'}}">
{{moment-format day.date 'D'}}
</div>
{{/each}}
</div>
{{/each}}
</div>
{{/power-calendar}}
{
"version": "0.12.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.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1",
"ember-power-calendar": "*"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment