¿Cómo cambiar el diseño del calendario de reservas?

Disponible para los planes: M | L | VIP | Enterprise

¿En dónde puedo encontrarlo? Panel de control >>> Diseño.

En la imagen que se muestra a continuación, puedes introducir el código que desees, ya sea relacionado con el estilo de visualización del widget, o bien para  modificar secciones por defecto que tú no necesitas mostrar u otras que quieras añadir, etc.

 Consejo: Recomendamos siempre añadir cualquier código adicional, al final del código nativo para que sea más fácil localizarlo en caso de modificaciones. 

El Widget por defecto se ve así:

Si no te gustan los colores por defecto, o el widget no se complementa con los colores de tu web, tienes infinidades de maneras de modificarlo en tu software de reservas.

En el siguiente ejemplo tienes el código usado para cambiarlo a tonos naranjas.

 Ten en cuenta: que puedes copiar y pegar este código y cambiar los valores de background (fondo de pantalla) y de color (color de la fuente) por los que más te gusten

Aquí está el código utilizado para que puedas copiar y pegarlo en tu sistema de reservas TuriTop:

/*** COLOR FONDO DE PANTALLA***/
html, body, div.booking-box {background:#ffffff; }


/***COLOR TEXTO TITULO DEL SERVICIO***/
div.booking-box-header h1 {color: #4F5155;}


/***CALENDARIO***/


/***TITULO DEL MES***/
.eventsCalendar-currentTitle .monthTitle {background-color:#F58500; color: #FFF; }



/****DÍAS***/


   /***DIA ACTUAL***/
.eventsCalendar-daysList li.current a {background-color: #fff; color: #666; }

   /***DIAS ABIERTOS***/
.eventsCalendar-daysList li.dayWithEvents a {background-color: #5cb85c; color: #FFF;}

   /***DÍAS CERRADOS***/
.eventsCalendar-day a {background-color: #CC7070; color: #424242;}

   /***DIA SELECCIONADO***/
.eventsCalendar-daysList li.dayWithEvents.calendar-day-selected a, .eventsCalendar-daysList li.dayWithEvents.calendar-day-selected a:hover {background-color: #F58500; color: #FFF;}


/**** HORAS ***/


   /**** HORAS DISPONIBLES ***/
.event-label , label.event-label:hover {background: #5cb85c; color: #FFF;}

   /**** HORAS CERRADAS  ***/
.event-label-closed {background: #fbc6bf; color: #ee1c00; }

   /**** HORA SELECCIONADA  ***/
.event-label-selected, .event-label-selected:hover { background: #F58500; color: #fff;}

/****  Horas disponibles pero cerradas por released ***/

.too-late, .too-late a, .too-late .event
{ background: #DDBBE5 !important; color: #7F059D !important; }

/**** Horas pasadas ***/
label.event-label-closed.event_started {
    background: lightgray !important;
    color: gray !important;
    text-decoration: line-through
}


/***BOTONES***/


/***BOTONES DE COMPRA***/
.product-buy-now, .buy-now, .buy-now-2 {background: #F58500; color: #fff;}

/***HOVER BOTONES DE COMPRA***/
.product-buy-now:hover, .buy-now:hover, .buy-now-2:hover {background: #d47505; color: #fff;}

¿Estás buscando la funcionalidad "Llamar para consultar disponibilidad"? Haz clic aquí.