FullCalendar - Removing the dot in event

Question

How do I remove the dot on the left side of the time started in events? Can't seem to find it in the documentation of FullCalendar

Full JS code for the FullCalendar setup (this is all under a JQuery function statement)

$('#calendar').fullCalendar({      
    defaultDate: "{{ $month_year->format('Y-m') }}",
    defaultView: 'month',
    displayEventTime: true,
    showNonCurrentDates: false,
    eventWidth: "100%",
    eventHeight: "100px",
    timeFormat: 'H:mm',
    header: {
        left: '',
        center: '',
        right: ''
    },

    eventClick: function(jsEvent) {
        $('#m_modalCal_' + jsEvent['id']).modal("show");
    },

    events: [
        @php foreach($trainings as $training)
            { 

                $dateTimeStart = $training->start_date->format('Y-m-d ').Carbon::parse($training->start_time)->format('H:i:s');
                $dateTimeEnd = $training->start_date->format('Y-m-d ').Carbon::parse($training->end_time)->format('H:i:s');
        @endphp
                {
                    id: "{{ $training->id }}",
                    title: "{{ $training->title }}",
                    start: "{{ $dateTimeStart }}",
                    end: "{{ $dateTimeEnd }}",

                    @if($training->type_id == 1)
                    color: "#C0FFEE",
                    textColor: "black",
                    @elseif($training->type_id == 2)
                    color: "#E8D091",
                    textColor: "black",
                    @else
                    color: "#A491E8",
                    textColor: "black",
                    @endif

                    @if($training->status == 2)
                    color: "gray",
                    textColor: "black",
                    @endif
                },
        @php } @endphp
    ],
  })

user_678951 · Answer

In fullcalendar v5, you can set eventDisplay / event.display to display as block, which does not show the event dot.

$('#calendar').fullCalendar({      
  //...
  eventDisplay: 'block',
  //...
})

Also: see the upgrade notes (v4 to v5) about daygrid events.

Or, explicity hide the dot:

#calendar .fc-daygrid-event-dot {
  display: none;
}

user_8890345 · Answer

You might be able to accomplish this by setting the color of each event to the color-code of its category. Setting color will make the event's backgroundColor and borderColor equal the same value, effectively hiding the dots, I think.

FullCalendar - Removing the dot in event

2 Answers