Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Plugin calendar - Customize captions errors with view (month/week/list)

axiame_studio priority asked 11 months ago

Expected behavior When I use the custom caption as given in the example. I should be able to swtich the view to get the list of event per week/month/list

Actual behavior The value in the list is set to empty by default and if i choose one of the view, then the calendar is empty. My guess is that you use the label provided in monthCaption, weekCaption and listCaption as the key for the option in the select.

Resources (screenshots, code snippets etc.) enter image description here

enter image description here

Rafał Seifert free commented 11 months ago

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

axiame_studio priority commented 11 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 free commented 11 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 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.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 6.0.0
  • Device: Computer
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No
Tags
mdb-calendar
About author
axiame_studio
0Support score
4Questions 2Answers 1Snippets