Missing functions

[wallaceiam]

Hi,

I'm trying to get the demo code to work in my own project but am running into a few missing functions which can't seem to determine what I'm missing

packages.json has:
"angular2-calendar": "0.3.2",
"calendar-utils": "0.0.30",
"date-fns": "^1.3.0",
"@types/date-fns": "0.0.2"

For Month view:
index.js:15070 TypeError: Cannot read property 'rowOffsets' of undefined
at AppView._View_CalendarMonthViewComponent0.detectChangesInternal (CalendarMonthViewComponent.ngfactory.js:80)
at AppView.detectChanges (index.js:21168)
at AppView.detectViewChildrenChanges (index.js:21194)
at AppView._View_Schedule2.detectChangesInternal (Schedule.ngfactory.js:488)
...

For Week View:
index.js:15070 TypeError: start_of_week_1.default is not a function
at Object.exports.getWeekViewHeader (index.js:76032)
at CalendarWeekViewComponent.refreshHeader (index.js:75084)
at CalendarWeekViewComponent.ngOnChanges (index.js:75072)
at AppView._View_Schedule2.detectChangesInternal (Schedule.ngfactory.js:461)
...

For Day View:
index.js:15070TypeError: Cannot read property 'allDayEvents' of undefined
at AppView._View_CalendarDayViewComponent0.detectChangesInternal (CalendarDayViewComponent.ngfactory.js:79)
at AppView.detectChanges (index.js:21168)
at AppView.detectViewChildrenChanges (index.js:21194)
at AppView._View_Schedule4.detectChangesInternal (Schedule.ngfactory.js:620)
...

Any help would be greatly appreciated!

Thanks

[mattlewis92]

What version of angular / this library are you using? What build tool (system, webpack, rollup etc)

On 6 Oct 2016, at 21:47, wallaceiam [email protected] wrote:

Hi,

I'm trying to get the demo code to work in my own project but am running into a few missing functions which can't seem to determine what I'm missing

packages.json has:
"angular2-calendar": "0.3.2",
"calendar-utils": "0.0.30",
"date-fns": "^1.3.0",
"@types/date-fns": "0.0.2"

For Month view:
index.js:15070 TypeError: Cannot read property 'rowOffsets' of undefined
at AppView._View_CalendarMonthViewComponent0.detectChangesInternal (CalendarMonthViewComponent.ngfactory.js:80)
at AppView.detectChanges (index.js:21168)
at AppView.detectViewChildrenChanges (index.js:21194)
at AppView._View_Schedule2.detectChangesInternal (Schedule.ngfactory.js:488)
...

For Week View:
index.js:15070 TypeError: start_of_week_1.default is not a function
at Object.exports.getWeekViewHeader (index.js:76032)
at CalendarWeekViewComponent.refreshHeader (index.js:75084)
at CalendarWeekViewComponent.ngOnChanges (index.js:75072)
at AppView._View_Schedule2.detectChangesInternal (Schedule.ngfactory.js:461)
...

For Day View:
index.js:15070TypeError: Cannot read property 'allDayEvents' of undefined
at AppView._View_CalendarDayViewComponent0.detectChangesInternal (CalendarDayViewComponent.ngfactory.js:79)
at AppView.detectChanges (index.js:21168)
at AppView.detectViewChildrenChanges (index.js:21194)
at AppView._View_Schedule4.detectChangesInternal (Schedule.ngfactory.js:620)
...

Any help would be greatly appreciated!

Thanks

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[wallaceiam]

Thanks for the quick reply

angular 2.0.0/angular2-calendar 0.3.2 and webpack from https://github.com/angular/universal-starter

"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/platform-server": "2.0.0",
"@angular/router": "3.0.0",
"angular2-platform-node": "~2.0.11",
"angular2-universal": "~2.0.11",
"angular2-universal-polyfills": "~2.0.11",

[mattlewis92]

That's odd, I'm using webpack2 in my project as well and not had any problems using this lib. I will try and integrate it into the universal started tomorrow and see what's going on.

On 6 Oct 2016, at 21:54, wallaceiam [email protected] wrote:

Thanks for the quick reply

angular 2.0.0/angular2-calendar 0.3.2 and webpack from https://github.com/angular/universal-starter

"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/platform-server": "2.0.0",
"@angular/router": "3.0.0",
"angular2-platform-node": "~2.0.11",
"angular2-universal": "~2.0.11",
"angular2-universal-polyfills": "~2.0.11",

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[wallaceiam]

Cheers Matt,

Like I said, I think I'm just missing a reference to something but can't seem to figure out what! :-/

