Повторный рендеринг полного календаря для отображения дней как отключенного

Question

Используя полный календарь в сочетании с выбором даты, я добавляю класс запрета к дням, которые предшествуют дате выбора даты. В то время как все работает, если я использую дату на другой месяц в сочетании с:

.fullCalendar('gotoDate', date) 

Выбор даты из текущего месяца не будет выполняться dayRender так отключен класс не будет добавлен в этом представлении. Это, конечно, из-за календаря, а не повторного рендеринга. Я попытался использовать измененный, но это не сработало.

Любой способ сделать это? См. Скрипку ниже plz.

demo

Answer 1

Я решил эту проблему с добавлением пользовательских функций визуализации. Надеюсь, это поможет :)

.disabled { 
 
      background-color: red; 
 
     }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.css"/> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker.css"/> 
 
<div> 
 
    <div id="fullcalendar"></div> 
 
    <input type="text" id="startDate" /> 
 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js" type="text/javascript"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.js" type="text/javascript"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.js"></script> 
 
<script> 
 
    $(document).ready(function() { 
 

 
     var startDate = new Date(); 
 

 
     $("#startDate").datepicker().on('changeDate', function(e){ 
 
      //custom function for adding 'disabled' when month equals to current month 
 
      if(startDate.getMonth() === e.date.getMonth()){ 
 
       $('.fc-day').each(function(){ 
 
        var curDate = new Date($(this).data('date')); 
 
        $(this)[curDate < e.date ? 'addClass' : 'removeClass']('disabled'); 
 
       }); 
 
       startDate = e.date; 
 
      } else { 
 
       startDate = e.date; 
 
       $('#fullcalendar').fullCalendar('render'); 
 
       $("#fullcalendar").fullCalendar('gotoDate', e.date); 
 
      } 
 
     }); 
 

 
     $("#fullcalendar").fullCalendar({ 
 
      header: { 
 
       left: 'prev', 
 
       center: 'title', 
 
       right: 'next' 
 
      }, 
 

 
      dayRender: function(date, cell) { 
 
       if (date < startDate){ 
 
        $(cell).addClass('disabled'); 
 
       } 
 
      } 
 
     }); 
 

 
    }); 
 
</script>