1

I am working on an Angular application using PrimeNG Full Calendar component, this one: https://primefaces.org/primeng/showcase/#/fullcalendar

That is based on the Angular FullCalendar component, this one: https://fullcalendar.io/

Here you can find my entire code: https://bitbucket.org/dgs_poste_team/soc_calendar/src/master/

I have a doubt and I am not finding an answer reading the official documentation.

If I have an event that start in a specific day and that climb over midnight I obtain something like this: as you can see I have highlighted an 8 hours event that start on February 27 2017 at 23:00, this event have a duration of 8 hours so it is shown also on February 28. This behavior it is absolutely correct but in my case I would prefer that the event to be displayed only in the cell of the start day. This because this calendar is a working shift calendar and all the cell will have a shift starting at 23:00 so I think that the visualization could be better showing the event only in the starting day avoiding that it is graphically expansed to the next day.

Is it possible implement this behavior in some way?

enter image description here

For completeness this is the code of the component view that displays the calendar:

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

and this is the code of the class controlling this component:

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

  }

}
AndreaNobili
  • 40,955
  • 107
  • 324
  • 596
  • 2
    I don't think there is any such functionality in fullCalendar. You have to made changes in your `events` array. So like event is starting at 23:00, you have to end it at 23:59 programatically in your code – Kiran Shinde May 29 '20 at 16:16
  • don't you think it will be wrong? – Aakash Garg May 29 '20 at 16:30
  • 2
    Actually this functionality **does** exist. Check out this option: https://fullcalendar.io/docs/nextDayThreshold – ADyson May 30 '20 at 07:08
  • @ADyson this is exactly what I was looking for. If you put it as response I will be happy to acept it :-) – AndreaNobili May 31 '20 at 11:11

0 Answers0