fullcalendar - フルカレンダーで週末を彩る

Question

FullCalendarコンポーネントを使用していますが、週末、金曜日、土曜日に色を付ける必要があります。ここで推奨されているように、次のものを使用しました。毎月のfullCalendarディスプレイで週末に別の色を設定できますか

$('table.calendar > tbody > tr > td:nth-child(-n+2)').addClass('fc-weekend');

cssクラスも追加しました。

これが週末を彩らないコードです...アドバイスはありません！

$(document).ready(function() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    $.getJSON('[@spring.url '/loadSomeData'/]', function (data) {
      $.getJSON('[@spring.url '/loadOtherData/]', function (info) {
        information = returnedPublicVacation;

        var calendar = $('#calendar').fullCalendar({
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
          },
          selectable: true,
          selectHelper: true,
          select:
            function(start, end, allDay) {
              vacationStart = start;
              showTheCorrectDialog(vacationStart);
            },

          eventClick: function(calEvent, jsEvent, view) {

            showTheCorrectDialog(calEvent.start);

            // change the border color just for fun
            $(this).css('border-color', 'red');
          },

          editable: true,
          events:data.concat(information)
        });
        resourceVacation = data;
      });
    });

    $('table.calendar > tbody > tr > td:nth-child(-n+2)').addClass('fc-weekend');
  });

score 30 · Accepted Answer

cssファイルのクラスにスタイルを追加しましたか？

あなたもこれを試すかもしれません：

.fc-fri { color:blue; }
.fc-sat { color:red;  }

（または日曜日の場合は.fc-sun）ここで例を見ることができます：http：//jsfiddle.net/rajesh13yadav/nf9whojL/1/

score 5 · Accepted Answer

バージョン4では、「 daysOfWeek 」を使用して、すべての日曜日または別の日のイベントを一緒に追加できます。

    events: [
    {
      daysOfWeek: [0,6], //Sundays and saturdays
      rendering:"background",
      color: "#ff9f89",
      overLap: false,
      allDay: true
    }]

サーバーサイドスクリプト言語（PHP、Node.js、JavaScriptなど）で簡単に変更できるため、この方法を使用することをお勧めします。

score 4 · Accepted Answer

これは私のために働いた：

.fc-sun { 
color:#337ab7;  
border-color: black;  
background-color: #ffa58c; }

score 1 · Accepted Answer

AJS.$(document).ready(function () {
    AJS.$(".fc-weekend-column").each(function(i,el){
        AJS.$(this).css("background-color", "#FFF7F7");
    });
});

score 1 · Accepted Answer

フルカレンダーバージョン5のソリューション：

CSSスタイルをfc-day-satクラスとfc-day-sunクラスに適用します。

#calendar .fc-day-sun, #calendar .fc-day-sat {
    background-color: #f4f5d7;
}

カレンダーヘッダー（「Sat」と「Sun」を表示する）の色を変更したくない場合は、tdタグを追加することで、 fc-day-satクラスとfc-day-sunクラスにcssを正確に適用できます。：

#calendar td.fc-day-sun, #calendar td.fc-day-sat {
    background-color: #f4f5d7;
}

score 1 · Accepted Answer

週末の最上位レイヤーを削除する場合は、次のコードを使用します

.fc-day-sat .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness{
        display: none;
}

.fc-day-other .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness{
    display: block;
}

.fc-day-other .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness .fc-non-business{
    display: none;
}

その後、このコードを使用できます。これを使用する

score 0 · Accepted Answer

フルカレンダーバージョン5：

.fc-satおよび.fc-sunに変換されまし.fc-day-satた.fc-day-sun。

また、bgcolorをに.fc-day-sat, .fc-day-sat適用すると、最も深い子クラスであるbgcolorが適用されたため、機能しなくなり.fc-non-businessます。

.fc .fc-non-business {  
  background-color: #fff; 
}

共通のクラスが今その仕事をします。

score 0 · Accepted Answer

フルカレンダーバージョン5

日数のcssクラスが以下のように変更されました。

.fc-sun-> .fc-day-sun

.fc-mon-> .fc-day-mon

.fc-tue->.fc-day-tue

.fc-水->.fc-日-水

.fc-thu-> .fc-day-thu

.fc-fri-> .fc-day-fri

.fc-sat-> .fc-day-sat

だからあなたは（日曜日のために）のように使うことができます

.fc-day-sun {
    background-color: red;
    /*your styles goes here*/
}

score -1 · Accepted Answer

このコードは私と一緒に働いています：

#calendar .fc-bgevent {
        background: #000000;
}

fullcalendar - フルカレンダーで週末を彩る

9 に答える 9

Related

Reference