Customisation of Monthly Calendar Widgets

The Anytime Booking Monthly widgets are composed of three basic parts which each need to be copied and pasted into an existing HTML document, these parts are: HTML, CSS and JavaScript.

No changes are needed to the widget code in order to run the black theme, also referred to as the ‘Vanilla’ theme.

A Starter code example is available through the Anytime Booking customer admin system.

In order to properly integrate the widget into a website, it is important to place each part into the correct location within the HTML document.

The Starter code is:

<!doctype html>
<htmllang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” type=”text/css”
href=”https://negys.anytimebooking.eu/widgets/calendar/css/master.css”

</head>
<body>
<div id=”atb_calendar_container”>
<div id=”atb_anytime”data-url=”negys”data-category=”134″data-unit=”2636″data-months=”3″>
<span class=”no-js”>Sorry,this calendar requires javascript in order to work.</span>
</div>
</div>

<script>window.jQuery || document.write(‘<script type=”text/javascript”
src=”////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js”><\/script>’)</script>
<script type=”text/javascript”>
setTimeout(function() {
jQuery.getScript(‘https://negys.anytimebooking.eu/widgets/calendar/js/calendar.js’);
}, 1000);

</script>
</body>
</html>

 

The only parts that you will need are separated into three colours:

Blue for CSS
Orange for HTML
Green for Javascript

 

CSS (Blue)

This is the link / import path to the css file(s) that provides the basic styling for the widget, all styling
for the Vanilla theme is stored within the master.css file. If you wish to update the styling of the
widget, please first consider using one of the available ‘coloured’ themes from Anytime Booking, or
adding your customisations to your own css file.
This section of code can be pasted into the Head of your HTML markup, preferably before your
existing CSS stylesheets.

Coloured themes

If you wish to add a little colour to the widget, we have provided three new themes, these are Orange, Blue and Green; within the Anytime Booking admin area, Widget setup, you can select a different theme if required.
Our coloured themes following the methodology of CSS (Cascading Style Sheets) where one style will overrule another if the newer style is more specific or closer too the resulting HTML code.
When selecting a coloured theme, an additional CSS link file will be added to the Starter code:

The above CSS link file imports the theme-a additional styling codes, these codes will overrule specific Vanilla codes within the master.css file therefore providing you with a coloured widget theme. It is important to keep the master.css link within your main HTML file and placed before the coloured theme theme-a.css link, as this provides the basic positional styling of the widget. Each coloured theme provides specific colour and layout changes to the widget; removal of the master.css file will result in a broken widget.

HTML (Orange)

This section of code places the widget within your webpage, therefore you must paste this code into your HTML file in the exact markup position that you would like the widget to be displayed at on the live web page.

The Starter code provided through our admin Widget setup page will populate the widget with the
specific account / unit / month information required to display your availability. If you wish to update this, please make changes to:
data-url=”negys” data-category=”134” data-unit=”2636” data-months=”3”
Please note, manually updating this code could result in the widget displaying incorrect information or breaking it.

JavaScript (Green)

This section of code provides the functionality of the widget.Please place this section of code at the end of your HTML document, after the Body tag and before the HTML tag. You can place this code immediately after the HTML code within your HTML markup,though please note, this line of code imports the jQuery library into your site, if you are already importing jQuery later in your HTML, you might end up importing the library twice and potentially break your site. Therefore it is best to paste this code into the end of your HTML markup to avoid any
possible issues.

Responsive

The widget is built following a mobile first approach; therefore the widgets will work on mobile
devices, smart phones and desktop computers. The widgets will adjust in view to width or horizontal alignment / vertical stacking depending on the position in a HTML web page or when accessing the web page on a small screen device (smartphone/tablet).

Customisation

If you wish to make any styling customisations to the widget, please following CSS methodology
(cascading) and place your CSS changes within your own stylesheet (placed after AnytimeBooking CSS files, in your HTML Head), therefore any style changes you make will overrule the master.css and coloured theme css file. This also helps to preserve the original styling of the widget incase you wish to restore the styling at any stage.

Customising the widget for your own colour styles does require knowledge of CSS, please refer to a web developer to make any changes required.

Example – Vanilla theme (Black)

<html>
<head>
<title>Your Website</title>
<link rel=”stylesheet” type=”text/css”
href=”https://negys.anytimebooking.eu/widgets/calendar/css/master.css”>
<link rel=”stylesheet” type=”text/css” href=”your-style-sheet.css”>
</head>
<body>
….
</body>
</html>

Example – Coloured theme (theme-a.css, theme-b.css, theme-c.css)

<html>
<head>
<title>Your Website</title>
<link rel=”stylesheet” type=”text/css”
href=”https://negys.anytimebooking.eu/widgets/calendar/css/master.css”>
<link rel=”stylesheet” type=”text/css”
href=”https://negys.anytimebooking.eu/widgets/calendar/css/theme-a.css”>
<link rel=”stylesheet” type=”text/css” href=”your-style-sheet.css”>
</head>
<body>
….
</body>
</html>

Example – Customised theme (theme-a.css, theme-b.css, theme-c.css)

<html>
<head>
<title>Your Website</title>
<link rel=”stylesheet” type=”text/css”
href=”https://negys.anytimebooking.eu/widgets/calendar/css/master.css”>
<link rel=”stylesheet” type=”text/css”
href=”https://negys.anytimebooking.eu/widgets/calendar/css/theme-a.css”>
<link rel=”stylesheet” type=”text/css” href=”your-style-sheet.css”>
<!– make your widget customization changes in your-style-sheet.css –>
</head>
<body>
….
</body>
</html>

Example Webpage HTML

<html>
<head>
<title>Your Website</title>
<link rel=”stylesheet” type=”text/css”
href=”https://negys.anytimebooking.eu/widgets/calendar/css/master.css”>
<link rel=”stylesheet” type=”text/css”
href=”https://negys.anytimebooking.eu/widgets/calendar/css/theme-a.css”>
<link rel=”stylesheet” type=”text/css” href=”your-style-sheet.css”>
<!– make your widget customization changes in your-style-sheet.css –>
</head>
<body>
<main>
<!– main content –>
Your content
</main>
<aside>
<!—sidebar –>
<div id=”atb_calendar_container”>
<div id=”atb_anytime” data-url=”negys” data-category=”134″ data-unit=”2636″ datamonths=”3″>
<span class=”no-js”>Sorry, this calendar requires javascript in order to work.</span>
</div>
</div>
</aside>
</body>
<script>window.jQuery || document.write(‘<script type=”text/javascript”
src=”////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js”><\/script>’)</script>
<script type=”text/javascript”>
setTimeout(function() {
jQuery.getScript(‘https://negys.anytimebooking.eu/widgets/calendar/js/calendar.js’);
}, 1000);
</script>
</html>





Download this document

pdf-download-icon

Tom Grant

Leave a Reply

You must be logged in to post a comment.