Taeluf.com

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 {
  
}