The following article is aimed at webmasters, and includes the instructions for placing the eRes Calendar Booking Widget onto a customer's own website. The Booking Widget will provide a booking calendar and a Book Now button, that when clicked, will link over to the client's eRes page, allowing the guest to complete their booking with their selected dates.
Open up the EresWidgetTest.html file using a plain text editor such as Notepad or Adobe Dreamweaver. Do NOT use Microsoft Word as it will change the formatting and alter your code.
Copy all of the code from the first <div> tag to the last </div>. The first and last tags should look something like this:
<div id=“CalendarWidget”>
<link type="text/css" href="ew_css/CalendarWidget.css" rel="stylesheet" />
<input id="w_hfArrivalDate" type="hidden" />
</div>
You then want to copy and paste this code into the HTML file of the webpage you want the widget to show up on.
Then you need to make sure that you upload the ew_css, ew_images, ew_js folders onto your website. You want to look at the “href” elements to double check that they are linking to these folders.
<link type="text/css" href="ew_css/CalendarWidget.css" rel="stylesheet" />
<link type="text/css" href="ew_css/CalendarWidget_MultiProperty.css" rel="stylesheet" />
<link type="text/css" href="ew_css/excite-bike/jquery-ui-1.8.9.custom.css"
rel="stylesheet" />
<script type="text/javascript" src="ew_js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="ew_js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="ew_js/CalendarWidget.js"></script>
You want to make sure that you are placing the folders at the same level as the webpage you added the widget to. For example if you added it to an index.html file then you would want it to look like this:
If you have a css folder already and would like to put the ew_css inside it to keep your files organized you would have to change the “href” code so that it becomes your folder name/ew_css. For example, if you have a css folder called “styles” it would then be:
<link type="text/css" href=“styles/ew_css/CalendarWidget.css" rel="stylesheet" />
The folders would then look like this:
If you are using WordPress and adding the calendar widget to a PHP file then you will need to add <?php bloginfo(‘template_url');?>/ to the “href” so it would then become:
<link type="text/css" href=“<?php bloginfo(‘template_url');?>/ew_css/CalendarWidget.css"
rel="stylesheet" />