Description: I'm trying to customize the calendar of my app using FullCalendar -- particularly to make the table borders vanish, to center the day within the cell and let it have a circular white background. But I can't seem to get rid of the event content box below it, or scale the calendar properly so there wouldn't be scroll bars. I tried adding css properties onto globals.css, but that didn't work. I think each component is supposed to handle its own styling.

I tried to find out which property values I could customize. I can set the dayCellClassNames and dayCellContent, but the result is as you see above.

const renderDayCellContent = () => {
    return (
      <div className="bg-black w-full h-full">
        <span className="font-bold text-white">Day Cell</span>
      </div>
    );
  };

function renderEventContent(eventInfo) {
    return (
      <>
        {/* <b>{eventInfo.event}</b> */}
        <i className="text-green-500">{eventInfo.event.title}</i>
      </>
    );
  }
<FullCalendar
            plugins={[dayGridPlugin, interactionPlugin]}
            initialView="dayGridMonth"
            weekends={true}
            aspectRatio={1.5}
            // events={events}
            selectable={true}
            select={handleDateSelect}
            themeSystem="standard"
            headerToolbar={{
              start: "title",
            }}
            
            dayCellClassNames={"bg-black text-[#525455] w-8 h-8"}
            eventClassNames={"bg-black text-[#525455] w-8 h-8"}
            viewClassNames={"bg-opacity-0 text-white"}
            dayCellContent={renderDayCellContent}
            contentHeight={270}
            eventContent={renderEventContent}
          />

If you have any idea on what I'm probably doing wrong, or a source that discusses the calendar components handling their own customization, please share.

Description: I'm trying to customize the calendar of my app using FullCalendar -- particularly to make the table borders vanish, to center the day within the cell and let it have a circular white background. But I can't seem to get rid of the event content box below it, or scale the calendar properly so there wouldn't be scroll bars. I tried adding css properties onto globals.css, but that didn't work. I think each component is supposed to handle its own styling.

I tried to find out which property values I could customize. I can set the dayCellClassNames and dayCellContent, but the result is as you see above.

const renderDayCellContent = () => {
    return (
      <div className="bg-black w-full h-full">
        <span className="font-bold text-white">Day Cell</span>
      </div>
    );
  };

function renderEventContent(eventInfo) {
    return (
      <>
        {/* <b>{eventInfo.event}</b> */}
        <i className="text-green-500">{eventInfo.event.title}</i>
      </>
    );
  }
<FullCalendar
            plugins={[dayGridPlugin, interactionPlugin]}
            initialView="dayGridMonth"
            weekends={true}
            aspectRatio={1.5}
            // events={events}
            selectable={true}
            select={handleDateSelect}
            themeSystem="standard"
            headerToolbar={{
              start: "title",
            }}
            
            dayCellClassNames={"bg-black text-[#525455] w-8 h-8"}
            eventClassNames={"bg-black text-[#525455] w-8 h-8"}
            viewClassNames={"bg-opacity-0 text-white"}
            dayCellContent={renderDayCellContent}
            contentHeight={270}
            eventContent={renderEventContent}
          />

If you have any idea on what I'm probably doing wrong, or a source that discusses the calendar components handling their own customization, please share.

• typescript
• next.js
• tailwind-css
• fullcalendar

1 Answer 1

I created a quick example using only FullCalendar and TailwindCSS, without React, to modify the appropriate classes. Among them, I implemented:

• Removing borders (.fc-scrollgrid, .fc-theme-standard td, .fc-theme-standard th, .fc-col-header-cell, .fc-daygrid-day)
• Smaller sizing (#calendar)
• Different background and font colors (#calendar, .fc-col-header-cell, .fc-daygrid-day)
• Hiding the yellow 'today' highlight (.fc-daygrid-day.fc-day-today)
• Adding a white background 'today' highlight (.fc-daygrid-day-top)
• Centering the dates (.fc-daygrid-day-top)
• Better padding and rounding (.fc-toolbar)
• Rounding the first and last selected dates (.fc-highlight)

From your provided reproduction, I couldn't figure out which 'scrollbar' needs to be removed. I don't have a scrollbar. It's likely that the div you're placing the calendar in doesn't allow overflow.

document.addEventListener('DOMContentLoaded', function () {
  const calendarEl = document.getElementById('calendar');

  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    weekends: true,
    selectable: true,
    // Customizing the toolbar: title on the left, prev/next buttons on the right
    headerToolbar: {
      left: 'title',
      right: 'prev,next'
    },
    dayCellContent: function (arg) {
      return arg.dayNumberText;
    },
    eventContent: function () {
      return '';
    }
  });

  calendar.render();
});

body {
  padding: 10px;
  background-color: #444;
}
.fc-license-message {
  display: none !important;
}

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
<style type="text/tailwindcss">
/* Resizing */
#calendar {
  width: 400px;
  @apply py-3 rounded-lg;
}

/* Removing borders */
.fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th,
.fc-col-header-cell,
.fc-daygrid-day {
  @apply !border-none;
}
.fc-col-header-cell,
.fc-daygrid-day {
  @apply !w-2 !h-2;
}

/* Centering the date; for this, it's necessary to hide the events div (which would appear under the day, but doesn't fit there) */
.fc-event,
.fc-daygrid-day-events {
  @apply hidden;
}
.fc-daygrid-day-top {
  @apply absolute top-1/2 left-1/2 -translate-1/2 flex items-center justify-center w-10 h-10;
}

/* Removing the yellow background from today */
.fc-daygrid-day.fc-day-today {
  @apply !bg-transparent;
}
.fc-daygrid-day.fc-day-today .fc-daygrid-day-top {
  @apply text-black bg-white rounded-full;
}

/* Rounding the first and last of the selected dates */
.fc-daygrid-day-bg > .fc-daygrid-bg-harness > .fc-highlight {
  @apply first:rounded-tl-lg first:rounded-bl-lg last:rounded-tr-lg last:rounded-br-lg;
}

/* Header formatting */
.fc-toolbar {
  @apply px-3;
}
.fc-button {
  @apply !border-none !bg-transparent;
}

/* Fixing font colors */
.fc-col-header-cell {
  @apply text-stone-300 font-medium;
}
.fc-daygrid-day {
  @apply text-stone-400;
}
</style>
<div id='calendar' class="bg-stone-900 text-white"></div>