Я схожу с ума от очень странной проблемы, с которой сталкиваюсь, используя компонент PrimeNG FullCalendar , этот: https://primefaces.org/primeng/showcase/# / fullcalendar
Это основано в компоненте Angular FullCalendar , этот: https://fullcalendar.io/
В частности, я пытаюсь реализовать поведение, подобное последней ссылке, где перемещается перетаскиваемое событие в календарь.
В отличие от примера ссылки мои перетаскиваемые события имеют время начало и время конец . Например, я хочу перетащить вечер в определенный c день моего календаря, указав, что он начинается с 07: 00 и заканчивается в 15: 00 (это потому, что мой календарь представляет календарь рабочей смены, куда помещают человека, работающего в конкретном c временном диапазоне).
Здесь вы можете найти весь мой код: https://bitbucket.org/dgs_poste_team/soc_calendar/src/master/
Хорошо, как вы можно увидеть в представлении app-component , которое у меня есть:
<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>, показывающий список событий \ людей, которых я могу перетащить в свой календарь для определенной c рабочей смены.
Справа у меня есть компонент <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 }
};
, где я помещаю заголовок человека \ события (он отлично работает). Затем я помещаю (на данный момент это stati c, затем я сделаю его динамическим c) startTime, которое является временем начала события (например: я перетаскиваю человека \ событие в указанный c день, это означает, что это событие должно начинаться в 18:00 того дня, в который событие было перетащено), а duration означает, что событие закончится через 8 часов после времени начала.
Хорошо , в этом случае, похоже, он работает "нормально", на самом деле, когда я перетаскиваю человека \ событие в определенный c день, когда он появляется в календаре, вот скриншот:
Например, на предыдущем снимке экрана я перетащил событие PERSONA 2 в день с датой 22 февраля 2017 , и оно здесь (другие события исходил из массива событий stati c, определенных в моем коде)
Первая странная вещь, которую я заметил: я ожидал, что таким образом событие начинается с того, что указывает время начала (что касается событий, установленных на 9 февраля, которые начинается с 4p indic при том, что это событие начинается в 16:00 этого дня c).
Хорошо, тогда очень странная вещь: если я изменю свойство startTime моего ReturnEvent объект со значением меньше 16: 00 он больше не работает !!!
Например, используя:
var returnedEvent = {
title: eventEl.innerText,
startTime: "16:00",
duration: {hours: 8}
};
это означает: событие начинается в 16:00 выбранного дня в календаре и заканчивается в 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" он не работает. </p>
Что не так? Что мне не хватает? Как я могу изменить свой код, чтобы решить эту проблему?