¿Cómo cambiar el diseño del calendario de reservas? – Centro de Ayuda del Sistema de Reservas TuriTop

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

En la pestaña Diseño, puedes ajustar fácilmente el estilo de tu widget de reservas. Personaliza el aspecto de tu calendario para que coincida con tu marca y mantengas una identidad corporativa coherente.

Aquí podrás elegir entre múltiples diseños predefinidos y podrás también añadir código CSS para modificarlo:

Puedes hacer clic en el botón "Actualizar vista previa" para previsualizar el efecto del código que has introducido. Recuerda hacer clic luego en "Publicar" para guardar los cambios.

Finalmente, tendrás una sección donde podrás ver y recuperar todas las versiones que hayas guardado

Diseños disponibles

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

Diseños preestablecidos

TuriTop te ofrece una serie de diseños preestablecidos para facilitarte la implementación rápida de tu calendario de reservas ofreciendo un diseño moderno y atractivo.

Es posible modificar el estilo de estas plantillas de diseño, pero será necesario que redactes código CSS que anule o modifique las propiedades actuales.

Aqua

Elegant Dark

Minimal Light

Skyline Light

Green Gradient

Aqua wave

Green Forest

Gold Horizon

Mint Sand

Ocean Spirit

Pink Sunset

Purple Dream

Diseño bookingbox-v3

El diseño bookingbox-v3 te permite mostrar un calendario de reservas más grande con esquinas redondeadas, disponible tanto en light mode como en dark mode.

Bookingbox-v3 (Light Mode)

Bookingbox-v3 (Dark Mode)

Personalización para la versión 3 (bookingbox-v3)

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

: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;

}

Recomendamos colocar cualquier código adicional o nuevo al final del código nativo. Esto ayuda a prevenir posibles problemas y facilita su localización para futuras modificaciones.

Widget sin fondo y con más espaciado

Si buscas un widget minimalista, pega el siguiente código CSS en la 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:

¿Quieres saber cómo configurar la funcionalidad "Llamar para consultar disponibilidad"? Haz clic aquí.

Diseño bookingbox-v2

El diseño bookingbox-v2 ofrece un calendario más compacto con esquinas cuadradas.

Personalización para la versión 2 (bookingbox-v2)

Si estás utilizando el bookingbox-v2, también puedes utilizar el siguiente código para adaptar el calendario a los colores de tu página web. Copia y pega el código en el cuadro y, a continuación, cambia los valores necesarios:

/*** 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;} 
/***Days without events**/.eventsCalendar-daysList li.dayEmpty a {background-color: #CC7070; color: #424242;}
/***Closed Days**/.eventsCalendar-daysList li.dayClosed a {background-color: #CC7070; color: #424242;}
/***Past Days**/.eventsCalendar-daysList li.dayPast.dayEmpty 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;}