Schedule

UI Components for Angular
Post Reply
Canoh
Posts: 5
Joined: 22 Apr 2016, 10:56

09 May 2016, 15:33

Hi,
I have been working with the Schedule component, and I am experience issues when trying to add events to my Schedule. When I property bind to the events property of Schedule, I get an error and the Schedule does not render. However, if the array is left empty the calendar renders just fine. Below, I have included my components code aswell as my index.html head.

Error in question:
TypeError: Cannot read property 'fullCalendar' of undefined in [events in HomeComponent@4:28]

home.component

Code: Select all

import {Component} from 'angular2/core';
import {Schedule} from 'primeng/primeng';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
    selector: 'home',
    template: `
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <p-schedule [events]="events"></p-schedule>
            </div>
        </div>
    </div>
`,
    directives: [Schedule, ROUTER_DIRECTIVES]
})
export class HomeComponent{
     events: any[];

     ngOnInit(){
     this.events = [
            {
                title: "Long Event",
                start: "2016-04-04",
                end: "2016-04-04"
            }
        ];
     }
}

Code: Select all

<html>

  <head>
    <title>PlanAhead</title>
    <!--<link rel="stylesheet" href="styles.css">-->
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/bootstrap/theme.css" />
    <link rel="stylesheet" type="text/css" href="node_modules/fullcalendar/dist/fullcalendar.min.css" />
    <link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
    <link rel="stylesheet" type="text/css" href="app/css/own.css"/>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>



    <!-- PRIME NG -->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/primeui/primeui-ng-all.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="node_modules/moment/moment.js"></script>
    <script src="node_modules/fullcalendar/dist/fullcalendar.js"></script>


    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            defaultJSExtensions: true,
            packages: {
                'app': {
                    "format": 'register',
                    "defaultExtension": 'js'}
            },
            map: {
                'angular2': 'node_modules/angular2',
                'primeng': 'node_modules/primeng'
            }
        });
        System.import('app/boot').then(null, console.error.bind(console));
    </script>

    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

<script>
    $(document).ready(function(){
        $('#calendar').fullCalendar({})
    });
</script>

 </head>
Could this error be due to missing type definitions files for fullCalendar, jquery, and moment?

Canoh
Posts: 5
Joined: 22 Apr 2016, 10:56

10 May 2016, 11:01

I understand my problem clearly now, and as I initially suspected, the error is due to not resolving my fullcalendar dependency correctly. Do I need to get the type definitions files for jquery, moment, and fullcalendar and reference them in my component to resolve the dependency correctly?

joe.vella@divium.com
Posts: 2
Joined: 27 Apr 2016, 18:24
Location: USA
Contact:

06 Jun 2016, 04:36

I think I am having similar issue with Schedule when I bind events to it. Please see error below.

This started when I switched to angular-cli. In a previous project my code works just fine. Also, in the non angular-cli version, I do not load jquery and everything Prime works beautifully. With angular-cli I received errors regarding jquery being missing. So now I am loading jquery via index.html. Please note: It is entirely possible I am using angular-cli incorrectly. I am new to it.

Any advice is greatly appreciated.

Thank you!

browser_adapter.ts:78 TypeError: Cannot read property 'clone' of null
at g (fullcalendar.js:6)
at f (fullcalendar.js:6)
at e (fullcalendar.js:6)
at r (fullcalendar.js:6)
at n [as refetchEvents] (fullcalendar.js:6)
at HTMLDivElement.<anonymous> (fullcalendar.js:6)
at Function.n.extend.each (jquery.min.js:2)
at n.fn.n.each (jquery.min.js:2)
at a.fn.fullCalendar (fullcalendar.js:6)
at Schedule.ngDoCheck (schedule.ts:240)BrowserDomAdapter.logError @ browser_adapter.ts:78ExceptionHandler.call @ exception_handler.ts:70(anonymous function) @ application_ref.ts:304schedulerFn @ async.ts:131SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:117NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.ts:138NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.ts:90ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
Joe Vella

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests