¿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 pestaña Diseño, puedes cambiar el diseño y personalizar tu widget de reservas, tanto en lo que respecta a la visualización como a la eliminación o adición de secciones en función de tus necesidades.

Qué diseños están disponibles

En primer lugar, tienes que decidir qué diseño de Calendario de Reservas quieres elegir:

Tienes 3 opciones a tu disposición:

1. bookingbox-v3 (Light Mode)
   
   
   
2. bookingbox-v3 (Dark Mode)
   
   
   
3. bookingbox-v2
   
   

Las opciones 1 y 2 te dan la opción de mostrar un calendario de reservas en tamaño grande y con esquinas redondeadas, tienes la posibilidad de tener un modo blanco u oscuro.

Por el contrario, la opción 3 te da la posibilidad de mostrar un calendario en un tamaño más pequeño y con esquinas cuadradas.

Cómo personalizar tu Calendario

Si quieres personalizar tu caja de reserva para el bookingbox-v3 (modo claro u oscuro) puedes copiar y pegar el siguiente código y cambiar los valores para que coincidan con los colores de tu página web, hay infinitas posibilidades de modificarlo.

:root {

--turitop-color: #26b4e1;
--turitop-fontfamily: "Helvetica" ,sans-serif;
--turitop-background-color: #000000;
--turitop-font-color: #f2f2f2;
--turitop-selectedday-background: #02703c;
--turitop-available-color: #5fbe7d;
--turitop-NotAvailable-color:#6c6c6c;
--turitop-TooLate-event-color: #7F059D;
--turitop-TooLate-background: #DDBBE5;
--turitop-CurrentDay-background: #DDBBE5;
--turitop-CurrentDayBorder-color-style: 1px dashed grey;

}

Si estás utilizando el bookingbox-v2, entonces tendrás que utilizar el siguiente código en su lugar:

/*** Background ***/ html, body, div.booking-box {background:#ffffff; } 
/***Service Title***/ div.booking-box-header h1 {color: #4F5155;}

/***Calendar***/ 
/***Month Title***/ .eventsCalendar-currentTitle .monthTitle {background-color:#F58500; color: #FFF; }

/****Days***/ /***Current Day***/ .eventsCalendar-daysList li.current a {background-color: #fff; color: #666; } 
/***Open Days**/ .eventsCalendar-daysList li.dayWithEvents a {background-color: #5cb85c; color: #FFF;} 
/***Closed Days***/ .eventsCalendar-day a {background-color: #CC7070; color: #424242;} 
/***Selected Day***/ .eventsCalendar-daysList li.dayWithEvents.calendar-day-selected a, .eventsCalendar-daysList li.dayWithEvents.calendar-day-selected a:hover {background-color: #F58500; color: #FFF;}

/**** Hours ***/ 
/**** Hours available ***/ .event-label , label.event-label:hover {background: #5cb85c; color: #FFF;} 
/**** Closed hours***/ .event-label-closed {background: #fbc6bf; color: #ee1c00; } 
/**** Selected hour ***/ .event-label-selected, .event-label-selected:hover { background: #F58500; color: #fff;} 
/**** Hours available but closed by released ***/ .too-late, .too-late a, .too-late .event { background: #DDBBE5 !important; color: #7F059D !important; } 
/**** Hours not available (Event started) ***/ label.event-label-closed.event_started { background: lightgray !important; color: gray !important; text-decoration: line-through }

/***Buttons***/ 
/***Buy Buttons***/ .product-buy-now, .buy-now, .buy-now-2 {background: #F58500; color: #fff;} 
/***Buy Buttons Hover***/ .product-buy-now:hover, .buy-now:hover, .buy-now-2:hover {background: #d47505; color: #fff;}

Cópialo y pégalo en la caja y luego cambia los valores para que coincidan con tus colores.

 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í.ç

Widget sin fondo en los eventos y con más espaciado

Si estás buscando una versión más minimalista del widget de reservas, puedes copiar el siguiente código y pegarlo en tu pestaña diseño:

:root{
--turitop-available-color:transparent;
}

/*Border color days*/
.eventsCalendar-daysList li.dayWithEvents a,.event-label{
 border: 1px solid var(--turitop-color);
 border-radius: 5px;
 color: var(--turitop-color);

}
.eventsCalendar-daysList li {
 padding: 5px!important;
}
.eventsCalendar-daysList li.dayWithEvents a:hover,.event-label:hover,.eventsCalendar-day a,li.current.disabled a,.event-label-closed{
 background:transparent!important;
}
.event-label.event-label-selected,.event-label-selected:hover,.eventsCalendar-daysList li.dayWithEvents a:hover{
 color:#fff;
 border: 1px solid var(--turitop-color);
 background-color:var(--turitop-selectedday-background)!important;
}
.eventsCalendar-daysList li.dayClosed a,li.current.disabled a,.event-label-closed{
 color: #aaa!important;
}
li.current.disabled{
 border: unset;
}
/*Border space days*/
.eventsCalendar-daysList li a{
 width:35px;
 display: inline-block;
}
.event-label,.event-label-closed{
 height: 40px;
 line-height: 2em;
}

Se verá de este modo: