Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

angular-6-calendar-week-hours-view

jconc02651MIT1.1.0TypeScript support: included

This project supports on Angular 6.0+. and aims to provide an alternative view to those already provided on Angular Calendar v0.25.2. based out of [Angular Calendar Week Hours View](https://github.com/Inn

angular-calendar, week, week view, week hours, week schedule

readme

Angular6CalendarWeekHoursView

This project supports on Angular 6.0+. and aims to provide an alternative view to those already provided on Angular Calendar v0.25.2. based out of Angular Calendar Week Hours View v1.0.2. It probably won't receive much support from me (@jorgeconcep) or (@diegofsza) owner of the starting solution which provides support to users of earlier versions of Angular (prior to 6), so you're encouraged to enhance it in any reasonable way and send pull requests.

How it looks

Imgur

Getting Started

  • Have Installed and working Angular Calendar v0.25.2 (or prior) in Angular 6.0+.
  • Install the packages npm install --save angular-6-calendar-week-hour-view rxjs-compat.
  • Implement the function hourSegmentClicked().
  • Include the scss file in your styles:[] array in the angular.json file
    "../node_modules/angular-calendar-week-hours-view/angular-calendar-week-hours-view.scss" `

    Usage

Import the module wherever you want to use the view:

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...,
        CalendarModule.forRoot(),
        CalendarWeekHoursViewModule,
        ...
    ],   
})

Use the view in your html

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