fullcalendarリンクまたはボタンをクリックするとカレンダーが開きます

Question

http://fullcalendar.ioからfullcalendarを使用しています。私は別のユーザーに対してイベントが発生しているという要件を持っています。今では、特定のユーザーの特定のイベントで毎回カレンダーをロードする必要があります。

どうすればできますか？

おかげで、 モハメドここ

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