Question

将完整日历与日期选择器结合使用时，我将禁用类添加到日期选择器中日期之前的日期。如果我在不同月份使用日期并结合以下内容，那么一切正常：

.fullCalendar('gotoDate', date)

从当前月份中选择日期不会执行dayRender，因此在此视图中不会添加已禁用的类。当然，这是由于日历没有重新渲染。我尝试使用rerended但是没有用。

有什么方法可以完成这项工作吗？请参阅下面的小提琴。

demo

Answer 1

我已经通过添加自定义渲染功能解决了这个问题。希望，它会有所帮助：）

＆＃13;

.disabled {
            background-color: red;
        }

＆＃13;

<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>

＆＃13;

重新呈现完整日历以将日期显示为已禁用

1 个答案: