代码之家 › 专栏 › 技术社区 › AndreaNobili

启动:为什么单击完整日历日期dateclick事件没有发出?如何处理在日历上单击特定日期的操作?

primeng-calendar primeng typescript angular

-1

AndreaNobili · 技术社区 · 6 年前

涂底漆 全日历 https://primefaces.org/primeng/showcase/#/fullcalendar

问题是,当用户单击我日历中的特定日期时,我想处理一个事件(参考上一个链接示例:当用户单击将一天重新呈现到日历中的正方形时,我必须执行回调方法)。

所以我知道这个涂底漆的组件应该基于 https://fullcalendar.io/

我试过这样做,但没有成功:

1) 这是我的页码:

全日历工作!

<div class="content-section implementation">
  <p-fullCalendar #calendar (dateClick)="handleDateClick($event)"
                  [events]="events"
                  [options]="options">
  </p-fullCalendar>
</div>

(dateClick)="handleDateClick($event)"

2) 然后我得到了这个角度组件的“后端”代码,定义为

import { Component, OnInit } from '@angular/core';
import { EventService } from '../event.service';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';

@Component({
  selector: 'app-fullcalendar',
  templateUrl: './fullcalendar.component.html',
  styleUrls: ['./fullcalendar.component.css']
})
export class FullcalendarComponent implements OnInit {

  events: any[];
  options: any;
  header: any;

  constructor(private eventService: EventService) {}

  ngOnInit() {
    this.eventService.getEvents().then(events => {this.events = events;});

    this.options = {
        plugins:[ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin ],
        defaultDate: '2017-02-01',
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        editable: true
    };
  }

  handleDateClick(dateClickEvent) {
    console.log("DATE CLICKED !!!");
  }

}

如您所见,我为这个组件导入了一些插件,特别是我已经按照官方文档中的说明安装了它,通过以下语句:

npm install @fullcalendar/interaction --save

然后我创造了 手动单击() 交互插件 进入我的组件使用的数组,如下所述: dateClick not emitted in fullcalendar angular

https://fullcalendar.io/docs/angular 整个日历的基础。

但它不起作用:我的应用程序编译,日历显示在我的页面上,但点击我显示的日历上的特定日期,什么也不会发生。

为什么?怎么了?我错过了什么?如何修复代码并正确处理此事件?

1 回复 | 直到 6 年前

1

Michael D 6 年前

docs :

FullCalendar的回调也由选项定义

所以试试下面的

选择1

this.options = {
  plugins:[ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin ],
  defaultDate: '2017-02-01',
  header: {
      left: 'prev,next',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  editable: true,
  dateClick: (dateClickEvent) =>  {         // <-- add the callback here as one of the properties of `options`
    console.log("DATE CLICKED !!!");
  }
};

选择2

或者要从回调函数访问成员变量和函数,请将回调函数与参数绑定 this . (未经测试-可能无法按预期工作)

ngOnInit() {
  this.options = {
    plugins:[ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin ],
    defaultDate: '2017-02-01',
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    editable: true,
    dateClick: this.handleDateClick.bind(this)     // <-- bind the callback with argument `this`
  };
}

handleDateClick(dateClickEvent) {
  console.log("DATE CLICKED !!!");

  // access member variables and functions using `this` keyword
}