web-dev-qa-db-ja.com

フルカレンダーにイベントホバーテキストを追加する

フルカレンダーの月間カレンダーページにイベントのホバーテキストを含めようとしています。

Phpスクリプトによってロードされたページに存在する必要があるイベントを宣言する配列オブジェクトがあります。次のようになります。

$('#calendar').fullCalendar({
events: [
    {
        title  : 'event1',
        start  : '2010-01-01'
    },
    {
        title  : 'event2',
        start  : '2010-01-05',
        end    : '2010-01-07'
    }
]

}）;

EventMouseover関数を使用して、各イベントにホバーテキストを含めようとしています。この関数のプロトタイプは次のとおりです。function（event、jsEvent、view）{}ここで、eventはイベントオブジェクトであり、jsEventはマウス座標などの低レベルの情報を持つネイティブJavaScriptイベントです。ビューはfullcalendarのビューオブジェクトを保持します。この関数の引数を正しく呼び出すことができません。私の情報はここから来ています： http://arshaw.com/fullcalendar/docs/mouse/eventMouseover/ そして私は各イベントでホバーテキストを達成する他の方法で完全にクールです。ありがとうございました。

javascriptjqueryfullcalendar
13
usumoio

あなたは正しい方向に進んでいます。アジェンダビューのイベントの下部にイベントの終了時刻を表示するのと同じようなことをしました。

カレンダーのオプション：

eventMouseover: function(event, jsEvent, view) {
    $('.fc-event-inner', this).append('<div id=\"'+event.id+'\" class=\"hover-end\">'+$.fullCalendar.formatDate(event.end, 'h:mmt')+'</div>');
}

eventMouseout: function(event, jsEvent, view) {
    $('#'+event.id).remove();
}

ホバーオーバーのCSS：

.hover-end{padding:0;margin:0;font-size:75%;text-align:center;position:absolute;bottom:0;width:100%;opacity:.8}

うまくいけば、これはあなたを助けます！

23
Michael Irigoyen

ブートストラップなしで、ブラウザのツールチップだけを追加するのがさらに簡単

eventRender : function(event, element) {
   element[0].title = event.title;
}
6
Lurkars

ブートストラップを使用している場合、これは非常に洗練されたソリューションです。

 eventRender: function(event, element) {
     $(element).tooltip({title: event.title});
 }

（私はこの答えからそれを得ました： https://stackoverflow.com/a/27922934/294131 ）

4
Lech Osiński