Angular Полный календарь: можно ли избежать того, чтобы событие, начинающееся в один день и заканчивающееся на следующий день, отображалось графически в оба дня? - PullRequest
Новая
       144

Angular Полный календарь: можно ли избежать того, чтобы событие, начинающееся в один день и заканчивающееся на следующий день, отображалось графически в оба дня?

0 голосов
/ 29 мая 2020

Я работаю над приложением Angular, используя PrimeNG Full Calendar компонент, этот: https://primefaces.org/primeng/showcase/# / fullcalendar

Это основано на Angular FullCalendar компонент, вот этот: https://fullcalendar.io/

Здесь вы можете найти весь мой код: https://bitbucket.org/dgs_poste_team/soc_calendar/src/master/

У меня есть сомнения, и я не нашел ответа, читая официальную документацию.

Если у меня есть событие, которое начинается в определенный c день и поднимается выше полуночи, я получаю что-то вроде этого: Вы можете видеть, что я выделил 8-часовое событие, которое начнется 27 февраля 2017 г. в 23: 00 , это событие имеет продолжительность 8 часов , поэтому оно также отображается 28 февраля. Такое поведение абсолютно правильное, но в моем случае я бы предпочел, чтобы событие отображалось только в ячейке начального дня. Это потому, что этот календарь является календарем рабочей смены, и вся ячейка будет иметь смену, начинающуюся в 23:00, поэтому я думаю, что визуализация могла бы лучше отображать событие только в начальный день, избегая графического расширения на следующий день.

Можно ли каким-то образом реализовать это поведение?

enter image description here

Для полноты это код представления компонента, который отображает календарь: 

<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);
        }
    };

  }

}
...