我對Angular 2相當陌生，並試圖掌握如何將Angular 2與現有的Javascript UI框架庫集成。如何在Angular 2中使用FullCalendar
現在我試圖玩jQuery插件http://fullcalendar.io 或者實際上我想使用名爲Scheduler的高級附加組件。
但是我創建了Plunker一個簡單的例子...
隨意使用它，並開導我如何使它顯示以及如何對點擊響應特定事件。
... FullCalendarComponent當然需要修改的部分。問題是我不知道如何。
import {Component} from 'angular2/core';
@Component({
selector: 'full-calendar',
template: '<p>Here I would like to see a calendar</p>'
})
export class FullCalendarComponent { }
這是我設法使Scheduler在Angular2項目中工作的方式。 我開始使用由PrimeNG創建的稱爲Schedule的組件，如Cagatay Civici上面的註釋中所建議的。
我不得不像下面那樣修改文件scheduler.component.ts。
export class Scheduler {
// Support for Scheduler
@Input() resources: any[];
@Input() resourceAreaWidth: string;
@Input() resourceLabelText: string;
// End Support for Scheduler
// Added functionality
@Input() slotLabelFormat: any;
@Input() titleFormat: any;
@Input() eventBackgroundColor: any;
// End added properties
@Input() events: any[];
............
............
ngAfterViewInit() {
this.schedule = jQuery(this.el.nativeElement.children[0]);
this.schedule.fullCalendar({
resources: this.resources,
resourceAreaWidth: this.resourceAreaWidth,
resourceLabelText: this.resourceLabelText,
titleFormat: this.titleFormat,
slotLabelFormat: this.slotLabelFormat,
eventBackgroundColor: this.eventBackgroundColor,
theme: true,
header: this.header,
...........
然後，我必須將fullcalendar和scheduler的css和腳本添加到index.html。
開始，一些準備在JavaScript中的目錄：
jQuery的ui.min.js
jquery.min.js
fullcalendar.js
calendar.js
個angular.js
bootstrap.js
文件將在CSS目錄需要：
fullcalendar.css
bootstrap.css
現在創建控制器處理數據和事件： -
angular.module('myCalendarApp', ['ui.calendar']);
function CalendarCtrl($scope, $http) {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var currentView = "month";
//event source that pulls from google.com
$scope.eventSource = {
url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
};
//This will call onLoad and you can assign the values the way you want to the calendar
//here DataRetriever.jsp will give me array of JSON data generated from the database data
$http.get('DataRetriever.jsp').success(function(data) {
for(var i = 0; i < data.length; i++)
{
$scope.events[i] = {id:data[i].id, title: data[i].task,start: new Date(data[i].start), end: new Date(data[i].end),allDay: false};
}
});
/*
//to explicitly add events to the calendar
//you can add the events in following ways
$scope.events = [
{title: 'All Day Event',start: new Date('Thu Oct 17 2013 09:00:00 GMT+0530 (IST)')},
{title: 'Long Event',start: new Date('Thu Oct 17 2013 10:00:00 GMT+0530 (IST)'),end: new Date('Thu Oct 17 2013 17:00:00 GMT+0530 (IST)')},
{id: 999,title: 'Repeating Event',start: new Date('Thu Oct 17 2013 09:00:00 GMT+0530 (IST)'),allDay: false},
{id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
{title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
{title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
];
//we don't need it right now*/
//with this you can handle the events that generated by clicking the day(empty spot) in the calendar
$scope.dayClick = function(date, allDay, jsEvent, view){
$scope.$apply(function(){
$scope.alertMessage = ('Day Clicked ' + date);
});
};
//with this you can handle the events that generated by droping any event to different position in the calendar
$scope.alertOnDrop = function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view){
$scope.$apply(function(){
$scope.alertMessage = ('Event Droped to make dayDelta ' + dayDelta);
});
};
//with this you can handle the events that generated by resizing any event to different position in the calendar
$scope.alertOnResize = function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view){
$scope.$apply(function(){
$scope.alertMessage = ('Event Resized to make dayDelta ' + minuteDelta);
});
};
/*
//this code will add new event and remove the event present on index
//you can call it explicitly in any method
$scope.events.push({
title: 'New Task',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
className: ['newtask']
});
$scope.events.splice(index,1);*/
//with this you can handle the click on the events
$scope.eventClick = function(event){
$scope.$apply(function(){
$scope.alertMessage = (event.title + ' is clicked');
});
};
//with this you can handle the events that generated by each page render process
$scope.renderView = function(view){
var date = new Date(view.calendar.getDate());
$scope.currentDate = date.toDateString();
$scope.$apply(function(){
$scope.alertMessage = ('Page render with date '+ $scope.currentDate);
});
};
//with this you can handle the events that generated when we change the view i.e. Month, Week and Day
$scope.changeView = function(view,calendar) {
currentView = view;
calendar.fullCalendar('changeView',view);
$scope.$apply(function(){
$scope.alertMessage = ('You are looking at '+ currentView);
});
};
/* config object */
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
header:{
left: 'title',
center: '',
right: 'today prev,next'
},
dayClick: $scope.dayClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventClick: $scope.eventClick,
viewRender: $scope.renderView
}
};
/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
}
現在，在您的視圖文件（JSP，GSP或HTML）添加以下代碼： - 這有頭之前加入，AngularJS規範（詳情經歷AngularJS教程）
1
2
<html lang="en" ng-app="myCalendarApp" id="top">
這將爲基本的日曆結構提供3個議程按鈕。
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-success" ng-click="changeView('agendaDay', myCalendar)">Day</button>
<button class="btn btn-success" ng-click="changeView('agendaWeek', myCalendar)">Week</button>
<button class="btn btn-success" ng-click="changeView('month', myCalendar)">Month</button>
</div>
</div>
<div class="calendar" ng-model="eventSources" calendar="myCalendar" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
這就是警報消息將顯示
<div class="alert-success calAlert" ng-show="alertMessage != undefined && alertMessage != ''">
<h4>{{alertMessage}}</h4>
</div>
這將給任務的列表
<ul class="unstyled">
<li ng-repeat="e in events | filter:currentDate">
<div class="alert alert-info">
<a class="close" ng-click="remove($index)"><i class="icon-remove"></i></a>
<b> {{e.title}}</b> - {{e.start | date:"MMM dd"}}
</div>
</li>
</ul>
這不是Angular2打字稿 –
我創建了一個NPM包當前日期
npm install angular2-fullcalendar --save
您可以使用選項輸入完全自定義fullcalendar組件
您可以使用angular2提供/添加演示到您的github回購。 –
@SaiKiranMandhala我無法使它與Angular2和SystemJs一起運行。更改爲webpack後，我可以加載fullcalendar。但我現在正在努力顯示事件... https：//github.com/nekken/ng2-fullcalendar/issues/13這是我打開的問題，也許它可以幫助你 – messerbill
的angular2-fullcalendar不與角CLI的最新版本上運行。我在這裏打開了一個通知解決方案的錯誤： Angular2-fullcalendar is not an NgModule. Unexpected directive CalendarComponent
PrimeNG與稱爲Schedule Component的FullCalendar集成。 http://www.primefaces.org/primeng/#/schedule組件的代碼是開源的https://github.com/primefaces/primeng/blob/master/components/schedule/schedule.ts –
啊，那看起來是一個很好的起點。其實我需要使用名爲Scheduler的插件。我注意到，你似乎是與這些briljant組件一起工作的人。所以如果你有一段時間了。隨意添加對Scheduler插件的支持:) –
謝謝，調度程序模塊似乎是一個商業插件，所以不確定我們如何將它集成到PrimeNG中。 –