이오닉 2로 전체 일정으로 이벤트 추가

Question

나는 이오닉 2 앱을 가지고 있는데, fullcalendar을 사용하고 있습니다.

다음은 ION 2에서 사용하기 위해 steps을 사용했으며 매우 잘 작동합니다.

하지만 이제는이 사용자 지정 구성 요소가 포함 된 페이지 구성 요소에서 이벤트를 생성해야합니다.

프로파일 구성 요소가 있습니다. - profile.ts, 나는 firebase에서 사용자 당 날짜를 검색하고 있습니다. - profile.html에이 선택자가 있습니다. <full-calendar></full-calendar>

프로필 페이지에서 캘린더를 볼 수 있으며 이미 스타일을 수정했습니다. 이제이 페이지에서 이벤트를 만들고 싶지만 올바르게 참조하는 방법을 모르겠습니다.

나는 시도했다 :

import { FullCalendarComponent } from ..... 

@Component({ 
.... 
    providers: [FullCalendarComponent] 
}) 

. 
. 
. 
FullCalendarComponent.calendarOptions.events = myEvents; 

그러나 나는 그것을 실행하는 모든 변화를 볼 수 있으며, 콘솔은 나에게 오류를 발생하지 않습니다 ..

감사의 너무 많은 사전에!

EDIT :

전체 calendar.html :

<angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar> 

전체 calendar.ts 전체를 일정 성분 (성분/전체 달력)에서

:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'full-calendar', 
    templateUrl: 'full-calendar.html' 
}) 
export class FullCalendarComponent { 

    calendarOptions: any = { // Before it was type : Object 
     //height: 'parent', 
     locale: 'es', 
     contentHeight: 'auto', 
     fixedWeekCount : false, 
     weekends: true,/** 
     defaultDate: '2017-01-03',*/ 
     editable: true, 
     eventLimit: true, // allow "more" link when too many events 
     defaultView: 'month', //basicWeek 
     allDaySlot: false, 
     minTime: '06:00:00', 
     maxTime: '23:00:00', 
     header: { 
      left: 'prev', 
      center: 'title', //'prev, title, next' 
      right: 'next' 
     }, 
     events: [ 
     { 
      title: 'All Day Event', 
      start: '2016-09-01' 
     }, 
     { 
      title: 'Long Event', 
      start: '2016-09-07', 
      end: '2016-09-10' 
     }] 
    } 
} 

프로필 페이지 구성 요소에서

(페이지/프로필) :

profile.html :

:

<div class="calendar"> 
    <full-calendar [options]="calOptions" #mycal></full-calendar> 
</div> 

profile.ts (나는 더 많은 코드를 가지고 있지만이 중요한을 보여줍니다)

import { Component, ViewChild, ElementRef } from '@angular/core'; 
import { FullCalendarComponent } from '../../components/full-calendar/full-calendar'; 
import * as $ from 'jquery'; 


@Component({ 
    selector: 'page-profile', 
    templateUrl: 'profile.html', 
    providers: [FullCalendarComponent] 
}) 
export class ProfilePage { 
@ViewChild('mycal', { read: ElementRef }) myCal: ElementRef; 

calOptions: any = { 
    locale: 'es', 
    contentHeight: 'auto', 
    fixedWeekCount : false, 
    weekends: true,/** 
    defaultDate: '2017-01-03',*/ 
    editable: true, 
    eventLimit: true, // allow "more" link when too many events 
    defaultView: 'month', //basicWeek 
    allDaySlot: false, 
    minTime: '06:00:00', 
    maxTime: '23:00:00', 
    header: { 
     left: 'prev', 
     center: 'title', //'prev, title, next' 
     right: 'next' 
    }, 
    events: [] 
}; 

constructor(
    public navCtrl: NavController, 
    private alertCtrl: AlertController, 
    public platform: Platform, 
    public toastCtrl: ToastController, 
    private loadingCtrl: LoadingController, 
    public auth: FirebaseAuth 
) {} 

public setCalendarEvents(): void { 

    let events: Array<any> = []; 

    for (let entry of this.consecutiveDates) { 
     let event = { 
      allDay: true, 
      title: ' ', 
      start: entry 
     }; 

     events.push(event); 
    } 

    this.calOptions.events = events; 
    $(this.myCal.nativeElement).fullCalendar('addEventSource', events); 
} 

Answer 1

.ts does not work 언젠가 작동합니다. 어떤 이들은 당신 자신을 창조 할 것을 제안했습니다.

하지만 여기 제가 한 것입니다. .ts에서 elementRef를 만듭니다. 클래스 변수

@ViewChild('mycal', { read: ElementRef }) myCal: ElementRef 
calOptions: any = {}; //options 

이벤트가 발생하면 firebase에서 다음을 수행하십시오. slots은 events입니다. 어떤 방법으로.

this.calOptions.events = slots 
$(this.myCal.nativeElement).fullCalendar('addEventSource', slots) 

기억 : slots은 단일 개체가 아닌 개체 배열입니다.HTML에서

:

<full-calendar [options]="calOptions "#mycal></full-calendar> 

더 많은 정보 : https://gist.github.com/shah-smit/85aff341cd4a20494910ab2c17e82777/edit