So I am finally getting around to polishing mybnb.
It's aspiring to be a user-friendly site-generator/booking-engine/manager for rental property owners.

First order of business, is the design of a calendar to display property
availability.

Code

<table class="calendar">
  
 Sun

 

 Mon

 

 Tue

 

 Wed

 

 Thu

 

 Fri

 

 Sat

 

 

  
 1

 

 2

 

 3

 

 4

 

 5

 

 6

 

 7

 

 

  
 8

 

 9

 

 10

 

    <td class="selected">11

 

 12

 

 13

 

 14

 

 

  
 15

 

 16

 

 17

 

 18

 

 19

 

 20

 

 21

 

 

  
 22

 

 23

 

 24

 

 25

 

 26

 

 27

 

 28

 

 

  
 29

 

 30

 

 31

 

    <td class="next-month">1

 

    <td class="next-month">2

 

    <td class="next-month">3

 

    <td class="next-month">4

 

/* https://color.adobe.com/Color-Theme-2-color-theme-7410278/edit/?copy=true&base=2&rule=Custom&selected=0&name=Copy%20of%20Color%20Theme%202&mode=rgb&rgbvalues=0.7764706015586853,0.7764706015586853,0.7764706015586853,0.529411792755127,0.5294117927551261,0.5254902243614197,0.2313725501298904,0.2313725501298896,0.2274509817361832,1,1,1,1,0.4470588266848227,0.1882352977991104&swatchOrder=0,1,2,3,4 */

table {
  background: #fff;
  border-collapse: collapse;
  color: #3B3B3A;
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  width: 100%;
}

th,
td {
  overflow: hidden;
  width: 60px;
}

th {
  background: #3B3B3A;
  color: #C6C6C6;
  height: 30px;
}

td {
  border: 1px solid #C6C6C6;
  color: #3B3B3A;
  line-height: 22px;
  text-align: center;
  height: 60px;
}

.next-month {
  background: #eee;
}

.selected {
  background: #FF7230;
  color: #fff;
  border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5) inset;
}