[mattlewis92]

Ah figured out what the problem was, you need to pass in the required attributes viewDate and events

Putting this in your controller should work, assuming you're using the demo source

viewDate = new Date();
events = [];

[wallaceiam]

Nope still doesn't seem to work; including my component for reference (taken pretty much from the demo component):

import { Component } from '@angular/core';
import { startOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addWeeks, subWeeks, addMonths, subMonths} from 'date-fns';

import { CalendarEvent, CalendarEventAction } from 'angular2-calendar'

const colors: any = {
    red: {
        primary: '#ad2121',
        secondary: '#FAE3E3'
    },
    blue: {
        primary: '#1e90ff',
        secondary: '#D1E8FF'
    },
    yellow: {
        primary: '#e3bc08',
        secondary: '#FDF1BA'
    }
};

@Component({
    selector: 'schedule',
    template: require('./schedule.html'),
    styles: [`
    h3 {
      margin: 0;
    }
    .container {
      padding-bottom: 50px;
    }
  `]
})
export class Schedule {

    constructor() { }

    view: string = 'day';

     viewDate: Date = new Date();

    actions: CalendarEventAction[] = [{
            label: '<i class="fa fa-fw fa-pencil"></i>',
            onClick: ({event}: { event: CalendarEvent }): void => {
                console.log('Edit event', event);
            }
        }, {
            label: '<i class="fa fa-fw fa-times"></i>',
            onClick: ({event}: { event: CalendarEvent }): void => {
                this.events = this.events.filter(iEvent => iEvent !== event);
            }
        }];

    events: CalendarEvent[] = [{
            start: subDays(startOfDay(new Date()), 1),
            end: addDays(new Date(), 1),
            title: 'A 3 day event',
            color: colors.red,
            actions: this.actions
        }, {
            start: startOfDay(new Date()),
            title: 'An event with no end date',
            color: colors.yellow,
            actions: this.actions
        }, {
            start: subDays(endOfMonth(new Date()), 3),
            end: addDays(endOfMonth(new Date()), 3),
            title: 'A long event that spans 2 months',
            color: colors.blue
        }];

    activeDayIsOpen: boolean = true;

    increment(): void {

        const addFn: any = {
            day: addDays,
            week: addWeeks,
            month: addMonths
        }[this.view];

        this.viewDate = addFn(this.viewDate, 1);

    }

    decrement(): void {

        const subFn: any = {
            day: subDays,
            week: subWeeks,
            month: subMonths
        }[this.view];

        this.viewDate = subFn(this.viewDate, 1);

    }

    today(): void {
        this.viewDate = new Date();
    }

    dayClicked({date, events}: { date: Date, events: CalendarEvent[] }): void {

        if (isSameMonth(date, this.viewDate)) {
            if (
                (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
                events.length === 0
            ) {
                this.activeDayIsOpen = false;
            } else {
                this.activeDayIsOpen = true;
                this.viewDate = date;
            }
        }
    }
}`

and schedule.html:

<div class="row text-center">
                                <div class="col-md-4">
                                    <div class="btn-group">
                                        <div class="btn btn-primary" (click)="decrement()">
                                            Previous
                                        </div>
                                        <div class="btn btn-default" (click)="today()">
                                            Today
                                        </div>
                                        <div class="btn btn-primary" (click)="increment()">
                                            Next
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
                                </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" [activeDayIsOpen]="activeDayIsOpen"
                                    (dayClicked)="dayClicked($event.day)">
                                </mwl-calendar-month-view>
                                <mwl-calendar-week-view *ngSwitchCase="'week'" [viewDate]="viewDate" [events]="events">
                                </mwl-calendar-week-view>
                                <mwl-calendar-day-view *ngSwitchCase="'day'" [viewDate]="viewDate" [events]="events">
                                </mwl-calendar-day-view>
                            </div>
                        </div>

[mattlewis92]

If you put {{ viewDate }} and {{ events }} in your template does it display both items?

[wallaceiam]

yup
Events: [object Object],[object Object],[object Object]
View Date: Fri Oct 07 2016 12:57:53 GMT+0100 (GMT Daylight Time)

[mattlewis92]

@wallaceiam please try updating to 0.3.3, there was a bug with the UMD build which should now be fixed 😄

[wallaceiam]

Updated to 0.3.3 and boom started working. Thanks Matt!

[mattlewis92]

Great to hear! 😄

[SanjuSandy]

Hi,
I am trying week calendar but it not supporting cell Template or Event Template.Send if there is any source code for week calendar. I am using angular 4. Please help to complete this module...
thanks.