Ideas for a simple booking calendar

In this example below you will see how to do a Ideas for a simple booking calendar with some HTML / CSS and Javascript

Based on the WP Simple Booking Calendar plugin. For a friend's birthday party business.

Thumbnail
This awesome code was written by katydecorah, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright katydecorah ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Ideas for a simple booking calendar</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='css/23c0352cf1813420a04865d33.css'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url(https://fonts.googleapis.com/css?family=Rosarivo);
body {
  background: #F2F1ED;
  font-family: "Rosarivo";
  font-size: 16px;
  line-height: 1.618;
}

h3 {
  font-size: 2em;
  text-align: center;
  font-weight: 400;
  margin: 0 0 0.2em;
}

p {
  margin: 0 0 1em;
}

.sbc-calendar-wrapper {
  padding: 2em;
  border-radius: 0.1em;
  max-width: 20em;
}
.sbc-calendar-wrapper:before {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.4em solid transparent;
  border-bottom: 0em solid transparent;
  border-left: 0.7em solid #9c9577;
  position: absolute;
  right: 0;
  top: -0.3em;
}

.sbc-status {
  display: block;
  float: left;
  width: 2.65em;
  height: 2.65em;
  font-size: 0.6em;
}

.sbc-status-Available {
  background-color: #83b8bc;
  position: relative;
}

.sbc-status-Booked {
  background-color: #c7c3b2;
  color: #a7a085;
}

.sbc-status-Morning {
  background-color: #bdb7a3;
  position: relative;
}
.sbc-status-Morning:before {
  width: 0;
  height: 0;
  border-bottom: 2.65em solid transparent;
  border-top: 0em solid transparent;
  border-left: 2.65em solid #f2b3d1;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

.sbc-status-Afternoon {
  background-color: #bdb7a3;
  position: relative;
}
.sbc-status-Afternoon:before {
  width: 0;
  height: 0;
  border-top: 2.65em solid transparent;
  border-bottom: 0em solid transparent;
  border-right: 2.65em solid #d16ea2;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.sbc-calendar-table {
  border: 0;
  border-collapse: separate;
  border-spacing: 0.1em;
  table-layout: fixed;
  margin: 0;
  width: 100%;
  padding: 0em 0.5em;
}
.sbc-calendar-table span {
  position: relative;
  z-index: 1;
  cursor: help;
}
.sbc-calendar-table th, .sbc-calendar-table td {
  font-size: 0.9em;
  text-align: center;
  padding: 0.9em 0;
  width: 1em;
  line-height: 1em;
  vertical-align: middle;
  border: 0;
  border-radius: 0.2em;
}

.sbc-key p {
  font-size: 0.8em;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div id="sbc-calendar-wrapper" class="sbc-calendar-wrapper">
  <h3>June 2013</h3>
  <div id="sbc-calendar" class="sbc-calendar">
    <div class="sbc-calendar-month">
      <table class="sbc-calendar-table">
        <thead>
          <tr>
            <th scope="col">S</th>
            <th scope="col">M</th>
            <th scope="col">T</th>
            <th scope="col">W</th>
            <th scope="col">T</th>
            <th scope="col">F</th>
            <th scope="col">S</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="3" class="sbc-key">
              <p><span class="sbc-status-Available sbc-status"></span> Available</p>
              <p><span class="sbc-status-Booked sbc-status"></span> Booked</p>
              
            </td>
            <td colspan="4" class="sbc-key">
              <p><span class="sbc-status-Morning sbc-status"></span> Morning Availabile</p>
              <p><span class="sbc-status-Afternoon sbc-status"></span> Afternoon Available</p>
            </td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td colspan="6" class="pad">&nbsp;</td>
            
            
            <td class="sbc-day1 sbc-status-Morning ">
              <span data-rel="tooltip" title="" data-original-title="Morning">1</span>
            </td>
            
          </tr>
          <tr>
            
            <td class="sbc-day2 sbc-status-Booked ">
              <span data-rel="tooltip" title="" data-original-title="Booked">2</span>
            </td>
            
            
            <td class="sbc-day3 sbc-status-Afternoon ">
              <span data-rel="tooltip" title="" data-original-title="Afternoon">3</span>
            </td>
            
            
            <td class="sbc-day4 sbc-status-Afternoon ">
              <span data-rel="tooltip" title="" data-original-title="Afternoon">4</span>
            </td>
            
            
            <td class="sbc-day5 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">5</span>
            </td>
            
            
            <td class="sbc-day6 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">6</span>
            </td>
            
            
            <td class="sbc-day7 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">7</span>
            </td>
            
            
            <td class="sbc-day8 sbc-status-Booked ">
              <span data-rel="tooltip" title="" data-original-title="Booked">8</span>
            </td>
            
          </tr>
          <tr>
            
            <td class="sbc-day9 sbc-status-Booked ">
              <span data-rel="tooltip" title="" data-original-title="Booked">9</span>
            </td>
            
            
            <td class="sbc-day10 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">10</span>
            </td>
            
            
            <td class="sbc-day11 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">11</span>
            </td>
            
            
            <td class="sbc-day12 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">12</span>
            </td>
            
            
            <td class="sbc-day13 sbc-status-Available  sbc-today">
              <span data-rel="tooltip" title="" data-original-title="Available">13</span>
            </td>
            
            
            <td class="sbc-day14 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">14</span>
            </td>
            
            
            <td class="sbc-day15 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">15</span>
            </td>
            
          </tr>
          <tr>
            
            <td class="sbc-day16 sbc-status-Booked ">
              <span data-rel="tooltip" title="" data-original-title="Booked">16</span>
            </td>
            
            
            <td class="sbc-day17 sbc-status-Booked ">
              <span data-rel="tooltip" title="" data-original-title="Booked">17</span>
            </td>
            
            
            <td class="sbc-day18 sbc-status-Afternoon ">
              <span data-rel="tooltip" title="" data-original-title="Afternoon">18</span>
            </td>
            
            
            <td class="sbc-day19 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">19</span>
            </td>
            
            
            <td class="sbc-day20 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">20</span>
            </td>
            
            
            <td class="sbc-day21 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">21</span>
            </td>
            
            
            <td class="sbc-day22 sbc-status-Booked ">
              <span data-rel="tooltip" title="" data-original-title="Booked">22</span>
            </td>
            
          </tr>
          <tr>
            
            <td class="sbc-day23 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">23</span>
            </td>
            
            
            <td class="sbc-day24 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">24</span>
            </td>
            
            
            <td class="sbc-day25 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">25</span>
            </td>
            
            
            <td class="sbc-day26 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">26</span>
            </td>
            
            
            <td class="sbc-day27 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">27</span>
            </td>
            
            
            <td class="sbc-day28 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">28</span>
            </td>
            
            
            <td class="sbc-day29 sbc-status-Available ">
              <span data-rel="tooltip" title="" data-original-title="Available">29</span>
            </td>
            
          </tr>
          <tr>
            
            <td class="sbc-day30 sbc-status-Morning ">
              <span data-rel="tooltip" title="" data-original-title="Morning">30</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/katydecorah/ideas-for-a-simple-booking-calendar-fLdJz */
@import url(https://fonts.googleapis.com/css?family=Rosarivo);
body {
  background: #F2F1ED;
  font-family: "Rosarivo";
  font-size: 16px;
  line-height: 1.618;
}

h3 {
  font-size: 2em;
  text-align: center;
  font-weight: 400;
  margin: 0 0 0.2em;
}

p {
  margin: 0 0 1em;
}

.sbc-calendar-wrapper {
  padding: 2em;
  border-radius: 0.1em;
  max-width: 20em;
}
.sbc-calendar-wrapper:before {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.4em solid transparent;
  border-bottom: 0em solid transparent;
  border-left: 0.7em solid #9c9577;
  position: absolute;
  right: 0;
  top: -0.3em;
}

.sbc-status {
  display: block;
  float: left;
  width: 2.65em;
  height: 2.65em;
  font-size: 0.6em;
}

.sbc-status-Available {
  background-color: #83b8bc;
  position: relative;
}

.sbc-status-Booked {
  background-color: #c7c3b2;
  color: #a7a085;
}

.sbc-status-Morning {
  background-color: #bdb7a3;
  position: relative;
}
.sbc-status-Morning:before {
  width: 0;
  height: 0;
  border-bottom: 2.65em solid transparent;
  border-top: 0em solid transparent;
  border-left: 2.65em solid #f2b3d1;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

.sbc-status-Afternoon {
  background-color: #bdb7a3;
  position: relative;
}
.sbc-status-Afternoon:before {
  width: 0;
  height: 0;
  border-top: 2.65em solid transparent;
  border-bottom: 0em solid transparent;
  border-right: 2.65em solid #d16ea2;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.sbc-calendar-table {
  border: 0;
  border-collapse: separate;
  border-spacing: 0.1em;
  table-layout: fixed;
  margin: 0;
  width: 100%;
  padding: 0em 0.5em;
}
.sbc-calendar-table span {
  position: relative;
  z-index: 1;
  cursor: help;
}
.sbc-calendar-table th, .sbc-calendar-table td {
  font-size: 0.9em;
  text-align: center;
  padding: 0.9em 0;
  width: 1em;
  line-height: 1em;
  vertical-align: middle;
  border: 0;
  border-radius: 0.2em;
}

.sbc-key p {
  font-size: 0.8em;
}

Comments