Angular-calendar: Missing locale data for the locale

Created on 9 Jan 2018  路  10Comments  路  Source: mattlewis92/angular-calendar

  • [x] Bug report
  • [ ] Feature request
  • [ ] Support request

Bug description

When I use latest version ^0.23.1 and using different locale then en then I get error, but with version ^0.22.2 it is working fine

  • Missing locale data for the locale fr
  • Monthly view is not working

Minimal reproduction of the problem with instructions

<mwl-calendar-month-view *ngSwitchCase="'month'" [locale]="fr" [viewDate]="viewDate" [events]="events" [refresh]="refresh"
        [activeDayIsOpen]="activeDayIsOpen" (dayClicked)="dayClicked($event.day)" (eventClicked)="handleEvent('Clicked', $event.event)"
        [weekStartsOn]="weekStartsOn" [weekendDays]="weekendDays" [cellTemplate]="customCellTemplate">

    </mwl-calendar-month-view>
    <mwl-calendar-week-view *ngSwitchCase="'week'" [locale]="fr" [viewDate]="viewDate" [events]="events" [refresh]="refresh"
        (eventClicked)="handleEvent('Clicked', $event.event)" [weekStartsOn]="weekStartsOn"
        [weekendDays]="weekendDays">
    </mwl-calendar-week-view>

Versions

Angular: 5.1.3

Calendar library: 0.23.1

Browser name and version: chrome 63.0.3239.84

Most helpful comment

You need to register the hebrew locale data in module.ts (like for the other languages):

import localeHe from '@angular/common/locales/he';
registerLocaleData(localeHe);

https://stackblitz.com/edit/angular-6su8pq-uxnpeg?file=demo/module.ts

All 10 comments

Can reproduce this
ive got the same Error with other languages than en

I've added a note to the changelog with how to handle this, please see the i18n demo for an e2e example: https://mattlewis92.github.io/angular-calendar/#/i18n Hope that helps! 馃槃

hello please i want to develop a backend to the angular calendar the problem : my data from database mysql and im using rest API the data is on json form i dont know how it can be solved any solution please!!

capture

@mattlewis92
First thank you your work is amazing

Second- I tried to make calendar in Hebrew
I had tried to set he but without success...

https://stackblitz.com/edit/angular-6su8pq-tfqsqw?file=demo/component.ts

You need to register the hebrew locale data in module.ts (like for the other languages):

import localeHe from '@angular/common/locales/he';
registerLocaleData(localeHe);

https://stackblitz.com/edit/angular-6su8pq-uxnpeg?file=demo/module.ts

@mattlewis92 thanks so much

@mattlewis92 I have tried to restyle the event and to set some text on in it the only way I found is to use javascript

this.matches = document.querySelectorAll("mwl-calendar-month-cell .cal-event");
.
.
.
this.matches[i].innerText = "some text from events property";

Do there is another way to do that (as some attribute)??

You can use a custom template for the month cell to change the html.

@mattlewis92 This is cell template I want text on event
(I restyle the circle event as in image with css and now I want to add text from the data of the event)

image

(I did it with javascript but I look for nicer way)

Thank you

Was this page helpful?
0 / 5 - 0 ratings