2017-04-15 16 views
2

私は角2初心者です。私はangle2でfullcalendarを使ってカレンダーを作成しました。まず、calendarOptionsでイベントを作成し、その作業をうまく行っています。しかし、私はそれがうまくいかないfullcalendarでサービスしようとしています。私はfullcalendarでどのようにサービスを使用するのか分かりません。角度2で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> 

そのはうまく機能 - :

答えて

1

はいサービスはfullcalendar角度-2

フルcalendar.component.ts

編集HTMLファイルで使用することです。

+1

{{options | json}}タグ間 –

+0

これはカレンダーのすべてのオプションを表示します。 –

関連する問題