Question

如何在移动设备上调整Fullcalendar的大小？我想在台式机和平板电脑上显示“ archiveWeek”，但是在移动设备上，我想显示“议程” Day。我该怎么办？

Answer 1

我使用了eventAfterAllRender。该功能将处理检查，如果用户使用的是移动设备，则该移动设备将使用changeView方法将日历视图从默认的agendaWeek更改为agendaDay。

$(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>

完整日历移动版视图

1 个答案: