full-calendar.pcss

:root {
  --fc-button-bg-color: #000;
  --fc-button-border-color: #000;
  --fc-button-hover-bg-color: #fec900;
  --fc-button-hover-border-color: #fec900;
  --fc-button-active-bg-color: #fec900;
  --fc-button-active-border-color: #fec900;
  --fc-event-bg-color: #fec900;
  --fc-event-border-color: #fec900;
  --fc-event-text-color: #000;
  --fc-border-color: #000;
  --fc-today-bg-color: #000;
  --fc-event-dot-color: #000;
}

.fc-col-header {
  width: 100%!important;
}

/* Don't underline only when there is no href attribute defined. */
.fc .fc-col-header-cell-cushion:not([href]),
.fc .fc-daygrid-day-number:not([href]) {
  @apply hover:no-underline;
}

.fc .fc-col-header-cell {
  @apply bg-black p-3 font-alt text-white text-xl capitalize;
}

.fc .fc-button {
  @apply text-center rounded-full uppercase font-semibold text-sm px-5 py-2 bg-black text-white text-lg;
  @apply hover:no-underline;
}

.fc .fc-button:hover:not(:disabled),
.fc .fc-button:active:not(:disabled){
  @apply text-black;
}

.fc .fc-event {
  @apply rounded-none p-1.5 border-none text-base cursor-pointer;

  background-color: var(--fc-event-bg-color);
  border: 1px solid var(--fc-event-border-color);
  color: var(--fc-event-text-color);
}

.fc-header-toolbar {
  @apply !items-start;
  @apply xl:!items-center;
}

.fc .fc-toolbar-title,
.fc .fc-today-button {
  @apply capitalize font-condensed;
}

.fc-toolbar-chunk {
  @apply flex flex-wrap-reverse justify-end gap-2;
}

.fc .fc-daygrid-day-number {
  @apply text-black;
  @apply xl:font-alt xl:text-3xl;
}

.fc-daygrid-body, .fc-scrollgrid-sync-table {
  @apply !w-full;
  @apply xl:w-[unset];
}

.fc .fc-day-today .fc-daygrid-day-number {
  @apply text-white;
}

.fc-daygrid-event-dot {
  border: calc(var(--fc-daygrid-event-dot-width)/2) solid var(--fc-event-dot-color);
}

.fc .fc-scroller-harness {
  overflow: visible;
}