question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

calendarDate not taking into account weekStartsOn in week view

See original GitHub issue

Describe the bug

In my project week starts on monday, when switching to week view I can see current week (monday 18.3.2019 through sunday 24.3.2019) but date shown in the header shows march 17th - march 23rd.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-awmwgk

Screenshots

calendar

Versions

  • @angular/core: 6.1.4
  • angular-calendar: 0.26.4 (bug tested on demo stackblitz of kitchensink)
  • Browser name and version: Google Chrome 72.0.3626.121

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
DelRioOscarcommented, May 13, 2019

@mattlewis92 I have a problem with weekStartsOn… Can be a bug calendar.

this is my code.

HTML

<div [ngSwitch]="view">
    <mwl-calendar-month-view *ngSwitchCase="'month'" [viewDate]="viewDate" [events]="events"
       [activeDayIsOpen]="activeDayIsOpen" (dayClicked)="dayClicked($event.day)"
      (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)">
    </mwl-calendar-month-view>

    <mwl-calendar-week-view *ngSwitchCase="'week'" [viewDate]="viewDate" [events]="events"
    [weekStartsOn]="weekStartsOn"
    [weekendDays]="weekendDays" (eventClicked)="handleEvent('Clicked', $event.event)"
      (eventTimesChanged)="eventTimesChanged($event)">
    </mwl-calendar-week-view>

    <mwl-calendar-day-view *ngSwitchCase="'day'" [viewDate]="viewDate" [events]="events"
       (eventClicked)="handleEvent('Clicked', $event.event)"
      (eventTimesChanged)="eventTimesChanged($event)">
    </mwl-calendar-day-view>

  </div>

TS: weekStartsOn: number = DAYS_OF_WEEK.MONDAY; weekendDays: number[] = [DAYS_OF_WEEK.FRIDAY, DAYS_OF_WEEK.SATURDAY];

When i set this: <div class="col-md-4">

{{ viewDate | calendarDate:(view + ‘ViewTitle’):‘en’:weekStartsOn }}

</div>

there is not any change 😦

1reaction
milos-popadiccommented, Mar 20, 2019

Thanks a lot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CalendarDatePipe - angular-calendar documentation
where `viewDate` is a `Date` and view is `'month' | 'week' | 'day'` {{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}.
Read more >
Angular 4.0 Calendar - Show time in week view
The app allows user to switch between the month, week and day view. The week view however shows only the dates in that...
Read more >
angular-calendar | Yarn - Package Manager
A calendar component for angular 15.0+ that can display events on a month, week or day view. angular, angular2, calendar, schematics ...
Read more >
Building a Calendar for Ionic With Angular Calendar & ...
This Calendar for Angular is using the quite popular FullCalendar, ... We also want to achieve a special weekly view (which is actually...
Read more >
react-date-range
A React component for choosing dates and date ranges.. Latest version: 1.4.0, last published: a year ago. Start using react-date-range in ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found