Question

我正在使用http://fullcalendar.io的fullcalendar。我有一个要求，我有针对不同用户的事件，我已经列出了所有这些用户，我现在想要的是当我点击顶部的某个用户链接时，每次都应该加载该特定用户的特定事件。

我怎样才能使它成为可能？

谢谢，穆罕默德

Answer 1

以下是静态事件数组和注释代码部分的示例代码，用于转换为ajax / json提要

<强> HTML

<div id='users'>
  <input id='user1' name='userRadio' type='radio' value='1' checked>
  <label for='user1' class='userLabel'>User 1</label>
  <input id='user2' name='userRadio' type='radio' value='2'>
  <label for='user2' class='userLabel'>User 2</label>
  <input id='user3' name='userRadio' type='radio' value='3'>
  <label for='user3' class='userLabel'>User 3</label>
</div>
<div id='calendar'></div>

<强> CSS

input[name='userRadio'] {
  display: none;
}

input[name='userRadio']:checked + label.userLabel {
  background-color: #CEF;
}

label.userLabel {
  height: 30px;
  width: 50px;
  border: 1px solid black;
  display: inline-block;
  text-align: center;
  line-height: 30px;
}

label.userLabel:hover {
  background-color: #CEA;
}

<强> JS

$('#calendar').fullCalendar({
  // AJAX based event source you can send userId to server to filter there instead
  /*
  eventSources: [{
    url: 'calendar.php',
    type: 'GET',
    data: {
      userId: function() {
        return $("input[name='userRadio']:checked").val();
      }
    }
  }],
  */
  events: [{
    start: moment().add(1, 'day').format('YYYY-MM-DD'),
    title: 'User 1 event',
    userId: 1
  }, {
    start: moment().add(2, 'day').format('YYYY-MM-DD'),
    title: 'User 2 event',
    userId: 2
  }, {
    start: moment().add(3, 'day').format('YYYY-MM-DD'),
    title: 'User 3 event',
    userId: 3
  }],
  /* if using AJAX event source you shouldn't need this since
     server side should be set to only supply that users' events */
  eventRender: function(event, element, view) {
    var user = $("input[name='userRadio']:checked").val();
    return event.userId == user;
  }
});

$("input[name='userRadio']").on("click", function() {
  $('#calendar').fullCalendar('refetchEvents'); // rerenderEvents if static events?
})

单击链接或按钮时，fullcalendar打开日历

1 个答案: