Closed akaushik79 closed 6 years ago
twinssbc
commented
7 years ago @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.
akaushik79
commented
7 years ago Here is the code which i am using: HTML File:
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'); } }
twinssbc
commented
7 years ago @akaushik79 Are you using Ionic-Calendar in Ionic2 project? Ionic-Calendar is only compatible for Ionic1 project. You need to use Ionic2-Calendar.
jarrettyew
commented
7 years ago 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?
HugoPetla
commented
7 years ago 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'. ("
twinssbc
commented
7 years ago @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.
HugoPetla
commented
7 years ago 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 --saveI've installed using npm install ionic2-calendar@0.3.x --save, but the error still persisting.
twinssbc
commented
7 years ago @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'
HugoPetla
commented
7 years ago 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.
jarrettyew
commented
7 years ago 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 {}
cooldp007
commented
6 years ago 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?
twinssbc
commented
6 years ago @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?
cooldp007
commented
6 years ago @twinssbc ,
calendar is not showed due to scroll
so now i add scroll in my page and my problem is solved
ibhu1005
commented
6 years ago 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:)
twinssbc
commented
6 years ago @ibhu1005 Could you also paste your HTML code? Did you get any error? Basically in your success callback, you need to transform the data to the format that calendar could recognize, then assign it to the event array.
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'. ("