Calendar.css
.calendar {
display:block;
padding:8px;
border:2px solid black;
}
.calendar .head {
display:block;
padding:8px;
border-bottom:2px solid black;
}
.calendar .head h1 {
text-align:center;
}
.calendar .button {
text-decoration:none;
color:black;
padding:8px;
background:lightblue;
border-radius:8px;
}
.calendar .head .controls {
}
.calendar .head .controls .previous {
display:inline-block;
background:lightblue;
border-radius:8px;
padding:8px;
color:black;
text-decoration:none;
text-align:left;
}
.calendar .head .controls .next {
display:inline-block;
background:lightblue;
border-radius:8px;
padding:8px;
color:black;
text-decoration:none;
float:right;
}
.calendar .dayNames {
display:flex;
}
.calendar .head .dayNames span {
flex: 1 1 0%;
text-align:center;
}
.calendar .week {
display:flex;
border-left:1px solid black;
border-bottom: 2px solid black;
border-collapse:collapse;
}
.calendar .week .day {
display:inline-block;
padding:4px;
min-height:8em;
min-width:4em;
flex:1 1 0%;
border-right:1px solid black;
}
.calendar .week .day .dayInfo {
border-radius:8px;
padding:2px;
margin:2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.calendar .week .day .dayInfo .today {
background:green;
display:block;
border-radius:8px;
padding:2px;
}
.calendar .week .day .ofMonth{
text-align:right;
}
.calendar .week .day .info {
}