如何在Angular 2中使用FullCalendar



我是Angular 2的新手,正在尝试了解如何将Angular 2与现有的Javascript UI Framework库集成。

现在我正在尝试使用jQuery插件http://fullcalendar.io或者实际上我想使用名为Scheduler的高级附加组件。

然而,我在Plunker中创建了一个简单的例子。。。

请随意使用它,并启发我如何显示它,以及如何响应点击特定事件。

https://plnkr.co/edit/eMK6Iy

组件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中。

我创建了一个npm包

npm install angular2-fullcalendar --save

您可以使用选项输入来完全自定义完整日历组件

查看此处的文档https://github.com/nekken/ng2-fullcalendar

angular2 fullcalendar未使用最新版本的Angular CLI运行。我在这里打开了一个通知解决方案的错误:Angular2 fullcalendar不是NgModule。意外指令CalendarComponent

ng-fullcalendar封装Angular 2的fullcalendar模块。

https://github.com/jamaks/ng-fullcalendar

我认为自己包装它不是一个好主意,ng2完整日历也没有得到维护。ngfullcalendar是一个相对较新的项目,有许多活动签入。

在启动之前,javascript目录中的一些先决条件:

jquery-ui.min.js

jquery.min.js

fullcalendar.js

calendar.js

angular.js

bootstrap.js

CSS目录中需要的文件:

fullcalendar.css

引导.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>

相关内容

  • 没有找到相关文章

最新更新