jquery - Fullcalendar，使用复选框添加和删除事件源

Question

我以另一种方式工作，但是当我在 ListView 中切换复选框时，即使事件不显示，日期也会显示。因此，现在我使用 addEventSource 和 removeEventSource 以不同的方式解决此问题，以便日期不再在 ListView 中呈现。

现在唯一的问题是，当我单击复选框时，什么也没有发生。有任何想法吗？除了下面的代码之外，我还创建了一个 fiddle以便更轻松地查看。

jQuery(document).ready(function($) {
  var source99 = [

    {
      title: 'Lets see if this works',
      start: '2017-09-14T13:00:00',
      end: '2017-09-14T14:00:00',
      allDay: '',
      url: '',
      color: '#7dc5d7',
      catid: '99',
      cat: 'all-events',
    },

    {
      title: 'Another Test Event',
      start: '2017-09-20T13:00:00',
      end: '2017-09-20T14:00:00',
      allDay: '',
      url: '',
      color: '#7dc5d7',
      catid: '99',
      cat: 'all-events',
    },

  ];
  var source100 = [

    {
      title: 'Test',
      start: '2017-08-10T10:00:00',
      end: '2017-08-12T12:00:00',
      allDay: '',
      url: '',
      color: '#f98b22',
      catid: '100',
      cat: 'conferences',
    },

    {
      title: 'Conference Event',
      start: '2017-08-23T08:00:00',
      end: '2017-08-23T09:30:00',
      allDay: '',
      url: '',
      color: '#f98b22',
      catid: '100',
      cat: 'conferences',
    },

  ];
  var source101 = [

    {
      title: 'Skeet Shooting & Cookout',
      start: '2017-09-30',
      end: '2017-09-30',
      allDay: '1',
      url: '',
      color: '#4776fd',
      catid: '101',
      cat: 'men',
    },

    {
      title: 'Movie Night – “Greater”',
      start: '2017-09-01',
      end: '2017-09-01',
      allDay: '1',
      url: '',
      color: '#4776fd',
      catid: '101',
      cat: 'men',
    },

  ];
  var source102 = [

    {
      title: 'Some Women’s Event',
      start: '2017-08-23T08:00:00',
      end: '2017-08-23T09:30:00',
      allDay: '',
      url: '',
      color: '#b300ec',
      catid: '102',
      cat: 'women',
    },

  ];
  var source103 = [

    {
      title: 'A Youth Event',
      start: '2017-08-21T15:15:00',
      end: '2017-08-21T22:00:00',
      allDay: '',
      url: '',
      color: '#36e4bc',
      catid: '103',
      cat: 'youth',
    },

  ];

  // Build Calendar
  $("#calendar").fullCalendar({

    displayEventEnd: true,
    timeFormat: 'h:mm A',
    theme: true,
    //aspectRatio: 1.2,
    header: {
      left: 'basicWeek,listSixMonths,today',
      center: 'title',
      right: 'prev,next'
    },

    defaultDate: '2017-08-22',
    defaultView: 'basicWeek',
    views: {
      basicWeek: {
        titleFormat: 'MMMM D, YYYY'
      },
      listWeek: {
        titleFormat: 'MMMM D, YYYY'
      },
      listSixMonths: {
        type: 'list',
        duration: {
          months: 6
        },
        buttonText: '6 Month List',
        titleFormat: 'MMMM D, YYYY'
      },
    },
    viewRender: renderViewColumns,
    eventSources: [
      source99,

      source100,

      source101,

      source102,

      source103,
    ]
  });

  // Create Checkboxes
  var checkboxContainer = `<ul class='ds-event-categories'>    
            <li id='cat99'><label><input id='all-events' type='checkbox' checked>All Events</label></li>
                <li id='cat100'><label><input id='conferences' type='checkbox' checked>Conferences</label></li>
                <li id='cat101'><label><input id='men' type='checkbox' checked>Men</label></li>
                <li id='cat102'><label><input id='women' type='checkbox' checked>Women</label></li>
                <li id='cat103'><label><input id='youth' type='checkbox' checked>Youth</label></li>
            </ul>`;

  // Append it to FullCalendar.
  $(".fc-toolbar").after(checkboxContainer);

  // Click handler

  $("#all-events").change(function() {
    if (this.checked) {
      $('#calendar').fullCalendar('addEventSource', 'source99');
    } else {
      $('#calendar').fullCalendar('removeEventSource', 'source99');
    }
  });

  $("#conferences").change(function() {
    if (this.checked) {
      $('#calendar').fullCalendar('addEventSource', 'source100');
    } else {
      $('#calendar').fullCalendar('removeEventSource', 'source100');
    }
  });

  $("#men").change(function() {
    if (this.checked) {
      $('#calendar').fullCalendar('addEventSource', 'source101');
    } else {
      $('#calendar').fullCalendar('removeEventSource', 'source101');
    }
  });

  $("#women").change(function() {
    if (this.checked) {
      $('#calendar').fullCalendar('addEventSource', 'source101');
    } else {
      $('#calendar').fullCalendar('removeEventSource', 'source101');
    }
  });

  $("#youth").change(function() {
    if (this.checked) {
      $('#calendar').fullCalendar('addEventSource', 'source102');
    } else {
      $('#calendar').fullCalendar('removeEventSource', 'source102');
    }
  });

  function renderViewColumns(view, element) {
    element.find('.fc-day-header').each(function() {
      var theDate = moment($(this).data('date')); /* th.data-date="YYYY-MM-DD" */
      $(this).html(buildDateColumnHeader(theDate));
    });

    function buildDateColumnHeader(theDate) {
      var container = document.createElement('div');
      var DD = document.createElement('div');
      var ddd = document.createElement('div');
      DD.textContent = theDate.format('DD');
      ddd.textContent = theDate.format('dddd').toUpperCase();
      container.appendChild(DD);
      container.appendChild(ddd);
      DD.className = 'ds-header-day';
      ddd.className = 'ds-header-month';

      return container;
    }
  }
});

