universal-datepicker/build/bundle.css

Pure 8kb Vanilla Javascript plug and play datepicker

#calendar {
  width: 20em;
  height: 20em;
}

.calendar__wrapper--horizontal {
  display: flex;
}

.calendar__wrapper--vertical {
  max-height: 400px;
  overflow-y: scroll;
}

.calendar__weekday {
  margin-right: 3px;
}

.calendar__header {
  display: flex;
}

.calendar__arrow-wrapper {
  display: flex;
  justify-content: space-between;
}

.calendar__arrow--left {
  cursor: pointer;
}
.calendar__arrow--right {
  cursor: pointer;
}

.calendar__cell {
  cursor: pointer;
}

.calendar__cell--past,
.calendar__cell--disabled {
  cursor: default;
  text-decoration: line-through;
}

.calendar__cell--checkin {
  background: yellow;
}
.calendar__cell--checkin--mono {
  background: orange;
}

.calendar__cell--checkout {
  background: blueviolet;
}

.calendar__cell--range {
  background: salmon;
}

.calendar__cell--today {
  border: 1px solid black;
}

.left-arrow-icon {
  height: 20px;
  width: 20px;
  background-color: red;
}

.right-arrow-icon {
  height: 20px;
  width: 20px;
  background-color: red;
}