FullCalendar – Cambiar vista para dispositivos móviles

Contamos con la mejor respuesta que encontramos en todo internet. Nosotros deseamos que te resulte de utilidad y si quieres comentarnos algún detalle que nos pueda ayudar a perfeccionar nuestra información hazlo libremente.

Solución:

Esto funcionará si desea usar el ancho de la ventana y no la función de detección móvil.

defaultView: $(window).width() < 765 ? 'basicDay':'agendaWeek',

Utilice la función para detectar el móvil:

window.mobilecheck = function() navigator.vendor;

Después de eso, al iniciar el calendario, llame a esta función y configure la vista predeterminada de esta manera:

defaultView: window.mobilecheck() ? "basicDay" : "agendaWeek"

En la última versión del calendario completo (4.3.1) necesitas hacer lo siguiente:

document.addEventListener('DOMContentLoaded', function() 
    var calendarTest = document.getElementById('calendar')
    /* Create function to initialize the correct view */
    function mobileCheck() 
        if (window.innerWidth >= 768 ) 
            return false;
         else 
            return true;
        
    ;
    /* Start Full Calendar */
    var calendar = new FullCalendar.Calendar(calendarTest, 
            plugins: [ 'dayGrid' ],
            /* Create new view */
            views: 
                fiveDays: 
                    type: 'dayGridWeek',
                    duration:  days: 5 ,
                
            ,
            /* Choose view when initialize */
            defaultView: mobileCheck() ? "fiveDays" : "dayGridWeek",
            /* Check if window resize and add the new view */
            windowResize: function(view) 
                if (window.innerWidth >= 768 ) 
                    calendar.changeView('dayGridWeek');
                 else 
                    calendar.changeView('fiveDays');
                
            ,
            editable: true,
        );
        calendar.render();
    );
});

Aquí tienes las comentarios y valoraciones

Recuerda algo, que puedes optar por la opción de agregar una reseña si hallaste tu dilema en el momento oportuno.

---

---

Utiliza Nuestro Buscador