web-dev-qa-db-ja.com

フルカレンダー：特定の日の色を変更する

私は仕事で得たプロジェクトにこだわっています。いくつかの日の背景色を変更する必要があります。これは、ユーザーが見るべきカレンダー、利用可能な日と利用できない日です。 「data-date」という属性があることがわかりましたが、使用する可能性が見つかりませんでした。

特定の日の背景を操作する方法はありますか？

私は、現在の日付を示すセルにも別の色があるため、方法がなければならないと思います。

jqueryfullcalendarcellbackground-color
17
Dr. Gadget

ビューmonth、basicWeek、およびbasicDayの場合、dayRender関数を提供することにより、日のレンダリングを変更できます。例えば。：

$("#calendar").fullCalendar({
    dayRender: function (date, cell) {
        cell.css("background-color", "red");
    }
});

dayRenderのドキュメントはこちらから入手できます。 http://arshaw.com/fullcalendar/docs/display/dayRender/

そして、jsfiddleの実際の例は次のとおりです。 http://jsfiddle.net/kvakulo/CYnJY/4/

38
Regin Larsen
    dayRender: function(date, cell){
        if (moment().diff(date,'days') > 0){
            cell.css("background-color","silver");
        }
    },
8
radmonius

過去の日付の色を単に変更したい場合は、.fc-pastをcssに追加してbackground-colorプロパティ。例えば。、：

.fc-past {
    background-color: silver;
}
8
Avindra Goolcharan

「data-date」属性を使用しないのはなぜですか？

$("#calendar").fullCalendar(function() {

  viewRender: function() {
    $("[data-date="+$.fullCalendar.formatDate(new Date(), "yyyy-MM-dd")+"]").css("background-color", "red");
},

....
4
sulaiman sudirman

誰かが1日中フルカラーカレンダーをjqueryしたい場合は、これがコードです。

    var $calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },

    defaultView: 'month',

    dayRender: function (date, cell) {
       var check = $.fullCalendar.formatDate(date,'yyyy-MM-dd');
                    var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
                    if (check < today) {
                        cell.css("background-color", "red");
                    }
    }
});

Regin Larsenコードは、これを実現するのに役立ちます。レギン・ラーセン、ありがとう。

4
gmwraj

外部ライブラリを使用するときは、ライブラリによって生成されたものを利用しないようにしてください。次のバージョンでは、ライブラリが内部的に動作する方法を変更した場合、ライブラリは引き続き下位互換性がありますが、コードは動作しなくなります。そのため、ハッキングを行う代わりに、可能な限りライブラリAPIを使用するようにしてください。

あなたの質問に答える、それをする一つの方法は、利用できないすべての日に新しいイベントを追加することです。これを行うには、イベントオブジェクトを作成し、renderEvent（.fullCalendar（ 'renderEvent'、event [、stick]））を実行します。イベントオブジェクトの作成中に、背景色を目的の色として割り当て、色、テキスト色、境界色を表示したくない場合は背景と同じ色に設定します。

編集：Regin Larsenの答えはより良いようです。私はそのことに気づきませんでした。

1
TK Omble

特定の日の日付パラメーターを使用して比較するには：

$("#calendar").fullCalendar({
    dayRender: function (date, cell) {
        if (date.isSame('2016-08-04')) {
           cell.css("background-color","red");
        }
    }
});

isSameは、fullcalendarで使用されるmoment.jsから取得されます。 http://momentjs.com/docs/#/query/is-same/

1
http203

getDateは機能しませんが、代わりにmomentを使用してください。

内部var calendar = $('#calendar').fullCalendar({ ... }

dayRender: function (date, cell) {
        var today = moment('2018-06-22T00:00Z');
        if (date.isSame(today, "day")) {
            cell.css("background-color", "blue");
        }
    },
0
Reemi