0

我正在使用PrimeNG Full Calendar组件开发一个 Angular 应用程序，这个：https ://primefaces.org/primeng/showcase/#/fullcalendar

这是基于Angular FullCalendar组件，这个：https ://fullcalendar.io/

在这里你可以找到我的整个代码：https ://bitbucket.org/dgs_poste_team/soc_calendar/src/master/

我有一个疑问，我没有找到阅读官方文档的答案。

如果我有一个在特定日期开始的事件并且爬过午夜我会得到这样的东西：如你所见，我突出显示了一个从 2017 年 2 月 27 日23:00开始的 8 小时事件，该事件的持续时间为8 小时，所以它也在 2 月 28 日显示。这种行为是绝对正确的，但在我的情况下，我希望事件仅显示在开始日的单元格中。这是因为这个日历是一个工作轮班日历，所有单元格将从 23:00 开始轮班，所以我认为可视化可以更好地仅在起始日显示事件，避免它以图形方式扩展到第二天。

是否有可能以某种方式实现这种行为？

在此处输入图像描述

为了完整起见，这是显示日历的组件视图的代码：

<div class="content-section implementation">
  <p-fullCalendar #fullcalendar
                  [events]="events"
                  [options]="options">
  </p-fullCalendar>
</div>

这是控制该组件的类的代码：

import { Component, OnInit, ViewChild, ElementRef } 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, { Draggable } from '@fullcalendar/interaction';
import { FullCalendar } from 'primeng';

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

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

  //people: any[];

  @ViewChild('fullcalendar') fullcalendar: FullCalendar;


  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,

        dateClick: (dateClickEvent) =>  {         // <-- add the callback here as one of the properties of `options`
          console.log("DATE CLICKED !!!");
        },

        eventClick: (eventClickEvent) => {
          console.log("EVENT CLICKED !!!");
        },

        eventDragStop: (eventDragStopEvent) => {
          console.log("EVENT DRAG STOP !!!");
        },

        eventReceive: (eventReceiveEvent) => {
          console.log(eventReceiveEvent);
          eventReceiveEvent.event.setAllDay(false, {maintainDuration: true});
          this.eventService.addEvent(eventReceiveEvent);
        }
    };

  }

}
4

0 回答 0