@makepanic/ember-power-calendar-date-fns

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.

Compatibility

• Ember.js v3.28 or above
• Ember CLI v3.28 or above
• Node.js v16 or above

ember	date-fns	ember-power-calendar-date-fns
?	1.x	< 0.3
?	2.x	≥ 0.3
≥ 3.11	2.x	≥ 0.4

Installation

ember install @makepanic/ember-power-calendar-date-fns

Add the following lines into you app/app.js to register this meta addon to ember-power-calendar

import { registerDateLibrary } from 'ember-power-calendar';
import DateUtils from '@makepanic/ember-power-calendar-date-fns';

registerDateLibrary(DateUtils);

Usage

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.

I18n

This addon provides multiple ways to localize the calendar.

Using date-fns/locale

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

DIY

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}`));
  }
}

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.