Full Calendar dayGridMonth not showing dot and time format

Question

I want to display time format before event. Something like "8p - Event" in the month view.

I am using fullcalendar 4 with symfony 6! This i have so far Thanks in advance!

This is my calendar code with Calendar Bundle https://github.com/tattali/CalendarBundle

`<?php

public function __construct(EventRepository $eventRepository, UrlGeneratorInterface $router, ConfigDataService $configDataService) {
    $this->eventRepository = $eventRepository;
    $this->router = $router;
    $this->configDataService = $configDataService;
}

public static function getSubscribedEvents()
{
    return [
        CalendarEvents::SET_DATA => 'onCalendarSetData',
    ];
}

public function onCalendarSetData(CalendarEvent $calendar)
{
    $start = $calendar->getStart();
    $end = $calendar->getEnd();
    $filters = $calendar->getFilters();

    $service = $this->eventRepository->getCountEventsByService('active');

    $eventsRepository = $this->eventRepository->findEventsNotCancelled('cancelled');
    //dd($eventsRepository);
    foreach ($eventsRepository as $eventRepository) {
        if(!empty($eventRepository->getClient()->getFirstName()) || !empty($eventRepository->getClient()->getLastName())) {
            $name = $eventRepository->getClient()->getFirstName() . ' ' . $eventRepository->getClient()->getLastName();
        } else {
            $name = $eventRepository->getClient()->getEmail();
        }
        if($this->configDataService->get('eventByTime') == 'YES' && $eventRepository->getEventTime() != null) {
            $startTime = $eventRepository->getEventTime();
            $endTime = $eventRepository->getEventTimeEnd();
            if($startTime != null) {
                $eventStartDate = new \DateTime($eventRepository->getEventDate()->format('Y-m-d') . ' ' .$startTime->format('H:i:s'));
                //$eventStartDate = $eventRepository->getEventDate()->modify($startTime->format('H:i:s'));
                //$eventStartDate = $startTime->
            } else {
                $eventStartDate = null;
            }
            if($endTime != null) {
                $eventEndDate = new \DateTime($eventRepository->getEventDate()->format('Y-m-d') . ' ' .$endTime->format('H:i:s'));
            } else {
                $eventEndDate = null;
            }

            $calendarEvent = new Event(
                $name . ' Status: ' . ucfirst($eventRepository->getStatus()),
                $eventStartDate,
                $eventEndDate,
            );
        } else {
            //dd($eventRepository->getEventDate());
            $eventStartDate = $eventRepository->getEventDate();
            $eventEndDate = null;
             $calendarEvent = new Event(
                $name . ' <br> Status: ' . ucfirst($eventRepository->getStatus()),
                $eventStartDate,
                $eventEndDate,
            );
        }
        
        if(!empty($eventRepository->getService()->getColor())) {
            $color = $eventRepository->getService()->getColor();
            //var_dump($color);
            $calendarEvent->setOptions([
                'backgroundColor' => $color,
                'borderColor' => $color,
                'eventTextColor' => $color,
                'eventDisplay' => 'block',
            ]);
        } else {
            $calendarEvent->setOptions([
                'backgroundColor' => '#A4303F',
                'borderColor' => '#A4303F',
            ]);
        }

        if($this->configDataService->get('eventByTime') == 'YES') {
            $calendarEvent->setAllDay(false);
        }
        
        $calendarEvent->addOption(
            'url',
            $this->router->generate('app_event_show', [
                'id' => $eventRepository->getId(),
            ])
        );

        $calendar->addEvent($calendarEvent);
    }
}

}`

And in my webpack file (app.js) i have

     import { Calendar } ;
import dayGridPlugin ;
import timeGridPlugin ;
import listPlugin from ;
import allLocales from ;
document.addEventListener("DOMContentLoaded", () => {
  let calendarEl = document.getElementById("calendar-holder");

  let { eventsUrl } = calendarEl.dataset;

  let calendar = new Calendar(calendarEl, {
    editable: true,
    firstDay: 1,
    height: "auto",
    locales: allLocales,
    locale: 'en',
    eventSources: [
      {
        url: eventsUrl,
        method: "POST",
        extraParams: {
          filters: JSON.stringify({}) // pass your parameters to the subscriber
        },
        failure: () => {
          // alert("There was an error while fetching FullCalendar!");
        },
      },
    ],
    
    headerToolbar: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek, listMonth"
    },
    initialView: "dayGridMonth",
    eventDisplay: "block",
    //displayEventTime: true,
    navLinks: true, // can click day/week names to navigate views
    plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
    timeZone: "UTC",
    eventContent: function(arg) {
      return {
        html: arg.event.title.replace(/\n/g, '<br>')
      }
    },
  });
  let lang = calendarEl.dataset.lang;
  calendar.render();
  calendar.setOption('locale', lang);
});

So if i uncomment displayEventTime still is not working.

Answer 1

Your eventContent code overwrites the HTML provided by fullCalendar and replaces it with nothing except the event's title.

If you're going to do that, then any other content you want to show in the event must also be reproduced in the string that your eventContent code generates.

eventContent: function (arg) {
  return {
    html: arg.event.start.toLocaleTimeString(undefined, { "hour": "numeric", "minute": "numeric"}) + ' ' + arg.event.title.replace(/\n/g, "<br>")
  };
}

(You can of course adjust the time formatting to your requirements.)

Working demo: https://codepen.io/ADyson82/pen/xxyNYJV

More info:

• https://fullcalendar.io/docs/event-render-hooks
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString