Calendario no responsive

Hola Lourdes,

He estado revisando el calendario que nos comentas pero parece ser que ya la vista por "Mes" si que es responsive permitiendo hacer scroll lateral entre los dias

Este es un comportamiento estandar en tablas responsivas para no compactar todo el contenido y el usuario pueda ver todas las fechas desplazándose a los lados

Por otro lado al estar indagando en la estructura pude fijarme que el calendario esta creado bajo los modulos de Essential Addons para Elementor

https://essential-addons.com/docs/event-calendar/

Puedes validar entre sus opciones si hay alguna otra disposición en mobile que te parezca mas adecuada

Saludos!

@bruno-vichetti Gracias por tu respuesta, lo que dices es correcto se puede desplazar pero no es intuitivo. no es posible mediante css hacer que se visualice completo el calendario mensual? Si no fuese posible, ¿Podrias indicarme si mediante css se puede ocultar el boton de Mes, semana y dia? Asi dejaría en el movil visible solo la opcion de agenda, la cual me parece es la mas adecuada para movil.

Ademas al hacer click en el evento puedo ver en movil que el formulario se ve con poca altura, ¿se le podria dar mas altura a esa ventana emergente para que se muestre mas formulario y se entienda que haciendo scroll van a poder rellenarlo y apuntarse?

Muchas gracias.

Que tal Lourdes,

Todos estos ajustes que te gustaria implementar son para la vista en moviles es correcto?

De ser asi vamos por partes, primero deseas ocultar las opciones de Dia, Semana y Mes

Seguido de ello es hacer que la ventana desplegable del evento tenga mas altura

Para lograrlo puedes usar los siguientes estilos CSS

@media only screen and (max-width: 767px) {
.fc-timeGridDay-button, .fc-timeGridWeek-button, .fc-dayGridMonth-button{
display: none;
}
.eael-event-calendar-wrapper .eaelec-modal-body {
height: 500px;
}
}

Prueba y nos comentas

Saludos!

@bruno-vichetti Gracias ahora el formulario al hacer click tiene mas altura.

Entiendo por tu respuesta que no es entonces posible mediante css hacer que se visualice completo el calendario mensual verdad?

Si no fuese posible solo me quedaria como opcion en el movil la eliminacion de los botones, segun el css que me mandaste no funcionó.

Si dejo la opcion de agenda en el movil veo que se queda un espacio enorme vacio del calendario al footer, si le quito margen se queda como muestro en la imagen, con las rayas laterales..

Hola Lourdes

La visualización de los días no se puede modificar ya que no cabrían todas las columnas o los datos serian tan pequeños que complicaría la visualización.

Puedes probar lo siguiente:

@media (max-width: 768px) {
.eael-event-calendar-wrapper,
.eael-event-calendar-wrapper .fc {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100% !important;
}

.eael-event-calendar-wrapper .fc-daygrid table {
width: 100% !important;
table-layout: fixed !important;
}

.eael-event-calendar-wrapper .fc-daygrid td,
.eael-event-calendar-wrapper .fc-daygrid th {
width: 14.2857% !important; /* 100% / 7 días */
padding: 2px !important;
box-sizing: border-box;
word-break: break-word !important;
overflow-wrap: break-word !important;
height: auto !important;
min-height: 80px;
}


.eael-event-calendar-wrapper .fc-daygrid-day-frame,
.eael-event-calendar-wrapper .fc-event {
max-width: 100% !important;
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}


.eael-event-calendar-wrapper .fc-daygrid-day {
min-width: 0 !important;
}
}

Con esto evitas el Scroll

Un Saludo