Can't bind to 'eventSource' since it isn't a known property of 'calendar'. ("
Closed this issue · 17 comments
Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.10.2
Xcode version: Not installed
This calendar looks great however when i try to use it in my app then it shows above error. Below are the more details on error:
Unhandled Promise rejection: Template parse errors:
Can't bind to 'eventSource' since it isn't a known property of 'calendar'. ("
I want to fetch the data from Firebase. Would be great if you can share some code snippet to achieve the same.
@akaushik79 Could you provide your snippet that using this calendar? For example, how do you declare the calendar element in HTML and how do you set the binding variable in the controller?
It doesn't matter the data is coming from which source, the calendar only cares if eventSource is changed or not.
Here is the code which i am using:
HTML File:
{{viewTitle}}
<button ion-button [disabled]="isToday" (click)="today()">Today
<button ion-button (click)="changeMode('month')">M
<button ion-button (click)="changeMode('week')">W
<button ion-button (click)="changeMode('day')">D
<button ion-button (click)="loadEvents()">Load Events
<calendar [eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)"
(onRangeChanged)="reloadSource(startTime, endTime)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
step="30">
TS File:
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
/*
Generated class for the Attendance page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@component({
selector: 'page-attendance',
templateUrl: 'attendance.html'
})
export class AttendancePage {
eventSource;
viewTitle;
isToday: boolean;
calendar = {
mode: 'month',
currentDate: new Date()
}; // these are the variable used by the calendar.
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
loadEvents() {
this.eventSource = this.createRandomEvents();
}
onViewTitleChanged(title) {
this.viewTitle = title;
}
onEventSelected(event) {
console.log('Event selected:' + event.startTime + '-' + event.endTime + ',' + event.title);
}
changeMode(mode) {
this.calendar.mode = mode;
}
today() {
this.calendar.currentDate = new Date();
}
onTimeSelected(ev) {
console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' +
(ev.events !== undefined && ev.events.length !== 0) + ', disabled: ' + ev.disabled);
}
onCurrentDateChanged(event:Date) {
var today = new Date();
today.setHours(0, 0, 0, 0);
event.setHours(0, 0, 0, 0);
this.isToday = today.getTime() === event.getTime();
}
createRandomEvents() {
var events = [];
for (var i = 0; i < 50; i += 1) {
var date = new Date();
var eventType = Math.floor(Math.random() * 2);
var startDay = Math.floor(Math.random() * 90) - 45;
var endDay = Math.floor(Math.random() * 2) + startDay;
var startTime;
var endTime;
if (eventType === 0) {
startTime = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + startDay));
if (endDay === startDay) {
endDay += 1;
}
endTime = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + endDay));
events.push({
title: 'All Day - ' + i,
startTime: startTime,
endTime: endTime,
allDay: true
});
} else {
var startMinute = Math.floor(Math.random() * 24 * 60);
var endMinute = Math.floor(Math.random() * 180) + startMinute;
startTime = new Date(date.getFullYear(), date.getMonth(), date.getDate() + startDay, 0, date.getMinutes() + startMinute);
endTime = new Date(date.getFullYear(), date.getMonth(), date.getDate() + endDay, 0, date.getMinutes() + endMinute);
events.push({
title: 'Event - ' + i,
startTime: startTime,
endTime: endTime,
allDay: false
});
}
}
return events;
}
onRangeChanged(ev) {
console.log('range changed: startTime: ' + ev.startTime + ', endTime: ' + ev.endTime);
}
markDisabled = (date:Date) => {
var current = new Date();
current.setHours(0, 0, 0);
return date < current;
}
ionViewDidLoad() {
console.log('ionViewDidLoad AttendancePage');
}
}
@akaushik79 Are you using Ionic-Calendar in Ionic2 project? Ionic-Calendar is only compatible for Ionic1 project. You need to use Ionic2-Calendar.
I had a similar issue with @akaushik79 with lazy loading (Ionic 3) around ion-tab to load the page. I was able to load to page by importing the page manual. Not sure about the real reason, but it should lie in the loading sequence between the app and the calendar module. Maybe this issue should be transferred to Ionic 2 issue instead?
Same problem using Ionic 3.
`Unhandled Promise rejection: Template parse errors:
Can't bind to 'eventSource' since it isn't a known property of 'calendar'. ("
@yewness @HugoPetla Are you trying to use this Ionic-Calendar component in Ionic3 project?
There's a separate Ionic2-Calendar component which is compatible with Ionic3.
You should use that project.
Yes, I'm trying to do this. How can I install the correct version of the Ionic2-Calendar component wich is compatible with Ionic3, @twinssbc? Can you help me? Thx again for your support. I did the installation like this, following Ionic 2 - calendar tutorial
npm install -g typings
npm install --save intl
npm install ionic2-calendar --save
I've installed using npm install ionic2-calendar@0.3.x --save, but the error still persisting.
@HugoPetla Could you show me your html and ts code that is using the calendar?
According to the error, it says some property is missing on the calendar variable.
Did you define these properties in calendar variable?
Can't bind to 'eventSource' since it isn't a known property of 'calendar'.
Can't bind to 'calendarMode' since it isn't a known property of 'calendar'
My html
<ion-header>
<ion-navbar color="primary">
<ion-title>{{viewTitle}}</ion-title>
<ion-buttons end>
<button ion-button [disabled]="isToday" (click)="today()">Today</button>
<button ion-button (click)="changeMode('month')">M</button>
<button ion-button (click)="changeMode('week')">W</button>
<button ion-button (click)="changeMode('day')">D</button>
<button ion-button (click)="loadEvents()">Load Events</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="has-header">
<calendar [eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
step="30">
</calendar>
</ion-content>
My .ts
eventSource;
viewTitle;
isToday: boolean;
calendar = {
mode: 'month',
currentDate: new Date()
}; // these are the variable used by the calendar.
loadEvents() {
this.eventSource = this.createRandomEvents();
}
onViewTitleChanged(title) {
this.viewTitle = title;
}
onEventSelected(event) {
console.log('Event selected:' + event.startTime + '-' + event.endTime + ',' + event.title);
}
changeMode(mode) {
this.calendar.mode = mode;
}
today() {
this.calendar.currentDate = new Date();
}
onTimeSelected(ev) {
console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' +
(ev.events !== undefined && ev.events.length !== 0) + ', disabled: ' + ev.disabled);
}
onCurrentDateChanged(event:Date) {
var today = new Date();
today.setHours(0, 0, 0, 0);
event.setHours(0, 0, 0, 0);
this.isToday = today.getTime() === event.getTime();
}
createRandomEvents() {
var events = [];
for (var i = 0; i < 50; i += 1) {
var date = new Date();
var eventType = Math.floor(Math.random() * 2);
var startDay = Math.floor(Math.random() * 90) - 45;
var endDay = Math.floor(Math.random() * 2) + startDay;
var startTime;
var endTime;
if (eventType === 0) {
startTime = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + startDay));
if (endDay === startDay) {
endDay += 1;
}
endTime = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + endDay));
events.push({
title: 'All Day - ' + i,
startTime: startTime,
endTime: endTime,
allDay: true
});
} else {
var startMinute = Math.floor(Math.random() * 24 * 60);
var endMinute = Math.floor(Math.random() * 180) + startMinute;
startTime = new Date(date.getFullYear(), date.getMonth(), date.getDate() + startDay, 0, date.getMinutes() + startMinute);
endTime = new Date(date.getFullYear(), date.getMonth(), date.getDate() + endDay, 0, date.getMinutes() + endMinute);
events.push({
title: 'Event - ' + i,
startTime: startTime,
endTime: endTime,
allDay: false
});
}
}
return events;
}
onRangeChanged(ev) {
console.log('range changed: startTime: ' + ev.startTime + ', endTime: ' + ev.endTime);
}
markDisabled = (date:Date) => {
var current = new Date();
current.setHours(0, 0, 0);
return date < current;
};
@HugoPetla How do you import the calendar component in your app.module.ts?
Which Ionic3 version are you using?
I suggest you start a clean Ionic project using the ionic cli, instead of directly upgrading from Ionic2 project.
I think you have answered in the last comment of #110.
For Lazy loading in calendar, you need to add calendar module in page.module as calendar is not understood when the page is lazy loaded.
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CalendarPage } from './calendar';
import { NgCalendarModule } from 'ionic2-calendar';
@NgModule({
declarations: [
CalendarPage,
],
imports: [
NgCalendarModule,
IonicPageModule.forChild(CalendarPage),
],
exports: [
CalendarPage
]
})
export class CalendarPageModule {}
Hello, @twinssbc
I followed your github code
awesum document you made
now my query is i saw my page blank
how to show calendar in my page?
@cooldp007 Could you check if there's any error message printed out in the console? If there's no error message, maybe use the Developer tool to check the DOM elements see if it's hidden because of the wrong height or margin, etc.
Also once you identify the real problem, could you create a separate issue instead of leave comment in irrelevant issue?
calendar is not showed due to scroll
so now i add scroll in my page and my problem is solved
How to http parameter date in this function createRandomEvents change to $http.get('http://ccaagg.com/admin/events_api.php')
.success(function (data){
$scope.events = data;
for (var i = 0; i < $scope.events.length; i++) {
var data= $scope.events[i];
console.log(data.d);
data.d = new Date(data.d);
}
Plz Help:)