Fullcalendar - Change View for Mobile Devices

$(document).ready(function() {    $('#calendar').fullCalendar({      header: {        left: 'prev,next today',        center: 'title',        right: 'month,agendaWeek,agendaDay,listWeek'      },      defaultView: 'agendaWeek',      defaultDate: '2018-03-12',      events: [      {        title: 'All Day Event',        start: '2018-03-01',      },      {        title: 'Long Event',        start: '2018-03-07',        end: '2018-03-10'      },      {        id: 999,        title: 'Repeating Event',        start: '2018-03-09T16:00:00'      },      {        id: 999,        title: 'Repeating Event',        start: '2018-03-16T16:00:00'      },      {        title: 'Conference',        start: '2018-03-11',        end: '2018-03-13'      },      {        title: 'Meeting',        start: '2018-03-12T10:30:00',        end: '2018-03-12T12:30:00'      },      {        title: 'Lunch',        start: '2018-03-12T12:00:00'      },      {        title: 'Meeting',        start: '2018-03-12T14:30:00'      },      {        title: 'Happy Hour',        start: '2018-03-12T17:30:00'      },      {        title: 'Dinner',        start: '2018-03-12T20:00:00'      },      {        title: 'Birthday Party',        start: '2018-03-13T07:00:00'      },      {        title: 'Click for Google',        url: 'http://google.com/',        start: '2018-03-28'      }      ],      eventAfterAllRender: function(view) {        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {          $('#calendar').fullCalendar('changeView', 'agendaDay');        } //IF MOBILE CHANGE VIEW TO AGENDA DAY      }    });  });

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css'><div id='calendar'></div>

Fullcalendar callback on mobile devices

It turned out that Angular Material 1.1.10 interfere with fullcalendar. It overrides touch handling in some way. And event is recognized as mousedown instead of touchstart.

Solution is to remove all pointer events from:

var START_EVENTS = 'mousedown touchstart pointerdown';
var MOVE_EVENTS = 'mousemove touchmove pointermove';
var END_EVENTS = 'mouseup mouseleave touchend touchcancel pointerup pointercancel';

via https://stackoverflow.com/a/42620599/5940387

How to make FullCalendar work on touch devices?

Have you tried including the Jquery UI Touch Punch?

By default, Jquery UI doesn't support Touch Events because it wasn't optimized for mobile devices.
Touch Punch solved my problems with the Jquery UI Drag&Drop functionalities, which seem to be used by FullCalendar as well.

Hope it helps!

fullcalendar dynamically change default view based on screen width

If by "dynamically change" you mean you want to change it when the user resizes their browser, then you need to listen for window resize.

$(window).resize(function() {
  if(window.innerWidth < 800){
    $('#event_calendar').fullCalendar('changeView', 'agendaDay');
  } else {
    $('#event_calendar').fullCalendar('changeView', 'agendaWeek');
  }
});

But also check your browser console for errors. It looks like as of version 4.0+ those views have been renamed see changelog so you may need to pass different view names like this:

$(window).resize(function() {
  if(window.innerWidth < 800){
    $('#event_calendar').fullCalendar('changeView', 'timeGridDay');
  } else {
    $('#event_calendar').fullCalendar('changeView', 'timeGridWeek');
  }
});

FullCalendar.js adjust header for mobile

Give each of them a width:100%; and display:block; that should do the trick.
At least I was able to get the demo one on teh fullcalendar.js website to do that.
You will then have to align them as you see fit.

.fc-header-left, fc-header-center, fc-header-right {
    width: 100%;
    display: block;
}

---

Related Topics