<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" /><\/script>')</script>
<script>jQuery().dateinput || document.write('<script src="https://js.bookassist.com/scripts/extlib/jqtools/dateinput/1.2.6/jquery.tools.min.js" /><\/script>')</script>
<!-- CALENDAR FUNCTIONS -->
<script type="text/javascript">
var language = 'en'; // LANGUAGE
var booking_page = 'booking.html'; // BOOKING PAGE WITH BOOKING IFRAME INSERTED
jQuery(document).ready(function(){
if (language == 'es') {
jQuery.tools.dateinput.localize(
'es', {
months: 'Enero,Febrero,Marzo,Abril,Mayo,Junio,Julio,Agosto,Septiembre,Octubre,Noviembre,Diciembre',
shortMonths:'ene,feb,mar,abr,may,jun,jul,ago,sep,oct,nov,dic',
days: 'Domingo,Lunes,Martes,Miércoles,Jueves,Viernes,Sábado',
shortDays: 'Dom,Lun,Mar,Mié,Jue,Vie,Sáb'
});
} else if (language == 'de') {
jQuery.tools.dateinput.localize(
'de', {
months: 'Januar,Februar,März,April,Mai,Juni,Juli,August,September,Oktober,November,Dezember',
shortMonths:'Jan,Feb,Mär,Apr,Mai,Jun,Jul,Aug,Sep,Okt,Nov,Dez',
days: 'Sonntag,Montag,Dienstag,Mittwoch,Donnerstag,Freitag,Samstag',
shortDays: 'Son,Mon,Die,Mit,Don,Fre,Sam'
});
} else if (language == 'fr') {
jQuery.tools.dateinput.localize(
'fr', {
months: 'Janvier,Février,Mars,Avril,Mai,Juin,Juillet,Août,Septembre,Octobre,Novembre,Décembre',
shortMonths:'jan,fév,mar,avr,mai,jun,jul,aoû,sep,oct,nov,déc',
days: 'Dimanche,Lundi,Mardi,Mercredi,Jeudi,Vendredi,Samedi',
shortDays: 'Dim,Lun,Mar,Mer,Jeu,Ven,Sam'
});
} else if (language == 'it') {
jQuery.tools.dateinput.localize(
'it', {
months: 'Gennaio,Febbraio,Marzo,Aprile,Maggio,Giugno,Luglio,Agosto,Settembre,Ottobre,Novembre,Dicembre',
shortMonths:'gen,feb,mar,apr,mag,giu,lug,ago,set,ott,nov,dic',
days: 'Domenica,Lunedi,Martedì,Mercoledì,Giovedi,Venerdì,Sabato',
shortDays: 'Dom,Lun,Mar,Mer,Gio,Ven,Sab'
});
} else if (language == 'hr') {
jQuery.tools.dateinput.localize(
'hr', {
months: 'Január,Február,Március,Április,Május,Június,Július,Augusztus,Szeptember,Október,November,December',
shortMonths:'jan,feb,már,ápr,máj,jún,júl,aug,sze,okt,nov,dec',
days: 'Vasárnap,Hétfő,Kedd,Szerda,Csütörtök,Péntek,Szombat',
shortDays: 'Vas,Hét,Ked,Sze,Csü,Pén,Szo'
});
} else if (language == 'pt') {
jQuery.tools.dateinput.localize(
'pt', {
months: 'Janeiro,Fevereiro,Março,Abril,Maio,Junho,Julho,Agosto,Setembro,Outubro,Novembro,Dezembro',
shortMonths:'jane,fev,mar,abr,mai,jun,jul,ago,set,out,nov,dez',
days: 'Domingo,Segunda-feira,Terça-feira,Quarta-feira,Quinta-feira,Sexta-feira,Sábado',
shortDays: 'Dom,Seg,Ter,Quar,Quin,Sex,Sab'
});
} else if (language == 'cz') {
jQuery.tools.dateinput.localize(
'cz', {
months: 'Leden,Únor,Březen,Duben,Květen,Červen,Červenec,Srpen,Září,Říjen,Listopad,Prosinec',
shortMonths:'Led,Úno,Bře,Dub,Kvě,Črv,Čvc,Srp,Zář,Říj,Lis,Pro',
days: 'Neděle,Pondělí,Úterý,Středa,Čtvrtek,Pátek,Sobota',
shortDays: 'Ne,Po,Út,St,Čt,Pá,So'
});
} else if (language == 'nl') {
jQuery.tools.dateinput.localize(
'nl', {
months: 'Januari,Februari,Maart,April,Mei,Juni,Juli,Augustus,September,Oktober,November,December',
shortMonths:'jan,feb,maa,apr,mei,jun,jul,aug,sep,okt,nov,dec',
days: 'Zondag,Maandag,Dinsdag,Woensdag,Donderdag,Vrijdag,Zaterdag',
shortDays: 'Zon,Maa,Din,Woe,Don,Vri,Zat'
});
} else if (language == 'ru') {
jQuery.tools.dateinput.localize(
'ru', {
months: 'Январь,февраль,март,апрель,май,июнь,июль,август,сентябрь,октябрь,ноябрь,декабрь',
shortMonths:'Янв,фев,мар,апр,май,июн,июл,авг,сен,окт,ноя,дек',
days: 'воскресенье,понедельник,вторник,среда,четверг,пятница,суббота',
shortDays: 'вос,пон,вто,сре,чет,пят,суб'
});
} else if (language == 'zh') {
jQuery.tools.dateinput.localize(
'zh', {
months: '一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月',
shortMonths:'一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月',
days: '周日,周一,周二,周三,周四,周五,周六',
shortDays: '周日,周一,周二,周三,周四,周五,周六'
});
} else {
jQuery.tools.dateinput.localize(
'en', {
months: 'January,February,March,April,May,June,July,August,September,October,November,December',
shortMonths:'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec',
days: 'Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday',
shortDays: 'Sun,Mon,Tue,Wed,Thu,Fri,Sat'
});
}
jQuery('.ba-booking-calendar .-form :date').dateinput({
trigger: true,
format: 'dd mmm yyyy',
min: -1,
firstDay: 1,
lang: language,
offset: [0, 0]
});
jQuery('.ba-booking-calendar .-form :date').bind('onShow onHide', function() {jQuery(this).parent().toggleClass('active');});
function ba_calendar_departure() {
var d = new Date(jQuery('.ba-booking-calendar .-form :date:first').data('dateinput').getValue());
d.setDate(d.getDate()+1);
jQuery('.ba-booking-calendar .-form :date:last').data('dateinput').setMin(d, true);
}
jQuery('.ba-booking-calendar .-form :date:first').data('dateinput').change(function() {ba_calendar_departure();});
ba_calendar_departure();
jQuery('.ba-booking-calendar .-form .-button').click(function(e) {
var date_in = jQuery('.ba-booking-calendar .-form :date:first').data('dateinput').getValue('yyyy-mm-dd');
var date_out = jQuery('.ba-booking-calendar .-form :date:last').data('dateinput').getValue('yyyy-mm-dd');
var queryStr = 'user_language='+language+'&date_in='+date_in+'&date_out='+date_out;
if (jQuery('.ba-booking-calendar .-form .-field-persons-adults select').length > 0){
queryStr += '&adults='+jQuery('.ba-booking-calendar .-form .-field-persons-adults select').val();
}
if (jQuery('.ba-booking-calendar .-form .-field-persons-children select').length > 0){
queryStr += '&children='+jQuery('.ba-booking-calendar .-form .-field-persons-children select').val();
}
if (jQuery('.ba-booking-calendar .-form .-field-pricegroup select').length > 0){
queryStr += '&hotel_id='+jQuery('.ba-booking-calendar .-form .-field-pricegroup select').val();
}
if (jQuery('.ba-booking-calendar .-form .-field-promocode input').length > 0){
queryStr += '&promo_code='+jQuery('.ba-booking-calendar .-form .-field-promocode input').val();
}
// Replace booking.html with the booking page you have created
// Add the hotel_id and guide_id of each hotel to the else if statement
var selectedValue = $('#county_hotel_select').val();
if(selectedValue.indexOf("All")>=0) {
var bookingPage = 'booking.html';
queryStr += '&action=result';
} else
if( selectedValue.indexOf("xxxx")>=0) { // hotel id
var bookingPage = 'booking.html';
queryStr += '&action=c_1&hotel_id=xxxx&guide_id=xxx';
} else
if( selectedValue.indexOf("xxxx")>=0) { // hotel id
var bookingPage = 'booking.html';
queryStr += '&action=c_1&hotel_id=xxxx&guide_id=xxx';
} else
if( selectedValue.indexOf("xxxx")>=0) { // hotel id
var bookingPage = 'booking.html';
queryStr += '&action=c_1&hotel_id=xxxx&guide_id=xxx';
} else
if( selectedValue.indexOf("xxxx")>=0) { // hotel id
var bookingPage = 'booking.html';
queryStr += '&action=c_1&hotel_id=xxxx&guide_id=xxx';
} else
if( selectedValue.indexOf("xxxx")>=0) { // hotel id
var bookingPage = 'booking.html';
queryStr += '&action=c_1&hotel_id=xxxx&guide_id=xxx';
}
document.location.href = bookingPage + '?' + queryStr;
return false;
});
});
</script>
<style>
/* CALENDAR > DATEINPUT*/
#calroot
{
z-index:10000;
margin-top:-1px;
width:198px;
padding:2px;
background-color:#fff;
font-size:11px;
border:1px solid #ccc;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow: 0 0 15px #666;
-webkit-box-shadow: 0 0 15px #666;
}
#calhead
{
padding:2px 0;
height:22px;
}
#caltitle
{
font-size:14px;
color:black;
float:left;
text-align:center;
width:155px;
line-height:20px;
text-shadow:0 1px 0 #ddd;
}
#calnext,
#calprev
{
display:block;
width:20px;
height:20px;
background:transparent no-repeat scroll center center url(data:image/gif;base64,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);
float:left;
cursor:pointer;
}
#calnext
{
background-image:url(data:image/gif;base64,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);
float:right;
}
#calprev.caldisabled,
#calnext.caldisabled
{visibility:hidden;}
#caltitle select
{font-size:10px;}
#caldays
{
height:14px;
border-bottom:1px solid #ddd;
}
#caldays span
{
display:block;
float:left;
width:28px;
text-align:center;
}
#calweeks
{
background-color:#fff;
margin-top:4px;
}
.calweek
{
clear:left;
height:22px;
}
.calweek a
{
display:block;
float:left;
width:27px;
height:20px;
text-decoration:none;
font-size:11px;
margin-left:1px;
text-align:center;
line-height:20px;
color:black;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.calweek a:hover,
.calfocus
{background-color:#ddd;}
a.calsun
{color:red;}
a.caloff
{color:#ccc;}
a.caloff:hover
{
background-color:rgb(245, 245, 250);
}
a.caldisabled
{
background-color:#efefef !important;
color:#ccc !important;
cursor:default;
}
#calcurrent
{
background-color:black;
color:white;
}
#caltoday
{
background-color:grey;
color:white;
}
.ba-booking-calendar a.caltrigger
{
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpi/P//PwNdgLk8F4iaBsQgG6eB+DCMLg5yFDpmwmN2JtQXmUSKYwCY7Sj4P0Q30eIw18PAf3SQmZkJVgiiiRGHWQQylBHJUIrjgpGRERTujCzIgnNnzoSzk9PTCfIvdE+G8w1Kc+FsJlqknlHvj3p/1PvU9D7MpdNBApRikDnILqW0lkABAAEGAH7ruRQW9oPqAAAAAElFTkSuQmCC);
background-position: left top;
width: 21px;
display: block;
margin: 0;
height: 21px;
position: absolute;
left: 2px;
bottom: 0px;
}
/* CALENDAR CONTAINER */
.ba-booking-calendar
{
width: 150px;
padding: 5px;
}
.ba-booking-calendar .-info
{
margin: 5px 0 20px 0;
}
.ba-booking-calendar .-info h3
{
margin-bottom: 5px;
font-size: 20px;
line-height: 18px;
font-weight: bold;
margin: 0 0 12px 0;
}
.ba-booking-calendar .-info p
{
padding: 0;
margin: 0;
font-weight: bold;
}
.ba-booking-calendar input,
.ba-booking-calendar select
{
border:1px solid #ccc;
-moz-box-shadow:0 0 10px #eee inset;
-webkit-box-shadow:0 0 10px #eee inset;
width: 145px;
height: 20px;
}
.ba-booking-calendar .date
{
width: 100px;
text-align:left;
display: block;
position: absolute;
bottom: 0px;
padding: 0 0 0 45px;
}
.ba-booking-calendar label
{
font-weight: bold;
margin: 0 0 6px 0;
display: block;
}
.ba-booking-calendar label > span
{
display: block;
margin: 0 0 4px 0;
}
.ba-booking-calendar label.-field-date
{
position: relative;
height: 38px;
}
.ba-booking-calendar .-field-pricegroup select
{
max-width: 165px;
}
.ba-booking-calendar .-field-persons select
{
margin: 0 5px 0 0;
width: 50px;
}
.ba-booking-calendar .-field-persons > span
{
display: none;
}
.ba-booking-calendar .-field-persons-adults
{
float: left;
}
.ba-booking-calendar .-field-promocode input
{
text-align: center;
font-weight: bold;
font-size: 15px;
}
.ba-booking-calendar .-form .-button
{
border: 0px;
margin: 10px 0px 0px 0px;
width: 110px;
height: 25px;
font-weight: bold;
display:block;
text-decoration:none;
text-align:center;
background-color:#E34F00;
color: #FFF;
-moz-border-radius:3px;
border-radius:3px;
}
.ba-booking-calendar .-form .-button:hover
{
background-color:#E34F00;
color: #FFF;
}
</style>
<!--[if lte IE 7]>
<style>
.ba-booking-calendar a.caltrigger
{background-image:url(http://sb.bookassist.net/files/img/calendar/calendar.png);}
#calnext,
#calprev
{
background:transparent no-repeat scroll center center url(http://sb.bookassist.net/files/img/calendar/calendar-prev.gif);
}
#calnext
{background-image:url(http://sb.bookassist.net/files/img/calendar/calendar-next.gif);}
</style>
<![endif]-->
</head>
<body>
<div class="ba-booking-calendar">
<div class="-info">
<h3>Book now</h3>
<p>Official hotel site</p>
<p>Best price guaranteed</p>
</div>
<div class="-form">
<form>
<label class="-field-pricegroup">
<select class="county_hotel_select" id="county_hotel_select" name="hotel_id">
<option value="All" selected >All Hotels</option>
<!-- Add the Hotel_id into the option value and the hotel name in the hotal name area -->
<option value="xxxx">Hotel Name 1</option>
<option value="xxxx">Hotel Name 2</option>
<option value="xxxx">Hotel Name 3</option>
<option value="xxxx">Hotel Name 4</option>
</select>
</label>
<label class="-field-date">
<span>Arrival</span>
<input type="date" name="date_in" value="0" />
</label>
<label class="-field-date">
<span>Departure</span>
<input type="date" name="date_out" value="1" />
</label>
<label class="-field-promocode">
<span>Voucher/Promo code</span>
<input type="input" name="promocode" value="" />
</label>
<button formtarget="frame" class="-button">Book now!</button>
</form>
</div>
</div>
</body>
</html>
