Conditionally remove event time from event from full calendar in angular

Question

I'm using this code to render events in full calendar

     calendarOptions: CalendarOptions = {
       height:650,
       initialView: "timeGridWeek",
       scrollTime: this.currentdateTime,
     };


   this.calendarOptions = {
   initialView: 'timeGridWeek',
   timeZone: 'utc',
   dateClick: this.onDateClick.bind(this),
   showNonCurrentDates: false,
   datesSet: this.handleMonthChange,
   events: function(fetchInfo, successCallback, failureCallback) { 
   return {
                  ...x,
                  start: date, 
                  startStr:date,
                  endStr:date,
                  end: date, 
                  allDay:true,
                  isEventeditable:false,
                  backgroundColor:color,
                  borderColor:color
                };

i want to conditionally hide 12:00 AM time from specific event i tried this

displayEventTime: false

but that will remove time from all event

Answer 1

You can add custom properties inside your events like "_birthDay"

return {
    _birthDay:true,      
    start: date, 
    startStr:date,
    endStr:date,
    end: date, 
    allDay:true,
    isEventeditable:false,
    backgroundColor:color,
    borderColor:color
};

eventContent: function(arg) {      
    if(arg.event.extendedProps._birthDay == true) 
      return { html: arg.event.title };
    else return;
    // or you can create and return html elements as array with domNodes
    // return { domNodes: arrayOfDomNodes }
}

When you put eventContent inside fullCalendar options it works as a middleware checking every event. You can check event date with "if" or put a predefined property from your datasource like "_birthDay" and access it by using "event.extendedProps" object. With "else return;" mean render this event in default mode. Puts time and title as usual. If you "return false" it renders nothing inside this event. more info about content injection