fullcalendar单击链接或按钮即可打开日历

Question

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

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

谢谢，Mohammad

Answer 1

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

https://jsfiddle.net/o8f51413/

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?
})