Answer 1

我已经弄清楚了!我想归功于mikesmithdev为了获得一些见解，但是我做了一些升级。我确信还有更好的方法，但目前效果很好。

事件的平滑渲染

用 rerenderEVents 替换了 refetchEvents。

每个类别都有自己的功能，因此单击复选框时所有事件都不会闪烁。

事件源是事件对象

我发现，使用事件对象而不是 JSON 提要的链接(甚至本地托管)时，单击打开和关闭时事件的加载时间是无缝的。

不再需要两个事件实例

由于我们不再加载事件、删除所有点击事件并在点击时重新加载另一个版本的事件，因此我们只需要 1 个版本的事件。

日历内的复选框过滤器

我需要将复选框放在 fc 工具栏下方。我附加了这些，以便它们加载得漂亮且干净。

周 View 的自定义列标题

我需要将其设置为默认的 basicWeek View ，因为每天都会有很多事件。这让一切变得更加美好。

这是更新后的 JSFiddle

JSFiddle

这是我的 jQuery 代码:

jQuery(document).ready(function($) {

var eventSource = new Array();
eventSource[0] = [{"title":"Lets see if this works","start":"2017-09-14T13:00:00","end":"2017-09 14T14:00:00","allDay":true,"url":"","color":"#7dc5d7","catID":99,"cat":"all-events"},{"title":"Another Test Event","start":"2017-09-20T13:00:00","end":"2017-09-20T14:00:00","allDay":true,"url":"","color":"#7dc5d7","catID":99,"cat":"all-events"}];
eventSource[1] = [{"title":"Test","start":"2017-08-10T10:00:00","end":"2017-08-12T12:00:00","allDay":true,"url":"","color":"#f98b22","catID":100,"cat":"conferences"},{"title":"Conference Event","start":"2017-08-23T08:00:00","end":"2017-08-23T09:30:00","allDay":true,"url":"","color":"#f98b22","catID":100,"cat":"conferences"}];
eventSource[2] = [{"title":"Skeet Shooting & Cookout","start":"2017-09-30","end":"2017-09-30","allDay":true,"url":"","color":"#4776fd","catID":101,"cat":"men"},{"title":"Movie Night \u2013 \u201cGreater\u201d","start":"2017-09-01","end":"2017-09-01","allDay":true,"url":"","color":"#4776fd","catID":101,"cat":"men"}];
eventSource[3] = [{"title":"Some Women\u2019s Event","start":"2017-08-23T08:00:00","end":"2017-08-23T09:30:00","allDay":true,"url":"","color":"#b300ec","catID":102,"cat":"women"}];
eventSource[4] = [{"title":"A Youth Event","start":"2017-08-21T15:15:00","end":"2017-08-21T22:00:00","allDay":true,"url":"","color":"#36e4bc","catID":103,"cat":"youth"}];

$('#calendar').fullCalendar({
    displayEventEnd: true,
    timeFormat: 'h:mm A',
    theme: true,
    header: {
        left: 'basicWeek,listSixMonths,today',
        center: 'title',
        right: 'prev,next'
    },
    defaultDate: '2017-08-23',
    defaultView: 'basicWeek',
    views: {
        basicWeek: {
            titleFormat: 'MMMM D, YYYY'
        },
        listWeek: {
            titleFormat: 'MMMM D, YYYY'
        },
        listSixMonths: {
            type: 'list',
            duration: { months: 6 },
            buttonText: '6 Month List',
            titleFormat: 'MMMM D, YYYY'
        },
    },
    viewRender: renderViewColumns,
    eventRender: function (event, element) {
        element.attr('href', 'javascript:void(0);');
    },
    eventSources: [eventSource[0],eventSource[1],eventSource[2],eventSource[3], eventSource[4]],
});

// Create Checkboxes
var checkboxContainer = `<ul class='ds-event-categories'>    
<li id='cat99'><label><input id='all-events' type='checkbox' checked>All Events</label></li>
<li id='cat100'><label><input id='conferences' type='checkbox' checked>Conferences</label></li>
<li id='cat101'><label><input id='men' type='checkbox' checked>Men</label></li>
<li id='cat102'><label><input id='women' type='checkbox' checked>Women</label></li>
<li id='cat103'><label><input id='youth' type='checkbox' checked>Youth</label></li>
</ul>`;

// Append it to FullCalendar.
$(".fc-toolbar").after(checkboxContainer);

$("#all-events").change(function() {
    if (this.checked) {
        $('#calendar').fullCalendar('addEventSource', eventSource[0]);
    } else {
        $('#calendar').fullCalendar('removeEventSource', eventSource[0]);
    }
    $('#calendar').fullCalendar('rerenderEvents');
});

$("#conferences").change(function() {
    if (this.checked) {
        $('#calendar').fullCalendar('addEventSource', eventSource[1]);
    } else {
        $('#calendar').fullCalendar('removeEventSource', eventSource[1]);
    }
    $('#calendar').fullCalendar('rerenderEvents');
});

$("#men").change(function() {
    if (this.checked) {
        $('#calendar').fullCalendar('addEventSource', eventSource[2]);
    } else {
        $('#calendar').fullCalendar('removeEventSource', eventSource[2]);
    }
    $('#calendar').fullCalendar('rerenderEvents');
});

$("#women").change(function() {
    if (this.checked) {
        $('#calendar').fullCalendar('addEventSource', eventSource[3]);
    } else {
        $('#calendar').fullCalendar('removeEventSource', eventSource[3]);
                        }
    $('#calendar').fullCalendar('rerenderEvents');
});

$("#youth").change(function() {
    if (this.checked) {
        $('#calendar').fullCalendar('addEventSource', eventSource[4]);
    } else {
        $('#calendar').fullCalendar('removeEventSource', eventSource[4]);
    }
    $('#calendar').fullCalendar('rerenderEvents');
});

function renderViewColumns(view, element) {
    element.find('.fc-day-header').each(function() {
        var theDate = moment($(this).data('date')); /* th.data-date="YYYY-MM-DD" */
        $(this).html(buildDateColumnHeader(theDate));
});

function buildDateColumnHeader(theDate) {
    var container = document.createElement('div');
    var DD = document.createElement('div');
    var ddd = document.createElement('div');
    DD.textContent = theDate.format('DD');
    ddd.textContent = theDate.format('dddd').toUpperCase();
    container.appendChild(DD);
    container.appendChild(ddd);
    DD.className = 'ds-header-day';
    ddd.className = 'ds-header-month';

    return container;
    }
    }
});