Angular-calendar: Wrong week date range in calendar header when using week start as middle day of week

[tvbishan]

Describe the bug

I am using below code to show week date range in week view header.

  <div class="col-md-4 text-center">
    <h3>{{ viewDate | calendarDate: view + 'ViewTitle':locale }}</h3>
  </div>

I have configured week view as below.

<mwl-calendar-week-view [hourSegments]="2" [weekStartsOn]="4" [viewDate]="viewDate"
    [events]="events" [dayStartHour]="6" [dayEndHour]="18">
</mwl-calendar-week-view>

Week start is Thursday and end is Wednesday. Week view calendar show the correct week start and end dates. But header component shows wrong date range for week.

Week range should be Jul 18 - Jul 24, 2019. But, as in the below image it displays as Jul 21 - Jul 27, 2019

How can I fix this?

Minimal reproduction of the problem with instructions

Here is the Stackblitz

Screenshots

Versions

• @angular/core: 6.1.7
• angular-calendar: 0.27.14
• Browser name and version: Google Chrome Version 75.0.3770.142 (Official Build) (64-bit)

[matts-bot[bot]]

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider supporting me on Patreon

[JaxonWright]

It would be helpful if you could make a Stackblitz reproducing the issue. You can do so by starting with any of the demo pages, modifying it, and then saving a fork on Stackblitz

[tvbishan]

@JaxonWright Here is the Stackblitz

[JaxonWright]

The issue is probably somewhere in the getWeekViewPeriod method seen here. I don't know exactly where, though. Will probably look into it more later. Thoughts @mattlewis92 ?

[mattlewis92]

You need to pass the weekStartsOn as an argument to the calendarDate pipe, so that it knows about it:

<h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en':4 }}</h3>

I'll update the docs to make this more clear as it's come up a few times now and it's quite confusing.

[tvbishan]

Thanks for the update. With this modification, now show the correct week date range in the header.

[mattlewis92]

Awesome! Gonna leave this open for now as a reminder to myself to update the docs.