Can the format of "formatWeekViewDayHeader" be changed programmatically?

[MattCampus21]

Hi, thanks for this great Component!

I need to change the format of the WeekViewDayHeader from displaying "day of week" and "day of month", to "day of week" only when pushing certain new events to the eventSource. Is this possible? Keep up the great work!

  calendar = {
    mode: 'week' as CalendarMode,
    step: 30 as Step,
    locale: 'en-GB',
    allDayLabel: '',
    currentDate: new Date(),
    startingDayWeek: 1,
    scrollToHour: 0,
    dateFormatter: {
    ...
      formatWeekViewDayHeader: function (date: Date) {
        return 'MonWH';
    },
    ...
  };

[twinssbc]

@MattCampus21 there's some way. For example, I let formatWeekDayHeader function uses a field called dayMonth. (I use me instead of this is for getting the scope right).

  constructor() {
    this.dayMonth = false;
    let me = this;
    this.calendar.dateFormatter.formatWeekViewDayHeader =  function(date: Date) {
        if(me.dayMonth) {
            return 'Mon';
          } else {
              return 'Week';
          }
      }    
  }

Then in some other method, I set this dayMonth to true. Here I set the currentDate again is because I need to trigger the calendar to refresh the view so that it could use the new formatter.

  loadEvents() {
    this.eventSource = this.createRandomEvents();
    this.dayMonth = true;
    this.calendar.currentDate = new Date();
  }

[MattCampus21]

@twinssbc Thanks for the fast reply and your great Component. Its a smart solution. Sadly this doesnt work for me. The function is called but it only has effect at first component load not when I reloadSource or set currentDate or anything. I also have a similar issue with markDisabled which doesnt work for me as in the docs or discussion. I had to link it up like this to get it to trigger (looks strange but triggers): <calendar> ... [formatWeekViewDayHeader]="calendar.dateFormatter.formatWeekViewDayHeader()" ... </calendar> Any Idea whats going wrong here?

[twinssbc]

@MattCampus21 The date formatter and the markDisabled is only called when the whole view is created. The view is only created when doing some date range switch, for example, swiping to next month, change from month view to week view, change current date, etc. When the event source is loaded, the calendar doesn't recreate the view, simply place the event to the corresponding slot. I'm not quite sure why set current date doesn't work in your case.

[MattCampus21]

@twinssbc Thanks for your insight. Iam using different remote functions, where I push events to the eventSource (or reassign). I then finish this off with this.myCalendar.loadEvents(); shouldn't this recreate the component? Would reassigning "...currentDate = new Date()" recreate or is there some != check involved? Can you point me to an advanced implementation of the component on github? Any help would be appreciated.

[MattCampus21]

@twinssbc I realized I was not up to date and updated to the v1*** version. It now sometimes (a few interactions in) triggers, but It nomore interprets the strings, it renders EEE or EEE d. Also for some reason weekViewTitle which I change the same way as weekViewDayHeader, seems to "rerender" more accurate. I red in the docs something about the swiper caching 3 slides, could this be an issue here? Any help or thoughts would be appreciated.

[twinssbc]

@MattCampus21 changing the eventSource won't recreate the view. The view is only recreated when date range change. The calendar always maintains 3 slides (prev date range, current, and next date range), that's the probably the reason, when you do two more swipes, the slides get refreshed. But I do tested setting current date, it should refresh the view.

If you are interested in the implementation details, this refreshView function will recreate the view. Any event triggers refreshView will work. https://github.com/twinssbc/Ionic2-Calendar/blob/v7-swiper/src/weekview.ts#L1120

[MattCampus21]

@twinssbc Thanks for your help. It now works. The Issue with using [formatWeekViewDayHeader] might have happened because the used datePipe.transform() in the component is mentioned as "is executed only when it detects a pure change to the input value."