3

我正在为一个非常奇怪的问题而发疯，我正在使用PrimeNG FullCalendar组件，这个：https ://primefaces.org/primeng/showcase/#/fullcalendar

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

特别是我正在尝试实现一种行为，例如将可拖动事件移动到日历中的最后一个链接。

与链接示例不同，我的可拖动事件有开始时间和结束时间。例如，我想将一个 evet 拖到我日历的特定日期，指定它从07:00开始并在15:00结束（这是因为我的日历代表一个工作班次日历，其中将人员放在特定的时间范围内工作）。

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

好的，正如您在应用程序组件视图中看到的那样：

<div class="container">
  <div class="row">
    <div class="col-12">
      <app-header></app-header>
    </div>

    <div class="row">
      <div class="col-4">
        <p>DRAGGABLE</p>
        <app-people-list></app-people-list>
      </div>
      <div class="col-8">
        <app-fullcalendar></app-fullcalendar>
      </div>
    </div>
  </div>
</div>

左侧是<app-people-list>显示事件\人员列表的组件，我可以将其拖到我的日历中以进行特定的工作班次。

在右侧，我有<app-fullcalendar>渲染我的日历的组件。

进入PeopleListComponent类（app-people-list组件的控制器）我有这个ngAfterViewInit方法：

ngAfterViewInit() {
  console.log("PEOPLE LIST ngAfterViewInit() START !!!")
  var self = this

  new Draggable(this.draggablePeopleExternalElement.nativeElement, {
    itemSelector: '.fc-event',
    eventData: function(eventEl) {
      console.log("DRAG !!!");
      console.log("SELECTED SHIFT: " + self.selectedShift.value);

      //var returnedEvent = self.createEventObject(self.selectedShift.value, eventEl.innerText);

      //return returnedEvent;

      var returnedEvent = {
        title: eventEl.innerText,
        startTime: "18:00",
        duration: {
          hours: 8
        }
      };

      return returnedEvent;
    }
  });

}

如您所见，它正在创建一个Draggable对象，用于将我列表中的事件\人员拖到日历中。目前它正在返回一个像这样的对象：

var returnedEvent = {
  title: eventEl.innerText,
  startTime: "18:00",
  duration: { hours: 8 }
};

我把人\事件的标题放在哪里（它工作正常）。然后我把（现在它是静态的，然后我将它变成动态的）startTime那个是事件的开始时间（例如：我将人\事件拖到特定的一天，这意味着这个事件必须开始于事件被拖动当天的 18:00）以及duration事件在开始时间后 8 小时结束的含义。

好的，在这种情况下，它似乎工作“很好”，事实上，当我将一个人\事件拖到它出现在日历中的特定日期时，这里是一个截图：

在此处输入图像描述

例如，在上一个屏幕截图中，我将PERSONA 2事件拖到日期为 2017 年 2 月 22 日的那一天，它就在这里（其他事件来自我的代码中定义的静态事件数组）

注意到的第一个奇怪的事情是：我希望因此事件以指示开始时间的内容开始（至于 2 月 9 日的事件，以4p开始，表示该事件从该特定日期的 16:00 开始）。

好的，那么非常奇怪的事情：如果我将返回的事件对象的startTime属性更改为小于16:00的值，它就不再起作用了！！！

例如，使用：

var returnedEvent = {
  title: eventEl.innerText,
  startTime: "16:00",
  duration: {hours: 8}
};

这意味着：活动从日历中所选日期的下午 4 点开始，并在同一天的 00:00 结束。当我将此事件拖到日历中时，该事件不会出现在日历上。没有渲染！！！它发生在startTime之前的所有 17:00，我不明白为什么。进入 JavaScript 控制台，我没有收到任何错误消息。

为了完整起见，进入FullcalendarComponent类（控制完整日历组件的类）我有：

