5

私は FullCalendar を稼働させていますが、とても快適です。ここでの私の質問は、タイムスロット ホバー機能を実装する最善の方法です。ユーザーがホバリングしている特定のタイムスロットの視覚的な合図を得ることができれば、非常に便利です。

次のリンクhttp://code.google.com/p/fullcalendar/issues/detail?id=269を見つけました。これは、個々のセルへのアクセスを提供するために、アジェンダ セル行に新しい構造を追加するソリューションを提供します。ただし、この解決策により、FullCalendar が遅くなることが示されています。

FullCalendar のコードを調べ始める前に、他の誰かにアイデアや解決策がないか尋ねてみようと思いました。

これにアプローチすることについての私の考えは次のとおりです。

  1. 各タイムスロットにプレースホルダー イベントを追加します。ユーザーにはこれらのイベントは表示されませんが、これらの非表示のイベントを使用して「ホバー」マークを付けることができます。ここでの私の懸念は、余分なイベントを追加すると、FullCalander が遅くなることです。また、ドラッグ アンド ドロップ機能が影響を受ける可能性があります。

  2. FullCalender は、ユーザーがクリックしたタイムスロットを特定できます。ホバー ハイライトの参照を提供するために、クリックされたタイムスロットを取得するコードを使用することは可能でしょうか?

  3. 他の？

オプション 2 を開始する場所として検討しています。しかし、誰かが実行可能な解決策について別のアイデアを持っているなら、私はそれを聞いてうれしいです.

解決策が思いついたら、ここに投稿します。

ありがとう、

ジム

FullCalendar サイトへのリンクは次のとおりです
。

4

3 に答える 3

2

実際にクリックしているタイムスロットを確認するのが難しい場合があるため、同じ問題がありました。これを修正するために、fullcalendar.js を変更する行を書きました。理想的な解決策ではありませんが、簡単に修正できます。

これは行です：

"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" +

そしてそれを内部に配置しました（コード行3080付近）：

"<th class='fc-agenda-axis " + headerClass + "'>" +
((!slotNormal || !minutes) ? formatDate(d, opt('axisFormat')) : '&nbsp;') +
"</th>" +
"<td class='" + contentClass + "'>" +
"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" +
"<div style='position:relative'>&nbsp;</div>" +
"</td>" +

これで、.ui-widget-content クラスを持つすべての fc-slots にツールチップ ホバーを配置することができます (<td>上記のコードに表示されているもの)。そして、そのツールチップに表示する非表示の入力値を取得します。

jQuery の場合、ライブ イベントを使用して、対応する最初の子を取得し、その値を取得できます。

extJSの場合

Ext.onReady(function(){

Ext.QuickTips.init();

var tip = Ext.create('Ext.tip.ToolTip', {
    target: 'your-calendar-id',
    width: 140,
    minHeight: 30,
    delegate: '.ui-widget-content',
    autoHide: false,
    renderTo: Ext.getBody(),
    listeners: {
        beforeshow: function updateTipBody(tip) {
            tip.update('<dl><dt style="font-weight: 600;"><?php echo $this->translate('Start time')?>: </dt><dd>' + Ext.get(this.triggerElement).first().getValue() + '</dd></dl>');
        }
    }
}); 
});
于 2012-08-07T10:48:01.270 に答える