JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="booked-calendar-wrap large" style="height: 746px;">
<table class="booked-calendar">
<thead>
<tr>
<th colspan="8">
<a href="#" data-goto="2015-06-01" class="page-left"><i class="fa fa-arrow-left"></i></a>
<span class="monthName">
CURRENT WEEK</span>
<a href="#" data-goto="2015-06-01" class="page-right"><i class="fa fa-arrow-right"></i></a>
</th>
</tr>
<tr class="days">
<th>Hour</th>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<tr class="week">
<td class="blur" style="height: 106.4px;"><span class="date" style="line-height: 106.4px;">
<span class="number">12:00</span></span></td>
<td class="blur" style="height: 106.4px;"><span class="date" style="line-height: 106.4px;">
<span class="number">26</span></span></td>
<td class="blur" style="height: 106.4px;"><span class="date" style="line-height: 106.4px;">
<span class="number">27</span></span></td>
<td class="blur" style="height: 106.4px;"><span class="date" style="line-height: 106.4px;">
<span class="number">28</span></span></td>
<td class="blur" style="height: 106.4px;"><span class="date" style="line-height: 106.4px;">
<span class="number">29</span></span></td>
<td class="blur" style="height: 106.4px;"><span class="date" style="line-height: 106.4px;">
<span class="number">30</span></span></td>
<td class="prev-date" style="height:...
CSS
/* Light Color */
body #booked-profile-page input[type=submit].button-primary:hover,
body table.booked-calendar input[type=submit].button-primary:hover,
body .booked-modal input[type=submit].button-primary:hover,
body table.booked-calendar thead,
body table.booked-calendar thead th,
body table.booked-calendar .booked-appt-list .timeslot .timeslot-people button:hover,
body #booked-profile-page .booked-profile-appt-list .appt-block .google-cal-button,
body #booked-profile-page .booked-profile-header
{ background:#44535b !important; }
body #booked-profile-page input[type=submit].button-primary:hover,
body table.booked-calendar input[type=submit].button-primary:hover,
body .booked-modal input[type=submit].button-primary:hover,
body table.booked-calendar th,
body table.booked-calendar .booked-appt-list .timeslot .timeslot-people button:hover,
body #booked-profile-page .booked-profile-appt-list .appt-block .google-cal-button,
body #booked-profile-page .booked-profile-header
{ border-color:#44535b !important; }
/* Dark Color */
body table.booked-calendar tr.days,
body table.booked-calendar tr.days th
{ background:#2d3a40 !important; }
body table.booked-calendar tr.days th
{ border-color:#2d3a40 !important; }
/* Primary Button Color */
/*body #booked-profile-page input[type=submit].button-primary,
body table.booked-calendar input[type=submit].button-primary,
body .booked-modal input[type=submit].button-primary,
body table.booked-calendar .booked-appt-list .timeslot .timeslot-people button,
body #booked-profile-page .booked-profile-appt-list .appt-block.approved .status-block
{ background:#56c477; }
body #booked-profile-page input[type=submit].button-primary,
body table.booked-calendar input[type=submit].button-primary,
body .booked-modal input[type=submit].button-primary,
body table.booked-calendar .booked-appt-list .timeslot .timeslot-people button
{ border-color:#56c477; }*/
/* SAVING STATES, ETC */
/*body .calendarSavingState,
body #data-ajax-url {...
JavaScript
$(document).ready(function(){
$('.booked-calendar-wrap').on('click', 'tr.week td', function(e) {
e.preventDefault();
var $thisDate = $(this),
$thisRow = $thisDate.parent(),
date = $thisDate.attr('data-date'),
booked_ajaxURL = $('#data-ajax-url').html(),
calendar_id = $thisDate.parents('table.booked-calendar').attr('data-calendar-id'),
colspanSetting = $thisRow.find('td').length;
if ($thisDate.hasClass('blur') || $thisDate.hasClass('booked') || $thisDate.hasClass('prev-date')){
// Do nothing.
} else if ($thisDate.hasClass('active')){
$thisDate.removeClass('active');
$('tr.entryBlock').remove();
} else {
$('tr.week td').removeClass('active');
$thisDate.addClass('active');
$('tr.entryBlock').remove();
$thisRow.after('<tr class="entryBlock loading"><td colspan="'+colspanSetting+'"></td></tr>');
$('tr.entryBlock').find('td').spin('booked');
booked_load_calendar_date_booking_options = {'load':'calendar_date','date':date,'calendar_id':calendar_id};
/*
* allow other script to apply their modification before loading the booking options
* $(document).on("booked-before-loading-calendar-booking-options", function(event, params) { code goes here });
*/
$(document).trigger("booked-before-loading-calendar-booking-options");
$('tr.entryBlock').find('td').load(booked_ajaxURL, booked_load_calendar_date_booking_options, function(){
$('tr.entryBlock').removeClass('loading');
$('tr.entryBlock').find('.booked-appt-list').fadeIn(300);
$('tr.entryBlock').find('.booked-appt-list').addClass('shown');
adjust_calendar_boxes();
});
}
adjust_calendar_boxes();
return false;
});
var TodayDate = new Date();
var d = TodayDate.getDate();
$(".week .number").each(function() {
console.log($(this).text(), d,...