web-dev-qa-db-fra.com

Comment utiliser FullCalendar dans Angular 2

Je suis assez nouveau pour Angular 2 et j'essaie de comprendre comment intégrer Angular 2 avec les bibliothèques Javascript UI Framework existantes).

Maintenant, j'essaie de jouer avec le plugin jQuery http://fullcalendar.io Ou en fait, je veux utiliser le module complémentaire premium appelé Scheduler.

Cependant, j'ai créé un exemple simple dans Plunker ...

N'hésitez pas à l'utiliser et à m'éclairer sur la façon de le faire s'afficher et aussi sur la façon de réagir en cliquant sur des événements spécifiques.

https://plnkr.co/edit/eMK6Iy

... le composant FullCalendarComponent doit bien sûr être modifié. Le problème est que je ne sais pas comment.

import {Component} from 'angular2/core';

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

export class FullCalendarComponent { }
angularfullcalendar
8
Magnus Wallström

Voici comment j'ai réussi à faire fonctionner le planificateur dans un projet Angular2. J'ai commencé avec le composant appelé Schedule créé par PrimeNG comme suggéré dans un commentaire ci-dessus par Cagatay Civici.

J'ai dû modifier le fichier scheduler.component.ts comme ci-dessous.

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

Ensuite, j'ai dû ajouter le css et le script pour fullcalendar et le planificateur au index.html.

7
Magnus Wallström

J'ai créé un package npm

npm install angular2-fullcalendar --save

vous pouvez utiliser l'entrée des options pour personnaliser entièrement le composant fullcalendar

consultez les documents ici https://github.com/nekken/ng2-fullcalendar

4
Nekken

ng-fullcalendar encapsule le module fullcalendar pour Angular 2.

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

Je ne pense pas que l'envelopper par vous-même soit une bonne idée et ng2-fullcalendar n'est pas en cours de maintenance. ng-fullcalendar est un projet relativement nouveau et a de nombreux enregistrements actifs.

0
Nicholas Lu

Le angular2-fullcalendar ne fonctionne pas avec les dernières versions de Angular CLI. J'ai ouvert un bug informant de la solution ici: Angular2-fullcalendar n'est pas un NgModule. Directive inattendue CalendarComponent

0
Lupe