1

我正在尝试设置一个具有多个视图的日历，除了每个视图上显示的事件外，这些视图都是相同的。我可以通过 viewSkeleton Render 回调按 ID 删除 EventSources - 但我无法将 EventSource 添加回日历。

广泛搜索了切换可见性的方法和类似的东西 - 但大多数结果都是针对以前版本的 FullCalendar - 试图在 v4 中实现这一点。

简化测试用例： https ://codepen.io/jacobcboe/pen/MReJep

我实际上是在尝试使用 Google Calendar EventSources 执行此操作，但为简单起见，使用数组事件作为测试用例。

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'timeGrid' ],
    views: {
	    view1: {
			type: 'timeGrid',
			duration: { days:7 },
			buttonText: 'view1'
		},
		view2: {
			type: 'timeGrid',
			duration: { days:7 },
			buttonText: 'view2'
		},
		view3: {
		    type: 'timeGrid',
			duration: { days:7 },
			buttonText: 'view3'
		},
		view4: {
			type: 'timeGrid',
			duration: { days:7 },
			buttonText: 'view4'
		}			
	},
    defaultView: 'view1',
    defaultDate: '2019-04-05',
    header: {
      left: 'view1,view2,view3,view4',
      center: '',
      right: ''
    },
    eventSources: [
      {
        id:'1',
        events: [
        {
          title: 'All Day Event',
          start: '2019-04-05'
        },
        {
          title: 'Long Event',
          start: '2019-04-06',
          end: '2019-04-07'
        }]
      },
      {
        id:'2',
        events:[
          {
            groupId: '999',
            title: 'Repeating Event',
            start: '2019-04-05T16:00:00'
          },
          {
            groupId: '999',
            title: 'Repeating Event',
            start: '2019-04-06T16:00:00'
          },
          {
            title: 'Conference',
            start: '2019-04-05',
            end: '2019-04-10'
          }]
      },
      {
        id:'3',
        events: [
          {
        title: 'Meeting',
        start: '2019-04-09T10:30:00',
        end: '2019-04-09T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2019-04-08T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2019-04-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        start: '2019-04-07T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2019-04-11'
      }]
      }
    ],
    viewSkeletonRender: function(info) {
      var eventSourceOne = calendar.getEventSourceById('1');
      eventSourceOne.remove();
      var eventSourceTwo = calendar.getEventSourceById('2');
      eventSourceTwo.remove();
      var eventSourceThree = calendar.getEventSourceById('3');
      eventSourceThree.remove();
      //also tried calendar.getEvents() with remove
      var viewName = info.view
      if(viewName.type =='view1'){
        calendar.addEventSource(eventSourceOne);
        //have also tried eventSourceOne.refetch()
      }
      if(viewName.type =='view2'){
        calendar.addEventSource(eventSourceTwo);
      }
      if(viewName.type =='view3'){
        calendar.addEventSource(eventSourceThree);
      }
      if(viewName.type =='view4'){
        calendar.addEventSource(eventSourceOne);
        calendar.addEventSource(eventSourceTwo);
        calendar.addEventSource(eventSourceThree);
      }
    }
  });

  calendar.render();
});
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}
<script src="https://fullcalendar.io/releases/timegrid/4.0.1/main.min.js"></script>
<script src="https://fullcalendar.io/releases/daygrid/4.0.1/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.0.2/main.min.js"></script>
<script src="https://fullcalendar.io/releases/core/4.0.2/main.min.js"></script>
<link href="https://fullcalendar.io/releases/timegrid/4.0.1/main.min.css" rel="stylesheet"/>
<link href="https://fullcalendar.io/releases/daygrid/4.0.1/main.min.css" rel="stylesheet"/>
<link href="https://fullcalendar.io/releases/core/4.0.2/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>

4

0 回答 0