day boxes missing

The screenshot below shows what I’m seeing. When I inspect the DOM I see that the calendar is rendered by a table element. It has a thead, but no tbody where I expected to see the boxes for each day in the month. Is there something more I need to do than is shown in the getting started instructions to get those to appear?

I have the following plugins installed: daygridPlugin, timegridPlugin, and interactionPlugin.

Here is my options object that I copied from the working example link:

  let options: CalendarOptions = {
    dateClick: handleDateClick,
    droppable: true,
    editable: true,
    events: [
      // initial event data
      {title: 'New Event', start: new Date()}
    ],
    initialView: 'dayGridMonth',
    plugins: [daygridPlugin, timegridPlugin, interactionPlugin],
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    height: '100%',
    weekends: true
  };

[vhscom]

I’d start by peeling back the plugins one by one as well as simplifying the config as much as possible until you find the point at which the issue begins to determine where the issue lays. There’s an 82% chance it’s a full calendar issue, a 10% chance of an integration issue and the rest I’ll leave to your imagination.

Also, when posting issues, please note it’s very difficult to debug without a minimum reproduction. If you have public code in a repository you could share demonstrating the issue, it’s likely you will receive help faster than if not provided.

[YogliB]

It seems like a CSS issue, height: 100% means that FC would take 100% of it’s parent’s height, and in the example the parent Div has the flex-grow property that sets its height.