Tengo el siguiente código en un componente llamado tab2.page.ts. Este código hace referencia a un calendario donde puedo hacer un CRUD de Eventos, el cual funciona todo como se quiere.
import { Component, ViewChild, OnInit, Inject, LOCALE_ID } from '@angular/core';
import { CalendarComponent } from "ionic2-calendar/calendar";
import { LoadingController } from '@ionic/angular';
import { formatDate } from '@angular/common';
import { AlertController, PopoverController, MenuController } from '@ionic/angular';
import { Tab2PopoverComponent } from '../tab2-popover/tab2-popover.component';
import { UserService } from '../servicios/user.service';
import { User } from 'firebase';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
event = {
title: '',
desc: '',
startTime: '',
endTime: '',
allDay: false
};
minDate = new Date().toISOString();
eventSource = [];
calendar = {
mode: 'week',
currentDate: new Date()
}
viewTittle = '';
@ViewChild(CalendarComponent) myCal: CalendarComponent;
constructor(private loadingCtrl: LoadingController, private alertCtrl: AlertController, @Inject(LOCALE_ID) private locale: string,) { }
resetEvent() {
this.event = {
title: '',
desc: '',
startTime: new Date().toISOString(),
endTime: new Date().toISOString(),
allDay: false
};
}
//Agrega eventos
addEvent() {
let eventCopy = {
title: this.event.title,
startTime: new Date(this.event.startTime),
endTime: new Date(this.event.endTime),
allDay: this.event.allDay,
//desc: this.event.desc
}
if (eventCopy.allDay) {
let start = eventCopy.startTime;
let end = eventCopy.endTime;
eventCopy.startTime = new Date(Date.UTC(start.getUTCFullYear(), start.getUTCMonth(), start.getUTCDate()));
eventCopy.endTime = new Date(Date.UTC(end.getUTCFullYear(), end.getUTCMonth(), end.getUTCDate() + 1));
}
this.eventSource.push(eventCopy);
this.myCal.loadEvents();
this.resetEvent();
}
next() {
var swiper = document.querySelector('.swiper-container')['swiper'];
swiper.slideNext();
}
back() {
var swiper = document.querySelector('.swiper-container')['swiper'];
swiper.slidePrev();
}
// Change between month/week/day
changeMode(mode) {
this.calendar.mode = mode;
}
today() {
this.calendar.currentDate = new Date();
}
//mirar el evento y eliminar.
async onEventSelected(event) {
// Use Angular date pipe for conversion
let start = formatDate(event.startTime, 'medium', this.locale);
let end = formatDate(event.endTime, 'medium', this.locale);
const alert = await this.alertCtrl.create({
header: event.title,
subHeader: event.desc,
message: 'From: ' + start + '<br><br>To: ' + end,
buttons: [{
text: 'OK',
handler: () => {
console.log('ok clicked' );
console.log(event)
}
},
{
text: 'Eliminar',
handler: () => {
console.log(this.eventSource);
for (let index =0; index <= this.eventSource.length; index++) {
if (this.eventSource[index] === event) {
this.eventSource.splice(index, 1)
this.presentLoading();
console.log('Eliminar clicked: ' + index );
console.log(event);
this.myCal.loadEvents();
}
}
}
},
{
text: 'Editar',
handler: () => {
for (let index =0; index <= this.eventSource.length; index++) {
if (this.eventSource[index] === event) {
let newEvent = {
title: this.event.title,
startTime: new Date(this.event.startTime),
endTime: new Date(this.event.endTime),
allDay: this.event.allDay,
desc: this.event.desc
}
if (newEvent.allDay) {
let start = newEvent.startTime;
let end = newEvent.endTime;
newEvent.startTime = new Date(Date.UTC(start.getUTCFullYear(), start.getUTCMonth(), start.getUTCDate()));
newEvent.endTime = new Date(Date.UTC(end.getUTCFullYear(), end.getUTCMonth(), end.getUTCDate() + 1));
}
this.eventSource.push(newEvent);
this.myCal.loadEvents();
//this.resetEvent();
this.eventSource.splice(index, 1)
}
}
console.log('Editar clicked');
this.presentLoading();
this.myCal.loadEvents();
}
}
]
});
alert.present();
}
async presentLoading() {
const loader = await this.loadingCtrl.create({
message: "Por favor, espera...",
duration: 1000
});
loader.present();
}
onViewTitleChanged(title) {
this.viewTittle = title;
}
onTimeSelected(ev) {
let selected = new Date(ev.selectedTime);
this.event.startTime = selected.toISOString();
selected.setHours(selected.getHours() + 1);
this.event.endTime = (selected.toISOString());
}
}
Quiero usar el método de addEvent() en otro componente, ya que por cuestión de diseño, me piden usar el formulario de eventos en un Ion-Split (otro componente llamado menu-cal.page.ts, el de abajo).
import { Component, OnInit,ViewChild } from '@angular/core';
import { MenuController } from '@ionic/angular';
import { Router, RouterEvent } from '@angular/router';
import { UserService } from '../servicios/user.service';
import { Tab2Page } from "../tab2/tab2.page";
import { CalendarComponent } from "ionic2-calendar/calendar";
import { TabsPage } from '../tabs/tabs.page';
@Component({
selector: 'app-menu-cal',
templateUrl: './menu-cal.page.html',
styleUrls: ['./menu-cal.page.scss'],
})
export class MenuCalPage implements OnInit {
selectedPath='';
constructor(private router: Router, private us: UserService, private t2: Tab2Page) {
this.router.events.subscribe ((event: RouterEvent) =>{
this.selectedPath = event.url;
});
}
ngOnInit() {
}
addEvent(){
return this.t2.addEvent()
}
y este es su codigo html menu-cal.hmtl
<ion-split-pane >
<ion-menu side="end">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen class="calendario2">
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" [class.active-item]="selectedPath === p.url">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
<ion-card>
<ion-card-header tappable (click)="collapseCard = !collapseCard">
<ion-card-title>Nueva tarea</ion-card-title>
</ion-card-header>
<ion-card-content *ngIf="!collapseCard">
<ion-item>
<ion-input type="text" placeholder="Describe tu tarea" [(ngModel)]="event.title"></ion-input>
</ion-item>
<ion-item>
<ion-label>Hora de inicio</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY HH:mm" pickerFormat="MMM D:HH:mm" [(ngModel)]="event.startTime" [min]="minDate"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Hora final</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY HH:mm" pickerFormat="MMM D:HH:mm" [(ngModel)]="event.endTime" [min]="minDate"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Todo el día?</ion-label>
<ion-checkbox [(ngModel)]="event.allDay"></ion-checkbox>
</ion-item>
<ion-button fill="outline" expand="block" (click)="addEvent()" >Add Event</ion-button>
</ion-card-content>
</ion-card>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
lo que sucede es que, si llamo el metodo como esta especificado en menu-call.pag.ts, el HtML me arroja lo siguiente en consola:
Y así mismo 127 errores con la mismo descripción.
supongo que debe ser por como estoy llamando el método de agregar o no se. Agradecería su apoyo. Saludos :D