universal-datepicker
Version:
Pure 8kb Vanilla Javascript plug and play datepicker
74 lines (60 loc) • 1.01 kB
CSS
#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;
}