CSS, Html, Js Code para insertar en el motor de reservas

CSS

/** 
 * Use variables in css if you want to use shortcode attributes. For example: 
 * 	:root {
 *		--scu-color: pink;
 *	}
 * Then, modify the var with JS	(See tutorial 3)
 * 
*/
.single.no-widgets-sidebar .content-area
{
	max-width:none!important;
}
.wp-block-group__inner-container
{
	max-width:none!important;
}

.selector_aloja360{
	width:100%;
}

.contenedor_aloja360{
	max-width: 1170px;
	min-width: 900px;
	margin: 0 auto;
	display: block;
}
	.listado_aloja360{
		width: calc(61% - 17px);
		display: inline-block;
		vertical-align: top;
		/*border: 1px solid #000;*/
	}
	.calendario_aloja360{
		float: right;
		width: 38.6%;
		display: inline-block;
		vertical-align: top;
		/*border: 1px solid #000;*/
	}
.calendario-seleccion{
	min-width:395px;
}

@media only screen and (max-width: 480px){
	.contenedor_aloja360{
		width: 95%;
		margin: 0 auto;
		min-width:320px;
	}
	.listado_aloja360{
		width: 100%;
		display: block;
		float: none;
	}
	.calendario_aloja360{
		width: 100%;
		display: block;
		float: none;
	}
	.site-content-inner
	{
		width:100%!important;
	}
}

Js Code

/****************************************************************************************
 * Shortcodes create a wrapping div as:
 * <div class="scu-shortcode sc-tutorial" data-name="tutorial" data-att="some att">
 * 		(The output of the HTML/PHP Code tab)
 * </div>
 * 
 * shortcode content and attributes can be easily retrieved :
 * 	var content = $(this).html();
 *	var atts = $(this).data();
 
 * There are some available useful JS variables:
 * 	shortcode:		(String) name of the shortcode
 * 	resources_url:	(String) resources files URL
 * 
 * And there are also some needed variables for the ajax calls:
*  ajaxurl:			(String) the url for admin-ajax.php
*  ajaxdata:		(Object) for data parameters in jQuery ajax. Which includes:
* 						ajaxdata["shortcode"]: (needed to redirect to the shortcode specific scu-ajax-handler.php)
*						ajaxdata["security"]: (with an ajaxNonce)
*						ajaxdata["action"]: (needed for hook in the admin-ajax.php) 
****************************************************************************************/
jQuery(document).ready(function($) {
		carga_calendario()

	});

	function carga_calendario()
	{
		var key_grupo;
		var key_alojamiento;
		var key_conjunto;
		var tipo;
		key_grupo = jQuery("#selector_aloja360").attr("keyG");		
		key_alojamiento = jQuery("#selector_aloja360").attr("keyA");
		key_conjunto = jQuery("#selector_aloja360").attr("keyC");
		tipo = jQuery("#selector_aloja360").attr("Tipo");
		
		if (tipo == 1)
				{
					$("#selector_aloja360").hide();
				}

		jQuery.ajax({
			url: 'https://www.aloja360.com/app/es/inicio/selector',
			type: 'POST',
			dataType: 'html',
			data: {keyg: key_grupo,keyc:key_conjunto,keya:key_alojamiento,tipo:tipo},
		})
		.done(function(data) {
			console.log("success");
			jQuery("#selector_aloja360").html(data);
		})
		.fail(function() {
			console.log("error");
		})
		.always(function() {
			console.log("complete");
		});


		jQuery.ajax({
			url: 'https://www.aloja360.com/app/es/inicio/calendario',
			type: 'POST',
			dataType: 'html',
			data: {keyg: key_grupo,keyc:key_conjunto,keya:key_alojamiento,tipo:tipo},
		})
		.done(function(data) {
			//console.log(data);
			jQuery("#calendario_aloja360").html(data);
			eventos();
		})
		.fail(function() {
			console.log("error");
		})
		.always(function() {
			console.log("complete");
		});
		
	}

	function seleccionar_calendario(keyg,keya)
	{
		console.log("calendario_selecionado");
	}
	/*function seleccionar_calendario_1(keyg,keya)
	{
		var key_grupo;
		var key_alojamiento;
		var key_conjunto;
		
		key_grupo = keyg;
		key_alojamiento = keya;
		key_conjunto = "";


		jQuery.ajax({
			url: 'https://www.aloja360.com/app/es/inicio/selector',
			type: 'POST',
			dataType: 'html',
			data: {keyg: key_grupo,keyc:key_conjunto,keya:key_alojamiento},
		})
		.done(function(data) {
			console.log("success");
			jQuery("#selector_aloja360").html(data);
		})
		.fail(function() {
			console.log("error");
		})
		.always(function() {
			console.log("complete");
		});
		
		jQuery.ajax({
			url: 'https://www.aloja360.com/app/es/inicio/calendario',
			type: 'POST',
			dataType: 'html',
			data: {keyg: key_grupo,keya:key_alojamiento},
		})
		.done(function(data) {
			console.log("success");
			$("#calendario_aloja360").html(data);
		})
		.fail(function() {
			console.log("error");
		})
		.always(function() {
			console.log("complete");
		});
	}*/

HTML

<!-- Available PHP variables: -->
<!-- $content:			content of the shortcode (if configured so) -->
<!-- $atts:				array of attributes of the shortcode (if any) -->
<!-- $resources_url:	url of the shortcode resources dir -->

<div class="selector_aloja360" id="selector_aloja360" keyG="<?php echo $atts['keyg']?>" keyC="<?php echo $atts['keyc']?>" keyA="<?php echo $atts['keya']?>" Tipo="<?php echo $atts['tipo']?>"></div>
<div class="contenedor_aloja360">	
	<div class="calendario_aloja360" id="calendario_aloja360"  keyG="<?php echo $atts['keyg']?>" keyC="<?php echo $atts['keyc']?>" keyA="<?php echo $atts['keya']?>"></div>
	<div class="listado_aloja360" id="listado_aloja360">
		<div class="separador-casas"></div>
		<div class="casa-container contenedor">
			<p align="center">Seleccione las fecha de su estancia y los ocupantes del viaje</p>
		</div>	
	<div class="separador-casas"></div>
	</div>
</div>