Выделение выбранной даты в FullCalendar

Я пытаюсь сделать выбранный день в FullCalender.io выделен (аналогично тому, как текущий день).

после FullCalendar-выделите конкретный день в week view Я пробовал следующее, которое в основном повторно отображает календарь одним щелчком мыши и выделяет ячейку, дата которой соответствует дате щелчка.

    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');
    },

но он ничего не делает. :-(

7
fullcalendar

4 ответов

вы можете использовать этот кусок кода в 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 атрибут ячейки и

10

основываясь на другом ответе, это сделает то, что вам нужно:

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

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

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

один быстрый способ-это использовать 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