3

イベントの種類に応じて、またはその日に満席の場合は、利用できない日付を異なる色で表示する必要があります。

[2012,7, 15, 'Some events']以下の例では、データベースから日付をフェッチし、それらを配列としてJavaScriptに渡します。現在、Year、Month、Day、Yearsなどの配列で4つのパラメーターを渡しています 。この配列を変更して、5番目のパラメーターをcolorとして渡すようにします[2012,7, 15, 'Some events', 'Red']。イベントの種類に基づいてセルの色を変更できるようにします。

以下のスクリプトをどのように変更して機能させるかはわかりません。たとえば探しましたが、一致するものが見つかりませんでした。私はスクリプトの第一人者ではないので、この点で助けていただければ幸いです。

function BindEvents()
{
//Script for Calendar
        var holiDays = [[2012,7, 15, 'Some events'],[2012,7, 4, 'Some Event'],[2012,7, 1, 'Full Booked'],[2012,7, 5, 'Full Booked']];
        $(function () {
            $("#txtBookDate").datepicker({
                dateFormat: "yy-mm-dd",
                minDate: "-0d",
                maxDate: "+90d",
                firstDay: 0,
                beforeShowDay: noWeekendsOrHolidaysOrBlockedDates
            });

            function noWeekendsOrHolidaysOrBlockedDates(date) {
                //var noWeekend = jQuery.datepicker.noWeekends(date);
                return setHoliDays(date);
            }

            // set holidays function which is configured in beforeShowDay
            function setHoliDays(date) {
                var day = date.getDay();
                if (day == 5 || day ==6) return [false, ''];

                for (i = 0; i < holiDays.length; i++) {
                    if (date.getFullYear() == holiDays[i][0]
                        && date.getMonth() == holiDays[i][1] - 1
                        && date.getDate() == holiDays[i][2]) {
                        return [false, 'holiday', holiDays[i][3]];
                    }
                }
                return [true, ''];
            }
        });
}

BindEvents();
4

1 に答える 1

5

細かいマニュアルから：

beforeShowDay

日付をパラメーターとして受け取り、次の配列を返す必要がある関数：

  • [0]：true/falseこの日付が選択可能かどうかを示します
  • [1]：日付のセルに追加する、または""デフォルトのプレゼンテーション用のCSSクラス名
  • [2]：この日付のオプションのポップアップツールチップ

この関数は、表示される前に、日付ピッカーで毎日呼び出されます。

したがって、特定の色の戻り値には余裕がありません。ただし、配列の要素1には複数のクラス名を含めることができるため、CSSを介して行うことができます。

特定の休日を赤いテキストで表示したい場合は、次のように実行できますbeforeShowDay。

return [false, 'holiday red', holiDays[i][3]];

次に、CSSを少し追加します。

td.red span.ui-state-default {
    color: #f00;
}

redクラスに何かをさせるために。

デモ： http： //jsfiddle.net/ambiguous/pjJGf/

于 2012-06-24T07:21:57.050 に答える