Full Calendar 4.x for the Vaadin Framework 14+ not displaying in 24 hours format

Question

enter image description here I have created a FullCalendar, it is displaying the time in AM/PM. When I am adding the enteries to the calendar, I format the LocalDateTime to 24 hours format but the Calendar displays it in AM/PM format.

How I can display the Calendar entries in 24 hours format? My Formatter is defined as:

public static final DateTimeFormatter TWENTY_FOUR_HOURS_DATE_TIME_FORMATTER = 
    DateTimeFormatter.ofPattern("dd-MMM-yyyy HH:mm:ss", AppConstants.APP_LOCALE);

Entry entry = new Entry();
entry.setEditable(false);
entry.setTitle(game.getHomeClub() + " - " +game.getHomeTeam());

Instant now = Instant.now();

String t = LocalDateTime.of(game.getGameTime().toLocalDate(), game.getGameTime().toLocalTime())
.format(FormattingUtils.TWENTY_FOUR_HOURS_DATE_TIME_FORMATTER);

entry.setStart(calendar.getTimezone().convertToUTC(LocalDateTime.parse(t, FormattingUtils.TWENTY_FOUR_HOURS_DATE_TIME_FORMATTER)));    

entry.setEnd(game.getGameTime().plus(2, ChronoUnit.HOURS));

calendar = new MyFullCalendar();

calendar.setWeekNumbersVisible(true);
calendar.setNowIndicatorShown(false);
calendar.setNumberClickable(true);
calendar.changeView(CalendarViewImpl.AGENDA_WEEK);

calendar.setLocale(Locale.GERMANY);



private void createTimedEntry(FullCalendar calendar, String title, String start, int minutes, String color) {
    Entry entry = new Entry();
    setValues(calendar, entry, title, start, minutes, ChronoUnit.MINUTES, color);
    calendar.addEntry(entry);
}

Answer 1

You need to set the Locale.

@Route(value = "test")
class TestView extends Composite<Div> {

    TestView() {
        Locale defaultLocale = Locale.GERMANY
        FullCalendar calendar = FullCalendarBuilder.create().build()
        calendar.changeView(CalendarViewImpl.TIME_GRID_DAY)
        calendar.setSizeFull()

        RadioButtonGroup<Locale> localeSwitcher = new RadioButtonGroup()

        localeSwitcher.setItems([defaultLocale, Locale.US])
        localeSwitcher.addValueChangeListener({ ev ->
            calendar.setLocale(localeSwitcher.value)
        })
        localeSwitcher.setValue(defaultLocale)
        VerticalLayout layout = new VerticalLayout(localeSwitcher, calendar)
        layout.setSizeFull()

        content.add(layout)
    }
}

Code (Groovy) above produces following calendar for German Locale:

and this for US Locale:

Answer 2

I know, the question is a bit old, but this answer may help anyone who is still searchting for an answer :)

Regardless of any i18n settings, you may use initial options on the server side to modifiy the event time format.

JsonObject initialOptions = Json.createObject();
JsonObject eventTimeFormat = Json.createObject();
//{ hour: 'numeric', minute: '2-digit', timeZoneName: 'short' }
eventTimeFormat.put("hour", "2-digit");
eventTimeFormat.put("minute", "2-digit");
eventTimeFormat.put("meridiem", false);
eventTimeFormat.put("hour12", false);
initialOptions.put("eventTimeFormat", eventTimeFormat);

FullCalendar calendar = FullCalendarBuilder.create()
        .withInitialOptions(defaultInitialOptions)
        // ...
        .build();
      

Any initial options you can use you may obtain from the native library docs: https://fullcalendar.io/docs/eventTimeFormat (and other pages)