フルカラーでイベントの一部を隠す/表示する

Question

大学生が使うフルカレンダー付きのカレンダーベースのWebアプリケーションを構築しています。私が定義したいくつかのカテゴリがあります。たとえば、スポーツ、アート、マインドなど...フルカレンダーのすべてのイベントはカテゴリに割り当てられます。私は何をしたいか

は次のようになります。そこに、カレンダーの上のカテゴリーに対応するいくつかのチェックボックスをしているため、ユーザーはいくつかをチェックしたりオフにすることができます

どのように私はこれを達成する関連イベントを表示/非表示にするcheckboxed ？

Answer 1

1つの方法は、カレンダーに送信するイベントオブジェクトの 'className'プロパティを設定し、jqueryを使用してこれらのイベントを非表示にすることです（$（。myClassName）.hide（） ）チェックボックスをチェックするとき。問題は、あなたが望むものではないかもしれないギャップを残してイベントが消えてしまうことです。

良い方法は、あなたが最初にこのようfullCalendarを呼び出すときに、イベントオプションにフィルタ機能を追加することです：

fullCalendar({ 
... 
events: { 
    url: ...., 
    success: function(events) { 
    $.map(events, function (e) { 
     if (userHasFilteredOut(e)) 
     return null; 
     else 
     return e; 
    }); 
    }, 
... 
}); 

それらが表示される前に、このイベントを除外します。関数userHasFilteredOutは、渡されたイベントオブジェクトが、ユーザーのチェックボックスの値が除外されているクラスである場合にtrueを返します。ユーザーがチェックボックスをオンまたはオフにすると、サーバーからすべてのイベントを再フェッチする必要があります。あなたはこれをする必要があります：

$('#mycal').fullCalendar('refetchEvents');