javascript - jQuery ウィーク カレンダー プラグインで営業時間外をグレー表示する

Question

jQuery weekcalendar プラグインを使用して、イベントを含む Web ベースのカレンダーを表示しています。営業時間外をグレーアウトするにはどうすればよいですか? 営業時間外の場合、行全体が灰色になります。

businessHours: {start: 8, end: 19, limitDisplay: false},

Answer 1

まず、次のように営業時間にグローバル変数を使用する必要があります。

var timeStart = 8
var timeEnd = 19

businessHours: {start: timeStart , end: timeEnd , limitDisplay: false},

次に、ドキュメントの準備ができたら (カレンダーが作成された後)、これを jquery JavaScript に追加してみてください。

$('.wc-time-slot').each(function(index, element) {
    if (index<6*timeStart||index>=6*timeEnd) {
        $(this).css('background-color','#eee')
    }
});

1 時間あたり 6 行なので、6 を掛けます。

Answer 2

Edit: Incomplete answer. It doesn't highlight the whole row.

Thanks to Phekka I found this in the Inspect element section:

Non-Business-Hours:

<div class="wc-hour-header ui-state-default"></div>

Business-Hours:

<div class="wc-hour-header ui-state-active wc-business-hours"></div>

Answer 3

少し難しいです。td.wc-day-column背景のプロパティで管理し、計算されたピクセルまたはパーセント値でcss3 グラデーションを追加する必要があると思います 。

幸運を。