月视图更改后无法选择日期 - fullcalendar

编程问答 2022-05-27

问题描述

我使用完整日历来表示可以订购快递的日期。您始终可以选择今天之后的两天（不包括周六和周日）之一。如果您更改月视图，您将不会选择任何一天。我不知道为什么。

1 月（我可以选择 2 月 1 日）

enter image description here

将视图更改为下个月的 2 月 1 日后 - 无法点击

enter image description here

$("#receiveCalendar").fullCalendar({
locale: 'pl',buttonText: {
  today: 'Dziś'
},dayClick: function dayClick(calEvent,jsEvent,view) {
  if ($(jsEvent.target).hasClass('fc-future')&&!$(jsEvent.target).hasClass('fc-sat')&&!$(jsEvent.target).hasClass('fc-sun')&&$(jsEvent.target).hasClass('enable')) {
    $('#receiveDateValue').val(calEvent.format('YYYY-MM-DD')).change();
    $(".fc-day,.fc-day-top").removeClass('selected');
    $(jsEvent.target).addClass('selected');
    $(".fc-day-top[data-date='" + $(jsEvent.target).data('date') + "']").addClass('selected');
  }
},vieWrender: function(view,element){
  console.log(view)
  console.log(element)
  let day1,day2;
  let todayDate = new Date($('.fc-today').data('date'));
  let todayDateObj = moment(todayDate).format("YYYY-MM-DD");
  if ($('.fc-today').hasClass('fc-thu')) {
    day1 = moment(todayDateObj).add(1,'days');
    day2 = moment(todayDateObj).add(4,'days');
  } else if($('.fc-today').hasClass('fc-fri')){
    day1 = moment(todayDateObj).add(3,'days');
  } else if($('.fc-today').hasClass('fc-sat')){
    day1 = moment(todayDateObj).add(2,'days');
    day2 = moment(todayDateObj).add(3,'days');
  } else {
    day1 = moment(todayDateObj).add(1,'days');
    day2 = moment(todayDateObj).add(2,'days');
  }
  day1 = day1.format("YYYY-MM-DD")
  day2 = day2.format("YYYY-MM-DD");
  $('.fc-future[data-date="'+day1+'"],.fc-future[data-date="'+day2+'"]').addClass("enable");
},eventRender: function(eventObj,$el) {
  $el.popover({
    content: eventObj.description,trigger: 'hover',placement: 'top',container: 'body'
  });
},events: holidays
});

解决方法

我自己解决了这个问题。正如我在上面的评论中所写，问题出在“fc-today”类上。新的月视图不包括它。我写了几行代码来解决这种情况：

viewRender: function (view,element) {
//some of new variables
let day1,day2,secondDayOfNextMonth,formattedDate,diff;

// new block of code
const currentDay = new Date();
const startOfNextMonth = moment().add(1,'M').startOf('month').format("YYYY-MM-DD HH:mm:ss");
let firstDayOfNextMonth = moment(startOfNextMonth).format("YYYY-MM-DD");
let firstDayOfNextMonthName = moment(startOfNextMonth).format('ddd');

formattedDate = moment(currentDay).add(3,'days').format("YYYY-MM-DD");
diff = moment(firstDayOfNextMonth).diff(moment(formattedDate),'days');

if (!$('.fc-day').hasClass('fc-today') && (firstDayOfNextMonthName === 'Mon') && (diff >= 0 && diff <= 3)) {
    secondDayOfNextMonth = moment(firstDayOfNextMonth).add(1,'days').format("YYYY-MM-DD");
    $('.fc-future[data-date="' + firstDayOfNextMonth + '"],.fc-future[data-date="' + secondDayOfNextMonth + '"]').addClass("enable");
}
// end new block of code

};

fullcalendarfullcalendar-3htmljavascript