Full Calendar

Full Calendar

/*
for css vars only.
these values are automatically known in all stylesheets.
the :root statement itself is only included in the common stylesheet.
this file is not processed by postcss when imported into the postcss-custom-properties plugin,
so only write standard css!

NOTE: for old browsers, will need to restart watcher after changing a variable
*/

:root {
  --fc-small-font-size: var(--text-sm);
  --fc-page-bg-color: var(--color-background);
  --fc-neutral-bg-color: var(--color-muted);
  --fc-neutral-text-color: var(--color-foreground);
  --fc-border-color: var(--color-border);

  --fc-button-text-color: var(--color-foreground);
  --fc-button-bg-color: var(--color-background);
  --fc-button-border-color: var(--color-input);
  --fc-button-hover-bg-color: var(--color-accent);
  --fc-button-hover-border-color: var(--color-input);
  --fc-button-active-bg-color: var(--color-accent);
  --fc-button-active-border-color: var(--color-input);

  --fc-event-bg-color: var(--color-primary);
  --fc-event-border-color: var(--color-input);
  --fc-event-text-color: var(--color-primary-foreground);
  --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25);

  --fc-more-link-bg-color: #d0d0d0;
  --fc-more-link-text-color: inherit;

  --fc-event-resizer-thickness: 8px;
  --fc-event-resizer-dot-total-width: 8px;
  --fc-event-resizer-dot-border-width: 1px;

  --fc-non-business-color: rgba(215, 215, 215, 0.3);
  --fc-bg-event-color: rgb(143, 223, 130);
  --fc-bg-event-opacity: 0.3;
  --fc-highlight-color: --alpha(var(--colors-primary) / 10%);
  --fc-today-bg-color: --alpha(var(--colors-primary) / 10%);
  --fc-now-indicator-color: red;

  --fc-list-event-hover-bg-color: --alpha(var(--colors-primary) / 10%);
}

/* Toolbar buttons */
.fc {
  .fc-button {
    display: inline-flex;
    min-width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    text-transform: capitalize;

    .fc-icon {
      font-size: var(--text-sm);
      line-height: 1;
    }
  }
  .fc-button-primary {
    z-index: 10;

    &:focus {
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ring) 50%, transparent);
    }

    &.fc-button-active {
      z-index: 10;

      &:focus {
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ring) 50%, transparent);
      }
    }
  }
}
/* Toolbar */
.fc .fc-toolbar {
  display: grid;
  gap: calc(var(--spacing) * 3);

  @media (width >= 48rem) {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .fc-toolbar-chunk + .fc-toolbar-title {
    order: 1;

    @media (width >= 48rem) {
      order: 0;
    }
  }
}
/* Toolbar title */
.fc .fc-toolbar-title {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.025em;
}
/* Calendar header cell */
.fc .fc-col-header-cell-cushion,
.fc .fc-timegrid-slot-label-cushion,
.fc .fc-timegrid-axis-cushion {
  font-size: var(--text-base);
  line-height: calc(var(--spacing) * 7);
  font-weight: var(--font-weight-semibold);
}
/* Calendar: month day number */
.fc .fc-daygrid-day-number {
  cursor: pointer;
  font-size: var(--text-base);
  line-height: calc(var(--spacing) * 7);
  font-weight: var(--font-weight-medium);
}
.fc .fc-daygrid-month-start {
  font-size: var(--text-lg);
  line-height: calc(var(--spacing) * 7);
  font-weight: var(--font-weight-semibold);
}
/* List text */
.fc-list-day-text,
.fc-list-day-side-text {
  font-size: var(--text-base);
  line-height: calc(var(--spacing) * 7);
  font-weight: var(--font-weight-semibold);
}
.fc-h-event .fc-event-main-frame {
  align-items: center;
}
.fc .fc-list-event-time,
.fc .fc-event-time {
  vertical-align: middle;
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--font-weight-normal);
}
.fc .fc-event-time {
  margin-right: calc(var(--spacing) * 2);
}

.fc .fc-list-event-title {
  vertical-align: middle;
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
}

/* Event inside month view */
.fc .fc-daygrid-event {
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
}
.fc .fc-h-event .fc-event-main {
  padding-inline: calc(var(--spacing) * 1);
}
/* MultiMonth */
.fc .fc-multimonth-multicol .fc-daygrid-more-link {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  font-size: 10px;
  line-height: calc(var(--spacing) * 4);
  color: var(--color-primary-foreground);
}

/* Mulimonth popup */
.fc-theme-standard .fc-popover {
  border-radius: var(--radius-md);
}

.fc-popover-header {
  padding-inline: calc(var(--spacing) * 3);

  .fc-popover-title {
    font-size: var(--text-base);
    line-height: calc(var(--spacing) * 10);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.025em;
  }
}