Group Calendar

<!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&eacute;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>