각도 2에서 fullCalendar로 서비스를 사용하는 방법은 무엇입니까?

Question

나는 각도가 2 초보 다. 나는 각도 -2에서 fullcalendar를 사용하여 달력을 만들었습니다. 첫째로 나는 calendarOptions과 그 잘 작동하는 이벤트를 만들었습니다. 하지만 fullcalendar로 서비스하려고하는데 작동하지 않습니다. 왜냐하면 fullcalendar로 서비스를 사용하는 방법을 모르기 때문입니다.

event.json

{ 
    "data": [ 
     { 
      "title": "All Day Event", 
      "start": "2017-04-01" 
     }, 
     { 
      "title": "Long Event", 
      "start": "2017-04-07", 
      "end": "2017-04-10" 
     } 
    ] 
} 

events.service.ts

import { Injectable } from '@angular/core'; 
import { Headers, Http , Response} from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class EventsService { 

    data: object; 
    constructor(private http: Http) { } 
    getEvents() 
    { 
    return this.http.get("src/assets/data/events.json").map(response => response.json().data); 
    } 
} 

풀 calendar.component.ts

import { Component, OnInit } from '@angular/core'; 
import { EventsService } from './events.service'; 

@Component({ 
    selector: 'app-full-calendar', 
    templateUrl: './full-calendar.component.html', 
    styleUrls: ['./full-calendar.component.css'] 
}) 
export class FullCalendarComponent implements OnInit { 

    events: object; 
    constructor(private eventsService: EventsService){} 

    ngOnInit(){ 
    this.events = this.eventsService.getEvents().subscribe(events => {this.events = events;}); 
    console.log(this.events); 
    } 

    calendarOptions:Object = { 
    height: 'auto', 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay, prevYear,nextYear' 
    }, 
    editable: true, 
    eventLimit: true, 
    events: this.events, 
    eventClick: function(event, jsEvent, view) { 

     alert('Event: ' + event.title + ' ' + 'Start Date: ' + event.start); 
     $(this).css('border-color', 'red'); 
    }, 
    dayClick: function(date, jsEvent, view) { 

     alert('Clicked on: ' + date.format()); 
     $(this).css('background-color', 'red'); 

    } 
    }; 
} 

우리에게 말해주세요. fullcalendar와 함께 서비스를 사용하는 방법?

<angular2-fullcalendar [options]=calendarOptions()>{{options | json}}</angular2-fullcalendar> 

그 잘 작동합니다 -이 :

Answer 1

예 서비스는 fullcalendar에서 사용 각도-2

풀 calendar.component.ts

events: object; 

    constructor(private eventsService: EventsService){} 

    ngOnInit(){ 
    this.eventsService.getEvents().subscribe(events => {this.events = Events;}, 
              err => alert(err), 
              () => console.log(this.events)); 
    } 

    calendarOptions(){ 
    let calendarOptions:Object = { 
     height: 'auto', 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay, prevYear,nextYear' 
     }, 
     editable: true, 
     eventLimit: true, 
     events: this.events, 
     eventClick: function(event, jsEvent, view) { 
      alert('Event: ' + event.title + ' ' + 'Start Date: ' + event.start); 
     }, 
     dayClick: function(date, jsEvent, view) { 
      alert('Clicked on: ' + date.format()); 
     } 
    }; 
    return(calendarOptions); 
    } 

편집 HTML 파일입니다.