ember-power-calendar
ember-power-calendar copied to clipboard
Locale doesn't seem to work anymore ?
Hi,
First of all, thank you for your app :)
It seems that since a few days (i only noticed it at the beginning of the week), the locale doesn't seem to work anymore... I have mine to display in French ('fr') and it used to work fine. Maybe i'm doing something wrong ? Has anyone noticed this as well ? Instead it keeps displaying in English
What i expect :
What i actually have :
My power-calendar code :
{{#power-calendar-range locale="fr" class="small-calendar-cell-size" center=center selected=filterService.calendarFilter onCenterChange=(action (mut center) value="date") onSelect=(action (mut filterService.calendarFilter) value="date") as |calendar|}} {{calendar.nav}} {{calendar.days}} {{/power-calendar-range}}
That seems like a legitimate bug. What version of the calendar are you using?
Thanks for the quick reply ! I'm using the version 0.9.1. Though i'm wondering if the problem isn't from MomentJS. I'm looking into it and will come back once i know more :)
A found a work-around. Here are the steps :
-
I created an initializer
ember generate initializer moment-locale
-
I copied/pasted the code from moments' changing locale docs
Hope that helps.
Feel free to give me a feedback if there's a better way as i'm still learning Ember :)
I believe I introduced this bug in the 0.9 version. I'm travelling right now but I'm labelling this as a bug and I'll take care of it as soon as I'm back home.
Also, if what you want is all your calendars displaying in french, your approach is the right one. The local="fr"
property is intended to be used only if your generally want your dates to be in one locale but you want one specific calendar to be displayed on a different one, which is an uncommon requirement (to be honest, I only implemented the feature to be able to demo different locales it in the docs of the addon)
Yes, I want all my calendars to be in French, no need of other locales. Thanks for your feedback ! :)
@jillpouchain could you maybe share your fill initialiser locale file? I'm running into the same issue (afaik). If its possible @cibernox maybe add more info on how to add the translations for the dummies like me ;).
@svparijs if you use moment, something like this:
import moment from "moment";
export default {
initialize() {
moment.locale("fr");
}
}
if you use luxon, something like this:
import { Settings } from "luxon";
export default {
initialize() {
Settings.defaultLocale = "fr"
}
}
It doesn't need to be an initializer tho, it could be in the application route for instance, in case you want to load the current user first to check their locale preferences for instance.
Yeah I have this:
this.set('moment.locale', user.get('language'));
set currently, but for some reason it not loading the translations...
environment.js
:
moment: {
includeLocales: ['nl', 'fr']
}
@svparijs That config looks right to me. Maybe it's an issue with ember-cli-moment-shim
that ember-power-calendar-moment uses? I've been using luxon myself for the last year or so
Might be, I'm not sure... ember-cli-moment-shim is installed
... I'm on
"ember-moment": "^7.8.1",
"ember-cli-moment-shim": "^3.7.1",
@jillpouchain could you maybe share your fill initialiser locale file? I'm running into the same issue (afaik). If its possible @cibernox maybe add more info on how to add the translations for the dummies like me ;).
@svparijs : I changed project since and don't have acces to the files anymore. Sorry I can't help =/
I ran into this today with v0.4.1.
For those wanting to resolve this using the moment configuration option mentioned above, it appears that the correct way is to:
- Include the desired locales in the
environment.js
file as @svparijs describes here Note: You must restart your ember application for the locales to be loaded. - Configure the moment service, exposed by ember-moment. Note: This is different than using the import provided by ember-cli-moment-shim.
An example of configuring the moment service goes something like this:
import Service from '@ember/service';
import { inject as service } from '@ember/service'
export default Service.extend({
moment: service(),
changeLocale(locale) {
this.get('moment').setLocale(locale);
/* some other logic */
}
});