我是Angular 2的新手，并试图掌握如何将Angular 2与现有的Javascript UI Framework库集成。
现在我正在尝试使用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 { }
答案 0 :(得分：7)
这是我设法让Scheduler在Angular2项目中工作的方法。 我开始使用由PrimeGG创建的名为Schedule的组件，如Cagatay Civici上面的评论中所建议的那样。
我必须修改文件scheduler.component.ts，如下所示。
Hardware Model: iPad5,4
Process: PacketTunnel [7893]
Code Type: ARM-64 (Native)
Parent Process: launchd [1]
Date/Time: 2016-05-04 17:57:58.58 +0300
Launch Time: 2016-05-04 17:55:55.55 +0300
OS Version: iOS 9.0.2 (13A452)
Report Version: 105
Exception Type: EXC_BAD_ACCESS (SIGSEGV)
Exception Subtype: KERN_INVALID_ADDRESS at 0x00000000000000c0
Triggered by Thread: 0
Filtered syslog:
None found
Global Trace Buffer (reverse chronological seconds):
19.714507 libextension.dylib 0x00000001965c0dc8 tearing down context in extension due to invalidation
Thread 0 name: Dispatch queue: com.apple.main-thread
Thread 0 Crashed:
0 libobjc.A.dylib 0x0000000196d87890 lookUpImpOrForward + 80
1 libobjc.A.dylib 0x0000000196d91db8 _objc_msgSend_uncached_impcache + 56
2 libobjc.A.dylib 0x0000000196d91db8 _objc_msgSend_uncached_impcache + 56
3 NetworkExtension 0x0000000185552988 __70-[NEExtensionTunnelProviderContext establishIPCWithCompletionHandler:]_block_invoke + 104
4 NetworkExtension 0x000000018546b3ac -[NEIPC handleMessage:withHandler:] + 444
5 NetworkExtension 0x000000018546b68c __39-[NEIPC setupMessageHandlingWithQueue:]_block_invoke + 172
6 libxpc.dylib 0x00000001977c130c _xpc_connection_call_event_handler + 68
7 libxpc.dylib 0x00000001977bf0b4 _xpc_connection_mach_event + 2132
8 libdispatch.dylib 0x000000019756d86c _dispatch_client_callout4 + 16
9 libdispatch.dylib 0x0000000197571b58 _dispatch_mach_msg_invoke + 656
10 libdispatch.dylib 0x0000000197579930 _dispatch_queue_drain + 1332
11 libdispatch.dylib 0x0000000197570c6c _dispatch_mach_invoke + 600
12 libdispatch.dylib 0x00000001975728d8 _dispatch_main_queue_callback_4CF + 492
13 CoreFoundation 0x0000000182164258 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 12
14 CoreFoundation 0x00000001821620c0 __CFRunLoopRun + 1628
15 CoreFoundation 0x0000000182090dc0 CFRunLoopRunSpecific + 384
16 Foundation 0x00000001830047ec -[NSRunLoop(NSRunLoop) runMode:beforeDate:] + 308
17 Foundation 0x0000000183059e14 -[NSRunLoop(NSRunLoop) run] + 88
18 libxpc.dylib 0x00000001977ccd3c _xpc_objc_main + 660
19 libxpc.dylib 0x00000001977cea70 xpc_main + 200
20 Foundation 0x00000001831d6494 service_connection_handler + 0
21 PlugInKit 0x000000019003acd8 -[PKService run] + 544
22 PlugInKit 0x000000019003a96c +[PKService main] + 56
23 PlugInKit 0x000000019003acfc +[PKService _defaultRun:arguments:] + 20
24 libextension.dylib 0x00000001965d2058 NSExtensionMain + 64
25 libdyld.dylib 0x000000019759e8b8 start + 4
然后我必须将fullcalendar和scheduler的css和脚本添加到index.html。
答案 1 :(得分：4)
我创建了一个npm包
char ch = rand() % 2 ? '+' : '-'.
您可以使用选项输入来完全自定义fullcalendar组件
答案 2 :(得分：0)
angular2-fullcalendar未运行最新版本的Angular CLI。我在这里打开了一个告知解决方案的错误： Angular2-fullcalendar is not an NgModule. Unexpected directive CalendarComponent
答案 3 :(得分：0)
ng-fullcalendar包装Angular 2的fullcalendar模块。
https://github.com/jamaks/ng-fullcalendar
我认为自己包装不是一个好主意，并且ng2-fullcalendar不在维护中。 ng-fullcalendar是一个相对较新的项目，并且有许多活跃的签到位置。
答案 4 :(得分：-1)
在开始之前，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>