Strange text is added to the event title in fullcalendar plugin

Question

I am creating a fullcalendar which retrieves the events by mean of a function call set in the events property.

This is the fullcalendar definition (which is created when a modal dialog box is shown):

            var calendarCreated = false;
            $('#modal_calendar').on('shown.bs.modal', function () {
                $(this).find('.card-header').draggable();
                if (!calendarCreated) {
                    $('[data-toggle="calendar"]').fullCalendar({
                        themeSystem: 'bootstrap4',
                        locale: 'es',
                        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
                        header: {
                            left: 'title',
                            center: '',
                            right: 'prev,next today'
                        },
                        buttonText: {
                            today: 'Hoy',
                            month: 'Mes',
                            week: 'Semana',
                            day: 'Día'
                        },
                        events: '/myurl',
                        eventRender: function (eventObj, $el) {
                            $el.popover({
                                title: 'Menú ' + eventObj.title,
                                content: eventObj.description,
                                trigger: 'hover',
                                placement: 'top',
                                container: 'body'
                            });
                        },
                    });
                    calendarCreated = true;
                }
            });

The returned JSON object contains event names correctly, for example,

Note the title values. Well, this is how the calendar actually appears (event start date is 28th April at 00:00):

Note the 4a text that is added before the event name. Why is that and how can I get rid of it?

Cristián Ormazábal Cristián Ormazábal · Accepted Answer · 2021-04-29T14:30:01

That text before the event title is the event's time formatted according to the plugin configuration. By default it has values for each locale. In your code you specify 'es'. The '4a' is the representation of 4 am. The timeFormat option lets you modify this. For example,

timeFormat: 'H:mm'

Changes the am/pm format to a 24 hour display format and always show the minutes part. Please see the timeFormat option docs for more details.

Strange text is added to the event title in fullcalendar plugin

1 Answers