FullCalendar add-on not showing grid

Flow
1

I just started to use the FC add-on but cannot view anything but the header of the calendar. I have tried to simple it down to the first part bit of the code examples only i.e.

// Create a new calendar instance and attach it to our layout
FullCalendar calendar = FullCalendarBuilder.create().build();
container.add(calendar);
container.setFlexGrow(1, calendar);

// Create a initial sample entry
Entry entry = new Entry();
entry.setTitle("Some event");
entry.setStart(LocalDate.now().withDayOfMonth(3).atTime(10, 0));
entry.setEnd(entry.getStart().plusHours(2));
entry.setColor("#ff3333");

calendar.add(entry);

where my container is a VerticalLayout - but this does not either show anything but the header.
Using Vaadin 13.0.8 and the FC version 1.9.2

17790801.png

2

Hi Johan,

I’ve added my FullCanendar to a Div. I’ve setSizeFull() on the Calendar component and set the Div to display:flex in css.

display: flex;
flex-direction: column;
height: 100%;

I get all of the full calendar in all browsers then :slight_smile:

Stuart.

3

Was hoping to do this all Java, tried FlexLayout but still doesn’t work.

		FlexLayout retLayout = new FlexLayout();
        FullCalendar calendar = FullCalendarBuilder.create().build();
        calendar.setSizeFull();
        Entry entry = new Entry();
        entry.setTitle("Some event");
        entry.setStart(LocalDateTime.now());
        entry.setEnd(entry.getStart().plusHours(2));
        entry.setColor("#ff3333");
        calendar.addEntry(entry);

        retLayout.add(calendar);
        retLayout.setWrapMode(FlexLayout.WrapMode.WRAP);
        retLayout.expand(calendar);
        retLayout.setFlexGrow(1, calendar);
        retLayout.setHeight("100%");

I am using the Lumo theme, could that have something to do with it?

4

What about…

Div div = new Div();
div.getElement().getStyle().set("display", flex);
div.getElement().getStyle().set("flex-direction", "column");
div.getElement().getStyle().set("height", "100%");

// then add the Calendar to the Div.

I use Lumo too.

S.

5

Stuart Robinson:
What about…

Div div = new Div();
div.getElement().getStyle().set("display", flex);
div.getElement().getStyle().set("flex-direction", "column");
div.getElement().getStyle().set("height", "100%");

// then add the Calendar to the Div.

I use Lumo too.

S.

Still only seeing the header of the calendar.
Div layout is in a route - would the top layer RouterLayout component need to have these styles as well then?

6

Update, tested the above. Setting all parent containers to Divs with these style settings did work.