add booking status as calendar

styles/index.css

@@ -110,6 +110,64 @@
   @apply text-blue-700;
 }
 
+.Calendar-grid {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.Calendar-header {
+  height: 50px;
+  background: #333;
+  color: #fff;
+  text-align: center;
+  line-height: 50px;
+  display: flex;
+  font-size: 20px;
+  justify-content: space-between;
+}
+
+.Calendar-header button {
+  width: 50px;
+  font-size: 20px;
+  border: 0;
+  background: transparent;
+  color: #ddd;
+  cursor: pointer;
+}
+
+.Calendar-grid-item {
+  flex: 0 14.28571%;
+  text-align: center;
+  border-right: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.Calendar-grid-item--current {
+  font-weight: 700;
+}
+
+.Calendar-grid-item--booked {
+  @apply bg-red-300;
+}
+
+.Calendar-grid-item.nextMonth,
+.Calendar-grid-item.prevMonth {
+  color: #999;
+}
+
+.Calendar-grid-item:nth-child(7n + 1) {
+  border-left: 1px solid #ddd;
+}
+
+.Calendar-grid-item:nth-child(-n + 7) {
+  border-top: 1px solid #ddd;
+}
+
 /* Start purging... */
 @tailwind utilities;
 /* Stop purging. */