Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
91 lines (88 sloc) 2.4 KB
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Booking.js single instance example</title>
<style type="text/css">
body {
background-color: #E6E6E6;
max-width: 700px;
margin: 0 auto;
.buttons {
padding: 30px;
font-family: Helvetica, arial, sans-serif;
text-align: center;
.button {
display: inline-block;
width: 280px;
margin-bottom: 15px;
padding: 25px 35px;
background-color: white;
border-radius: 4px;
text-decoration: none;
box-shadow: 0px 3px 20px rgba(0,0,0,0.07);
transition: box-shadow 0.5s ease;
text-align: left;
.button--selected {
box-shadow: 0px 3px 30px rgba(0,0,0,0.20);
.button:hover .button__title,
.button--selected .button__title {
color: #2e5bec;
.button__title {
color: #000;
font-size: 19px;
line-height: 27px;
.button__duration {
float: right;
color: #999;
line-height: 27px;
<div class="buttons">
<a href="#" class="button" data-duration="1 hour">
<span class="button__title">Haircut and dyeing</span>
<span class="button__duration">1 hour</span>
<a href="#" class="button" data-duration="2 hours">
<span class="button__title">The full monty</span>
<span class="button__duration">2 hours</span>
<div id="bookingjs"></div>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="../dist/booking.js"></script>
<script type="text/javascript">
// register event hooks to buttons
$('.button').click(function(e) {
var button = $(this);
var allButtons = $('.button');
var buttonDuration = button.attr('data-duration')
// initialize booking.js with passed settings
function initalizeWidget(duration) {
var widget = new TimekitBooking();
app_key: 'live_widget_key_yYXHsUurvCUctNYflzGDMqEJo6mol0Yo',
resources: [
availability: {
length: duration