Plugin calendar - Customize captions errors with view (month

Rafał Seifert commented 10 months ago

Could you provide a sample code how you implement the calendar with custom options? HTML and component's class file.

axiame_studio pro premium priority commented 10 months ago

Thanks you for your response, please find below the html used:

<div class="col-12 col-lg-9 calendar-l-col">
        <mdb-calendar #calendar *ngIf="display" [class.loading-calendar]="loading" [defaultDate]="defaultDate" [defaultView]="defaultView" [events]="events" [options]="options" [readonly]="loading" (prev)="refreshEvents()" (next)="refreshEvents()" (today)="refreshEvents()" (viewChanged)="updateDefaultView()" (eventAdded)="postEvent($event, true)" (eventEdited)="postEvent($event, false)" (eventDeleted)="deleteEvent($event)"></mdb-calendar>
      </div>

To build the option we used the method:

private buildCalendarCaptions() {
this.options = {
  weekdays: [
    this.i18nLocal.labels.WEEKDAYS_SUNDAY,
    this.i18nLocal.labels.WEEKDAYS_MONDAY,
    this.i18nLocal.labels.WEEKDAYS_TUESDAY,
    this.i18nLocal.labels.WEEKDAYS_WEDNESDAY,
    this.i18nLocal.labels.WEEKDAYS_THURSDAY,
    this.i18nLocal.labels.WEEKDAYS_FRIDAY,
    this.i18nLocal.labels.WEEKDAYS_SATURDAY
  ],
  months: [
    this.i18nLocal.labels.MONTHS_JANUARY,
    this.i18nLocal.labels.MONTHS_FEBRUARY,
    this.i18nLocal.labels.MONTHS_MARCH,
    this.i18nLocal.labels.MONTHS_APRIL,
    this.i18nLocal.labels.MONTHS_MAY,
    this.i18nLocal.labels.MONTHS_JUNE,
    this.i18nLocal.labels.MONTHS_JULY,
    this.i18nLocal.labels.MONTHS_AUGUST,
    this.i18nLocal.labels.MONTHS_SEPTEMBER,
    this.i18nLocal.labels.MONTHS_OCTOBER,
    this.i18nLocal.labels.MONTHS_NOVEMBER,
    this.i18nLocal.labels.MONTHS_DECEMBER
  ],
  monthsShort: [
    this.i18nLocal.labels.MONTHS_SHORT_JANUARY,
    this.i18nLocal.labels.MONTHS_SHORT_FEBRUARY,
    this.i18nLocal.labels.MONTHS_SHORT_MARCH,
    this.i18nLocal.labels.MONTHS_SHORT_APRIL,
    this.i18nLocal.labels.MONTHS_SHORT_MAY,
    this.i18nLocal.labels.MONTHS_SHORT_JUNE,
    this.i18nLocal.labels.MONTHS_SHORT_JULY,
    this.i18nLocal.labels.MONTHS_SHORT_AUGUST,
    this.i18nLocal.labels.MONTHS_SHORT_SEPTEMBER,
    this.i18nLocal.labels.MONTHS_SHORT_OCTOBER,
    this.i18nLocal.labels.MONTHS_SHORT_NOVEMBER,
    this.i18nLocal.labels.MONTHS_SHORT_DECEMBER

  ],
  todayCaption: this.i18nLocal.labels.TODAY_CAPTION,
  monthCaption: this.i18nLocal.labels.MONTH_CAPTION,
  weekCaption: this.i18nLocal.labels.WEEK_CAPTION,
  listCaption: this.i18nLocal.labels.LIST_CAPTION,
  allDayCaption: this.i18nLocal.labels.ALL_DAY_CAPTION,
  noEventsCaption: this.i18nLocal.labels.NO_EVENTS_CAPTION,
  summaryCaption: this.i18nLocal.labels.SUMMARY_CAPTION,
  descriptionCaption: this.i18nLocal.labels.DESCRIPTION_CAPTION,
  startCaption: this.i18nLocal.labels.START_CAPTION,
  endCaption: this.i18nLocal.labels.END_CAPTION,
  addCaption: this.i18nLocal.labels.ADD_CAPTION,
  deleteCaption: this.i18nLocal.labels.DELETE_CAPTION,
  editCaption: this.i18nLocal.labels.EDIT_CAPTION,
  closeCaption: this.i18nLocal.labels.CLOSE_CAPTION,
  addEventModalCaption: this.i18nLocal.labels.ADD_EVENT_MODAL_CAPTION,
  editEventModalCaption: this.i18nLocal.labels.EDIT_EVENT_MODAL_CAPTION,
}

}

The reference this.i18nLocal.labels is used to store translated string. Let me know if you need more detailled.

Best regards Michel

Rafał Seifert commented 10 months ago

I am afraid it is a bug on our side. We will have to fix that. For now it's impossible to use different values for those options properties: monthCaption: 'month', weekCaption: 'week', listCaption: 'list',

We will add this problem to our todo list.

axiame_studio pro premium priority commented 10 months ago

Thanks you very much for your response. I will force the value on my side then.

Could you also consider adding a customizable caption for the button "add event"? That would be great as this plugin would then be fully multi language.