@fesjs/fes-design/es/calendar/style/index.css

fes-design for PC

.fes-calendar {
  display: flex;
  flex-direction: column;
  min-height: 500px;
}
.fes-calendar * {
  box-sizing: border-box;
}
.fes-calendar .fes-calendar-action-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--f-padding-middle);
}
.fes-calendar .fes-calendar-panel {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  font-size: var(--f-font-size-base);
  border: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-split);
  border-radius: var(--f-border-radius-base);
}
.fes-calendar .fes-calendar-panel > .fes-calendar-week-name-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-split);
}
.fes-calendar .fes-calendar-panel > .fes-calendar-week-name-header .fes-calendar-week-name-header-cell {
  padding: var(--f-padding-xsmall);
  border-right: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-split);
}
.fes-calendar .fes-calendar-panel > .fes-calendar-week-name-header .fes-calendar-week-name-header-cell:last-child {
  border-right: none;
}
.fes-calendar .fes-calendar-panel > .fes-calendar-week-name-header .fes-calendar-week-name-header-cell > .fes-calendar-week-name-header-cell-main-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.fes-calendar .fes-calendar-panel > .fes-calendar-date-panel,
.fes-calendar .fes-calendar-panel > .fes-calendar-month-panel {
  display: grid;
  flex-grow: 1;
}
.fes-calendar .fes-calendar-panel > .fes-calendar-date-panel > .fes-calendar-panel-cell,
.fes-calendar .fes-calendar-panel > .fes-calendar-month-panel > .fes-calendar-panel-cell {
  padding: var(--f-padding-xsmall);
  border-right: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-split);
  border-bottom: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-split);
  cursor: pointer;
}
.fes-calendar .fes-calendar-panel > .fes-calendar-date-panel > .fes-calendar-panel-cell > .fes-calendar-panel-cell-main-content,
.fes-calendar .fes-calendar-panel > .fes-calendar-month-panel > .fes-calendar-panel-cell > .fes-calendar-panel-cell-main-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--f-border-radius-base);
  transition: none 0.2s cubic-bezier(0.9, 0, 0.3, 0.7);
  transition-property: background, color;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.fes-calendar .fes-calendar-panel > .fes-calendar-date-panel > .fes-calendar-panel-cell:hover > .fes-calendar-panel-cell-main-content,
.fes-calendar .fes-calendar-panel > .fes-calendar-month-panel > .fes-calendar-panel-cell:hover > .fes-calendar-panel-cell-main-content {
  background-color: var(--f-hover-color-light);
}
.fes-calendar .fes-calendar-panel > .fes-calendar-date-panel > .fes-calendar-panel-cell.fes-calendar-panel-cell-today > .fes-calendar-panel-cell-main-content,
.fes-calendar .fes-calendar-panel > .fes-calendar-month-panel > .fes-calendar-panel-cell.fes-calendar-panel-cell-today > .fes-calendar-panel-cell-main-content {
  position: relative;
  color: var(--f-primary-color);
  background-color: var(--f-hover-color-light);
}
.fes-calendar .fes-calendar-panel > .fes-calendar-date-panel > .fes-calendar-panel-cell.fes-calendar-panel-cell-today > .fes-calendar-panel-cell-main-content::after,
.fes-calendar .fes-calendar-panel > .fes-calendar-month-panel > .fes-calendar-panel-cell.fes-calendar-panel-cell-today > .fes-calendar-panel-cell-main-content::after {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 3px;
  height: 3px;
  background-color: var(--f-primary-color);
  border-radius: 50%;
  content: '';
}
.fes-calendar .fes-calendar-panel > .fes-calendar-date-panel > .fes-calendar-panel-cell.fes-calendar-panel-cell-active > .fes-calendar-panel-cell-main-content,
.fes-calendar .fes-calendar-panel > .fes-calendar-month-panel > .fes-calendar-panel-cell.fes-calendar-panel-cell-active > .fes-calendar-panel-cell-main-content {
  color: var(--f-white) !important;
  background-color: var(--f-primary-color);
}
.fes-calendar .fes-calendar-panel > .fes-calendar-date-panel > .fes-calendar-panel-cell.fes-calendar-panel-cell-secondary:not(.fes-calendar-panel-cell-today) > .fes-calendar-panel-cell-main-content,
.fes-calendar .fes-calendar-panel > .fes-calendar-month-panel > .fes-calendar-panel-cell.fes-calendar-panel-cell-secondary:not(.fes-calendar-panel-cell-today) > .fes-calendar-panel-cell-main-content,
.fes-calendar .fes-calendar-panel > .fes-calendar-date-panel > .fes-calendar-panel-cell.fes-calendar-panel-cell-secondary:not(.fes-calendar-panel-cell-active) > .fes-calendar-panel-cell-main-content,
.fes-calendar .fes-calendar-panel > .fes-calendar-month-panel > .fes-calendar-panel-cell.fes-calendar-panel-cell-secondary:not(.fes-calendar-panel-cell-active) > .fes-calendar-panel-cell-main-content {
  color: var(--f-text-color-disabled);
}
.fes-calendar .fes-calendar-panel > .fes-calendar-date-panel {
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(7, 1fr);
}
.fes-calendar .fes-calendar-panel > .fes-calendar-date-panel > .fes-calendar-panel-cell:nth-child(7n) {
  border-right: unset;
}
.fes-calendar .fes-calendar-panel > .fes-calendar-date-panel > .fes-calendar-panel-cell:nth-child(n+36) {
  border-bottom: unset;
}
.fes-calendar .fes-calendar-panel > .fes-calendar-month-panel {
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
.fes-calendar .fes-calendar-panel > .fes-calendar-month-panel > .fes-calendar-panel-cell:nth-child(3n) {
  border-right: unset;
}
.fes-calendar .fes-calendar-panel > .fes-calendar-month-panel > .fes-calendar-panel-cell:nth-child(n+10) {
  border-bottom: unset;
}
.fes-calendar .fes-calendar-panel > .fes-calendar-month-panel > .fes-calendar-panel-cell > .fes-calendar-panel-cell-main-content {
  width: calc(24px * 2);
}
.fes-calendar.fes-calendar-without-split-line .fes-calendar-week-name-header-cell {
  border-color: transparent !important;
}
.fes-calendar.fes-calendar-without-split-line .fes-calendar-panel-cell {
  border-right: unset !important;
  border-bottom: unset !important;
}
.fes-calendar-navigator {
  display: flex;
  align-items: center;
}
.fes-calendar-navigator .fes-calendar-navigator-current-date {
  padding: 0 var(--f-padding-large);
  font-weight: 500;
}
.fes-calendar-navigator .fes-calendar-navigator-btn {
  color: var(--f-text-color-secondary);
  font-size: var(--f-font-size-base);
  cursor: pointer;
}
.fes-calendar-navigator .fes-calendar-navigator-btn:hover {
  color: var(--f-primary-color);
}