2

arshaw フル カレンダーのセルの色を変更する必要があります。

私の要件は次のとおりです。会社が提供する休日のリストの td セルには同じ色が必要です。従業員が取得した休日のリストの td セルには同じ色が必要です。

これを達成する方法.イベントの色は変更できますが、セルは変更できません。

また、休日や休暇に応じて、セル内の日の色を変更できれば。

4

4 に答える 4

5

Jquery-Ui テーマを使用している場合は、ui-widget-content クラスを削除して独自のクラスを適用する必要があります。以下のコードでは、紫色の単色の 40x100 の画像を使用しています。

CSS

.holiday
{
    border:1px solid #69196c;
    background: #764ead url(holiday.png) 50% top repeat-x; 
    color: white;   
}

JS フルカレンダー

dayRender: function (date, cell) {

    if ($.inArray(date, holidays) >= 0) {

        // if you aren't using ui theme, just remove this line
        $(cell).removeClass('ui-widget-content');                            
        $(cell).addClass('holiday');

    }
}
于 2013-08-28T12:59:35.203 に答える
3

fullCalendar のセルはテーブル セルです。イベントは、これらのセルの上に浮動 div としてレンダリングされます。月ビューでは、各日セルにクラスが関連付けられているとしましょう。日曜日は「fc-sun」、月曜日は「fc-mon」など。各セルには、"fc-day1"、"fc-day2" のように関連付けられた日番号クラスもあります。

それで、すべての日曜日の背景色を変更したいとしましょう:

.fc-sun {
  background-color: #FF0000;
  color: #FFFFFF;
}

等々。お役に立てれば。

于 2012-04-11T21:22:55.520 に答える
1 
eventRender: function (event, element, monthView) 
{
    if (event.title == "HOLIDAY") 
    { 
        var one_day = 1000 * 60 * 60 * 24;
        var _Diff = Math.ceil((event.start.getTime() - monthView.visStart.getTime())/(one_day));
        var dayClass = ".fc-day" + _Diff; 
        $(dayClass).addClass('holiday-color');
    }
}

また、月の変更時にこれらのクラス名をクリアする必要があることに注意してください。そうしないと、すべての月で同じ背景色のままになります。

したがって、gotodate を使用してカレンダーのナビゲーションを手動で管理し、jquery の removeClass() セレクターを使用してクラス名をクリアする必要がある場合があります。

あなたがする必要があるのは、フルカレンダーの次月と前月のボタンのクリックイベントをバインドし、次のようなことをすることです

$("#nextMonthBtn").click(function () {
    // current year and month should be maintained, can be a`enter code here`enter code here`ccessed on loading attribute of the fullcalendar
    //manually manage navigation`enter code here`
    $('td').removeClass('holiday-color');
    calRef.fullCalendar('gotoDate', _currentYear, _currentMonth, 1) 
});

詳細については、http: //vishaljadhav.net/coloring-certain-days-when-using-full-calendar/を参照してください。

于 2012-12-29T18:11:45.427 に答える
0

彼らはフルカレンダーを更新したので、私は新しい解決策を投稿しています。質問から数年が経過したことは知っていますが、決して遅いよりは遅いほうがいいと思います:)

eventRender: function(event, element, monthView) {
     if (event.className == "holiday") {
           var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
                $('td[data-date="' + dateString + '"]').addClass('fully_colored_holiday');
           }
     }

そしてここにクラスがあります：

.fully_colored_holiday,
.fully_colored_holidaydiv,
.fully_colored_holidayspan{
     background:#FF8C8C !important;
}
于 2014-05-02T18:09:39.923 に答える