0

従業員のシフトを計画するために Web アプリケーションで FC を使用しています。ユーザーがスロットを追加し、1 人または複数の従業員をこのスロットに割り当てます (または自分で割り当てます)。これは魅力のように機能します。

今、私は新しい機能を求められました - 毎日の一番上に配置された「カウンター」です (basicWeek、agendaWeek、agendaDay にはこれが必要です)。

このカウンターには、この日付に予定されている時間数と、その他の同様の情報が表示されます。

私の問題は、THEAD に新しい TR を追加する方法 (毎日 1 つ) か、視覚的に希望する場所である AllDaySlot を使用する方法です。現在、以下のコードを使用して、アジェンダウィークとベーシックウィークの各日の上部にメニューを追加しています。ループにプレースホルダーを追加しようとしましたが、うまくいきませんでした。

これに関するあなたの知的な意見を楽しみにしています:D

if (view.name === 'agendaWeek' || view.name === 'basicWeek') {
                // Add the "dropdowns" to the day headers
                var $headers = $('.fc-widget-header.fc-sun, .fc-widget-header.fc-mon, .fc-widget-header.fc-tue, .fc-widget-header.fc-wed, .fc-widget-header.fc-thu, .fc-widget-header.fc-fri, .fc-widget-header.fc-sat, .fc-day-header.fc-sun, .fc-day-header.fc-mon, .fc-day-header.fc-tue, .fc-day-header.fc-wed, .fc-day-header.fc-thu, .fc-day-header.fc-fri, .fc-day-header.fc-sat');
                $headers.css('position', 'relative');
                $headers.each(
                    function(){
                        var _d = $(this).html().substring(4);
                        $(this).prepend("<div class='topdropdown' style='position: absolute; left: 0;' onmouseover='showDayMenu(\""+ _d +"\",this);'><span class='icon12 icomoon-icon-grid-view-2'></span></div>");
                        var _date = $(this).attr("class").match("fc-col[0-9]"));
                        //$(this).parent().find(".fc-widget-content").html("<div class='topcounter' style='position: absolute; left: 0;'>"+ _date +"</div>");
                    }
                );
            }

編集 2013-08-14: 新しい TR を THEAD に追加しようとしたところ、結果は... 期待どおりではありませんでした :) 新しい TR を THEAD に追加し、オレンジ色の縁取りの DIV をプレースホルダーとして挿入しましたが、下の行は「下に移動」しませんでした - 本当に FC の CSS を変更しなければならないのでしょうか? http://img5.imageshack.us/img5/7743/31fv.png

あなたの一人が答えを持っていることを本当に願っています:?

よろしく、マーク

4

1 に答える 1

1

これは質問に対する直接の回答ではなく、同じタスクを達成するために使用した回避策です。

私の場合、開始時間と終了時間のタイトルなどで fullCalendar に追加したい要素の JSON 配列を返しましたが、上部に毎日の時間の値が必要でした (終日スロットが望ましい)。

月の範囲内で毎日繰り返し、その日の合計時間と開始時刻のみを含む新しい配列オブジェクトをイベント オブジェクトに追加し、これらの毎日のカウンターと実際のイベントを区別する共通の属性を追加しました。

イベントをカレンダーにレンダリングするとき、allDay を true に設定し、それらをロックします。次に例を示します。

{ 'title': item.Summary, 'start': item.Start, 'allDay': true,'startEditable': false, 'description': 'Counter' }

item.Summary は、サーバーからの時間数を含む文字列です ("Hrs: [#]")。

item.Start はカウンター当日の午前 0 時に設定されます。

これにより、それらはドラッグできなくなり、小さくなり、毎日の一番上に表示されます (もちろんビューに関係なく)。最初にこれらのカウンター オブジェクトを配列オブジェクトに入力して、それらがページの上部に表示されるようにします。

繰り返しますが、これはあなたの質問に直接対処するものではありませんが、探している結果を可能にします。

（私はこれを理解してセットアップするのに数時間を費やしました-最初のスタックオーバーフローの投稿です！）

于 2014-02-06T20:06:58.170 に答える