@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("EXTERNAL EVENT LAND ON THE CALENDAR. Title: " + eventReceiveEvent.event.title + " Selected shift: " + eventReceiveEvent.selectedShift);
        //console.log("EXTERNAL EVENT LAND ON THE CALENDAR. Title: " + eventReceiveEvent.event.title + " Selected start: " + eventReceiveEvent.event.start);

        console.log(eventReceiveEvent);
        this.eventService.addEvent(eventReceiveEvent);
      }
    };

  }

}

如您所见，它包含此方法：

eventReceive: (eventReceiveEvent) => {
  //console.log("EXTERNAL EVENT LAND ON THE CALENDAR. Title: " + eventReceiveEvent.event.title + " Selected shift: " + eventReceiveEvent.selectedShift);
  //console.log("EXTERNAL EVENT LAND ON THE CALENDAR. Title: " + eventReceiveEvent.event.title + " Selected start: " + eventReceiveEvent.event.start);

  console.log(eventReceiveEvent);
  this.eventService.addEvent(eventReceiveEvent);
}

接收人员列表组件发出的上一个事件并将此事件放入数组中（调用服务），它工作正常。

我真的不明白我的代码可能有什么问题，以及为什么使用startTime值<“17:00”它不起作用。

怎么了？我错过了什么？如何更改我的代码来解决这个问题？

4

1 回答 1

3

将事件拖入dayGridMonth视图时，FullCalendar 不尊重allDay原始事件定义中设置的值，并且始终设置allDay: true. 这意味着，默认情况下，拖入dayGridMonth视图的事件被视为/假定为全天事件。

startTime但是，当您使用并设置创建定时事件时duration，该事件不再是全天事件。当您将此类事件拖到dayGridMonth视图中时，FullCalendar 不允许将该事件拖放到视图中。

您描述的最奇怪的事情是，当您创建以下事件时；

var returnedEvent = {
  title: eventEl.innerText,
  startTime: "16:00",
  duration: {hours: 8}
};

此事件的结束时间是今天之后，FullCalendar 将其视为全天事件。由于这是全天活动，因此可以将其放入全天时段。

但是，当您创建以下事件时；

var returnedEvent = {
  title: eventEl.innerText,
  startTime: "15:00",
  duration: {hours: 8}
};

此事件的结束时间是今天，FullCalendar 认为这不是全天事件，而是定时事件。由于这不是全天活动，因此不允许将其放入全天时段。

您可以通过切换到周视图或日视图来观察相同的行为，并尝试将事件放到顶部的全天行中。它不允许将定时事件放入该行，而允许将定时事件放入任何其他行。

因此; 您需要一种方法来解决 FullCalendar 以允许将定时事件放入全天时段。就像说的那样简单:) 在 FullCalendar 解析事件之后，将全天事件转换为定时事件就足够了。这可以在eventReceive回调中完成。

eventReceive: receivedEvent => {
  receivedEvent.event.setAllDay(false, {maintainDuration: true})
}

长话短说，在你的FullcalendarComponent;

eventReceive: (eventReceiveEvent) => {
  //console.log("EXTERNAL EVENT LAND ON THE CALENDAR. Title: " + eventReceiveEvent.event.title + " Selected shift: " + eventReceiveEvent.selectedShift);
  //console.log("EXTERNAL EVENT LAND ON THE CALENDAR. Title: " + eventReceiveEvent.event.title + " Selected start: " + eventReceiveEvent.event.start);

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

但请注意，这会影响所有拖动的事件。因此，您可能希望根据初始事件创建期间定义的某个标志确定的条件将 all-day 设置为 false。这在很大程度上取决于您的用例。

相关文档：
https ://fullcalendar.io/docs/eventReceive
https://fullcalendar.io/docs/external-dragging
https://fullcalendar.io/docs/event-parsing
https://fullcalendar.io/docs/ Event-setAllDay
https://fullcalendar.io/docs/allDayMaintainDuration

我希望它有帮助，祝你好运。

于 2020-05-28T23:44:44.567 回答