angular-6-calendar-week-hours-view
Version:
This project supports on Angular 6.0+. and aims to provide an alternative view to those already provided on [Angular Calendar](https://github.com/mattlewis92/angular-calendar) v0.25.2. based out of [Angular Calendar Week Hours View](https://github.com/Inn
86 lines (85 loc) • 2.78 kB
HTML
<div class="container">
<div class="row header">
<div class="col-md-12 text-center">
<h3>Angular calendar week hours view</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<div class="btn-group">
<div
class="btn btn-primary"
mwlCalendarPreviousView
[view]="view"
[(viewDate)]="viewDate">
Previous
</div>
<div
class="btn btn-outline-secondary"
mwlCalendarToday
[(viewDate)]="viewDate">
Today
</div>
<div
class="btn btn-primary"
mwlCalendarNextView
[view]="view"
[(viewDate)]="viewDate">
Next
</div>
</div>
</div>
<div class="col-md-4">
<h5>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h5>
</div>
<div class="col-md-4">
<div class="btn-group">
<div
class="btn btn-primary"
(click)="view = 'month'"
[class.active]="view === 'month'">
Month
</div>
<div
class="btn btn-primary"
(click)="view = 'week'"
[class.active]="view === 'week'">
Week
</div>
<div
class="btn btn-primary"
(click)="view = 'day'"
[class.active]="view === 'day'">
Day
</div>
</div>
</div>
</div>
<br>
<div [ngSwitch]="view">
<mwl-calendar-month-view
*ngSwitchCase="'month'"
[viewDate]="viewDate"
[events]="events"
[refresh]="refresh">
</mwl-calendar-month-view>
<iq-calendar-week-hours-view
*ngSwitchCase="'week'"
[viewDate]="viewDate"
[events]="events"
[hourSegments]="2"
[dayStartHour]="8"
[dayEndHour]="20"
(eventClicked)="eventClicked($event)"
(hourSegmentClicked)="hourSegmentClicked($event)"
(eventTimesChanged)="eventTimesChanged($event)"
[refresh]="refresh">
</iq-calendar-week-hours-view>
<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"
[events]="events"
[refresh]="refresh">
</mwl-calendar-day-view>
</div>
</div>