Come utilizzare FullCalendar all'interno di Angular 2

Question

Sono abbastanza nuovo per Angular 2 e sto cercando di capire come integrare Angular 2 con le librerie esistenti di JavaScript UI Framework.

Ora sto provando a giocare con il plug-in jQuery http://fullcalendar.io Oppure, in realtà, desidero utilizzare l'add-on premium chiamato Scheduler.

Tuttavia ho creato un semplice esempio in Plunker ...

Sei libero di usare e mi illumini su come rendere la visualizzazione e anche il modo di rispondere alle cliccando su eventi specifici.

https://plnkr.co/edit/eMK6Iy

... componente FullCalendarComponent necessita di una modifica naturalmente. Il problema è che non so come.

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'full-calendar', 
    template: '<p>Here I would like to see a calendar</p>' 
}) 

export class FullCalendarComponent { } 

Answer 1

Ecco come sono riuscito a far funzionare lo Scheduler in un progetto Angular2. Ho iniziato con il componente chiamato Schedule creato da PrimeNG come suggerito in un commento sopra di Cagatay Civici.

Ho dovuto modificare il file scheduler.component.ts come di seguito.

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, 
........... 

Poi ho dovuto aggiungere il CSS e script per l'fullcalendar e scheduler per l'index.html.

Answer 2

Prima di iniziare, alcuni prerequisiti in javascript directory:

jquery-ui.min.js

jquery.min.js

fullcalendar.js

calendar.js

angular.js

bootstrap.js

File che saranno necessari nella directory CSS:

fullcalendar.css

bootstrap.css

Creare ora il controller gestire i dati e gli eventi: -

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]; 
} 

Ora nel file visualizzazione (jsp, GSP o HTML) aggiungere i seguenti codici: - questo devono essere aggiunti prima che la testa, AngularJS norme (per maggiori dettagli passare attraverso AngularJS esercitazione)

1 
2 
<html lang="en" ng-app="myCalendarApp" id="top"> 

Questo darà la struttura di base del calendario con 3 pulsanti agenda.

<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> 

Questo è dove il messaggio di avviso verrà mostrato

<div class="alert-success calAlert" ng-show="alertMessage != undefined && alertMessage != ''"> 
    <h4>{{alertMessage}}</h4> 
</div> 

Questo darà la lista dei compiti per la data corrente

<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> 

Answer 3

ho creato un pacchetto di NPM

npm install angular2-fullcalendar --save 

è possibile utilizzare l'ingresso opzioni per personalizzare completamente la componente fullcalendar

check-out la documentazione qui https://github.com/nekken/ng2-fullcalendar

Answer 4

L'angular2-fullcalendar non è in esecuzione con le ultime versioni di angolare CLI. Ho aperto un bug informando sulla soluzione qui: Angular2-fullcalendar is not an NgModule. Unexpected directive CalendarComponent