Date manipulation, formatting and parsin is too complex for ember-power-calendar to reinvent, so it has to rely on other well tested libraries for that.
This is the addon that exposes the utils used internally by ember-power-calendar, using date-fns underneath.
You will want to install this addon if you already use date-fns in your application already, or if you don't want to use moment.js or Luxon.
- Ember.js v3.11 or above
- Node.js v10 or above
| ember | date-fns | ember-power-calendar-date-fns |
|---|---|---|
| ? | 1.x | < 0.3 |
| ? | 2.x | ≥ 0.3 |
| ≥ 3.11 | 2.x | ≥ 0.4 |
ember install @makepanic/ember-power-calendar-date-fns
Don't use it.
This library is meant to be used internally by ember-power-calendar only.
The API can change in breaking ways based on the needs of Ember Power Calendar.
This addon provides multiple ways to localize the calendar.
By default, all of date-fns/locale is imported and used if you configured the power-calendar locale.
Note: this will include ~360 KB of Javascript.
If you only want to support only a subset of all date-fns/locale locales, you can pass them as a list to the addon options:
const app = new EmberApp(defaults, {
'ember-power-calendar-date-fns': {
// include only 'en-US', 'en-GB', 'zh-CN' and 'de' locale
includeLocales: ['en-US', 'en-GB', 'zh-CN', 'de']
}
});This will cause the addon to build imports that directly load the specified locales.
Note:
- you can only include locales that date-fns exports. See locale for locales that this addon can import. (See also Supported Languages).
Alternatively, if you don't want to ship all of date-fns/locale, you can localize the calendar yourself.
To do this, configure the addon by setting the 'ember-power-calendar-date-fns' field as ember option:
const app = new EmberApp(defaults, {
'ember-power-calendar-date-fns': {
includeLocales: false
}
});Setting includeLocales to false excludes the date-fns localized modules.
By default, this adapter implements any localization feature as a fallback, using the en locale.
If you want to localize the dates yourself, extend the DaysComponent and implement localized methods, like startOfWeek, weekdaysShort:
import DaysComponent from 'ember-power-calendar/components/power-calendar/days';
import layout from 'ember-power-calendar/templates/components/power-calendar/days';
export default class PowerCalendarDays extends DaysComponent {
layout = layout;
startOfWeek = 1;
@service intl!: IntlService;
@computed('calendar.locale')
get weekdaysShort(): string[] {
const { intl } = this;
const prefix = 'calendar.days.short';
return ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
.map(k => intl.t(`${prefix}.${k}`));
}
@alias('weekdaysShort') weekdaysMin!: string[];
@computed('calendar.locale')
get weekdays(): string[] {
const { intl } = this;
const prefix = 'calendar.days.long';
return ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
.map(k => intl.t(`${prefix}.${k}`));
}
}See the Contributing guide for details.
This project is licensed under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent