Одностороннее связывание данных не работает с FullCalendar и Angular - PullRequest
Новая
       9

Одностороннее связывание данных не работает с FullCalendar и Angular

0 голосов
/ 01 января 2019

Я получил компонент, который состоит из календаря (fullcalendar.io V4) и простого текста, который должен содержать информацию о событии.Fullcalendar интегрировать функцию, которая позволяет мне узнать, какой элемент был нажат.Это функция ниже: 

  eventClick: function (info) {
    this.modal_title = "Reservation : ";
    this.modal_start = info.event.start;
    this.modal_end = info.event.end;

    console.log("start : " + this.modal_start);
    console.log("end : " + this.modal_end);
  }

В этой функции у меня есть некоторая переменная с именем modal_title / start / end.В этой переменной я храню мои данные info.event, чтобы отобразить их в моем HTML-представлении.Console.log предназначен только для отладки и отлично работает.

В html-части моего компонента я просто отображаю календарь и переменные.Вот полный код: 

<div id="calendar"></div>

<p>title : {{modal_title}}</p>
<p>arival : {{modal_start}}</p>
<p>leave : {{modal_end}}</p>

Я получил только это отображается ... 

title : plop

arival :

leave :

Я не понимаю, почему это простое связывание данных не работает.Вероятно, это связано с конфликтом с FullCalendar, но я не понимаю, как я могу это исправить.Спасибо за вашу помощь.

Вот полный код моего компонента.ts 

//general import
import { Component, OnInit, Input } from '@angular/core';
import { ViewChild } from '@angular/core';

//import pour modal
import { TemplateRef } from '@angular/core';

//service
import { IcsService } from '../../_Services/ics.service';
import { visitAll } from '@angular/compiler';

//variables
declare const FullCalendar: any;
declare const $: any;

@Component({
    selector: 'app-scheduler',
    templateUrl: './scheduler.component.html',
    styleUrls: ['./scheduler.component.css']
})
/** scheduler component*/
export class SchedulerComponent implements OnInit {
  ressources: any;
  event: any;
  modal_title: any = "plop";
  modal_start: any;
  modal_end: any;
  /** scheduler ctor */
  constructor(private ics_service: IcsService) {}

  ngOnInit() {
    this.ics_service.GetAllRessources().subscribe(result => {
      this.ressources = result;
      console.log(this.ressources);
      this.ics_service.GetAllEvents().subscribe(result => {
        this.event = result;
        console.log(this.event);
        this.calendar();
      });
    });

  }


  calendar() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
      locale: 'fr',
      now: Date.now(),
      defaultDate: Date.now() - 172800000, //date où sa commence le schedule - 2 jours
      editable: false,
      aspectRatio: 2,
      header: {
        left: 'today prev,next',
        center: 'title',
        right: 'Scheduler, month',
      },
      titleFormat: { // will produce something like "Tuesday, September 18, 2018"
        month: 'long',
        year: 'numeric',
        day: 'numeric',
        weekday: 'long'
      },
      defaultView: 'Scheduler',
      views: {
        Scheduler: {
          type: 'timeline',
          duration: { days: 20 },
        }
      },
      resourceLabelText: 'Rooms',
      height: 'auto',
      resources: this.ressources,
      events: this.event,
      eventClick: function (info) {
        //document.getElementById("openModalButton").click();
        this.modal_title = "Reservation : ";
        this.modal_start = info.event.start;
        this.modal_end = info.event.end;

        console.log("start : " + this.modal_start);
        console.log("end : " + this.modal_end);
      },
      eventMouseEnter: function (info) {
      }
    });
    calendar.render();
  }
}

1 Ответ

0 голосов
/ 02 января 2019

this.modal_ * значения недоступны внутри функции календаря, это ключевое слово только указывает на текущую активную доступную функцию.

...