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>