如何在 angular 2 中使用 fullCalendar 服务?
How to use services with fullCalendar in angular 2?
我是angular2初学者。我在 angular-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');
}
};
}
请告诉我们。如何使用全日历服务?
是的服务在全日历中使用angular-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 文件:-
<angular2-fullcalendar [options]=calendarOptions()>{{options | json}}</angular2-fullcalendar>
效果很好。
我是angular2初学者。我在 angular-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');
}
};
}
请告诉我们。如何使用全日历服务?
是的服务在全日历中使用angular-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 文件:-
<angular2-fullcalendar [options]=calendarOptions()>{{options | json}}</angular2-fullcalendar>
效果很好。