web-dev-qa-db-ja.com

FullCalendarで選択した日付を強調表示する

FullCalender.ioで選択した日を強調表示しようとしています（現在の日と同じように）。

フォロー中 FullCalendar-週ビューで特定の日を強調表示 基本的にクリックでカレンダーを再レンダリングし、クリックした日付と日付が一致するセルを強調表示する次のことを試しました。

    dayRender: function(date, cell)
    {
        var moment = $('#calendar').fullCalendar('getDate');

        if (moment.get('date') == date.get('date'))
        {
            $(cell).addClass('fc-state-highlight');
        }
        else
        {
            $(cell).removeClass('fc-state-highlight');
        }
    },
    dayClick: function (date, allDay, jsEvent, view) {
        $('#calendar').fullCalendar('render');
    },

しかし、それは何もしていません。 :-(

fullcalendar
8
Robbie Mills

このコードはv1.xで使用できます

$('#calendar').fullCalendar({
   dayClick: function (date, allDay, jsEvent, view) {
        $(".fc-state-highlight").removeClass("fc-state-highlight");
        $(jsEvent.target).addClass("fc-state-highlight");
   }
});

v2.X

$('#calendar').fullCalendar({
   dayClick: function (date, jsEvent, view) {
        $(".fc-state-highlight").removeClass("fc-state-highlight");
        $(jsEvent.target).addClass("fc-state-highlight");
   }
});

CSS .fc-state-highlight {background:red;}

注：これは、セルのdata-date属性と関数dateのdayClickパラメーターを使用することによっても他の方法で実現できます。

$('#calendar').fullCalendar({
   dayClick: function (date, jsEvent, view) {
        $(".fc-state-highlight").removeClass("fc-state-highlight");
        $("td[data-date="+date.format('YYYY-MM-DD')+"]").addClass("fc-state-highlight");
   }
});
12
valar morghulis

他の答えに基づいて、これはあなたが必要とすることをします：

dayClick: function (date, jsEvent, view) {
    $('.fc-day').each(function () {
        $(this).removeClass("fc-state-highlight");
    });

    $("td[data-date=" + date.format() + "]").addClass("fc-state-highlight");
},
3
Evonet

v2.X

$('#calendar').fullCalendar({
  dayClick: function (date, jsEvent, view) {
    $(".fc-state-highlight").removeClass("fc-state-highlight");
    $(this).addClass("fc-state-highlight");
  }
});

CSS .fc-state-highlight {background:red;}

1
Sachin Jain

簡単な回避策の1つは、selectableを使用することです。

var calendar = $('#calendar'); 

calendar.fullCalendar({
  selectable: true
})

このオプションはさらに厳しいAllows a user to highlight multiple days or timeslots by clicking and dragging（出典： https://fullcalendar.io/docs/selection/selectable/ ）、副作用1日だけクリックした場合は、選択した日を強調表示します。

1
sandre89