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

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)

[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.