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