Fullcalendar限制可用月份的显示？

时间：2010-05-28 09:03:29

标签： jquery fullcalendar

我想知道如何限制fullcalendar显示三个月的时间段，并在其余的几个月内取消选择，就像在一个日期选择器中一样？

E.g。当前月份是2010年5月，我只希望日历显示5月和4月（点击上个月）和Jun（点击下个月），剩下的几个月将从用户选择中取消选择。

我不确定我是否错过了阅读fullcalendar文档中的任何部分。好心提醒。谢谢。

9 个答案:

答案 0 :(得分：16)

对于版本2中的FullCalendar，将viewDisplay : function(view) {更改为 viewRender: function(view,element) {（本页示例中的混合解决方案）：

  $('#calendar').fullCalendar({

       //restricting available dates to 2 moths in future
        viewRender: function(view,element) {
            var now = new Date();
            var end = new Date();
            end.setMonth(now.getMonth() + 2); //Adjust as needed

            if ( end < view.end) {
                $("#calendar .fc-next-button").hide();
                return false;
            }
            else {
                $("#calendar .fc-next-button").show();
            }

            if ( view.start < now) {
                $("#calendar .fc-prev-button").hide();
                return false;
            }
            else {
                $("#calendar .fc-prev-button").show();
            }
        }
  });

答案 1 :(得分：9)

这是基于tauren的answer，但包括必要的日期数学和全日历选择器以将其拉出（此代码使用12个月的范围）：

jQuery('#edit-calendar').fullCalendar({
    viewDisplay   : function(view) {
      var now = new Date(); 
      var end = new Date();
      end.setMonth(now.getMonth() + 11); //Adjust as needed

      var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear();
      var cur_date_string = now.getMonth()+'/'+now.getFullYear();
      var end_date_string = end.getMonth()+'/'+end.getFullYear();

      if(cal_date_string == cur_date_string) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); }

      if(end_date_string == cal_date_string) { jQuery('.fc-button-next').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); }
    }
});

答案 2 :(得分：4)

我还没有这样做，所以我不确定这会有效。但你至少可以尝试看看。

我可能会考虑自定义viewDisplay回调。它会收到View Object，其中包含start属性。您可以使用View对象属性来测试用户正在查看的视图和日期，然后根据它执行操作。

我不确定fullcalendar是否以这种方式工作，但是如果您从回调中return false，某些插件将中止操作。因此，您可以查看start日期，如果它超出了您可接受的月份范围，则return false将中止该操作。

如果这不起作用，在viewDisplay内，您可以再次检查start日期。如果下个月或上个月超出范围，那么您可以使用jQuery选择器来获取上一个/下一个按钮并禁用它们。这样，用户将无法切换到超出范围的月份。

此外，如果用户处于超出范围的月份，您可以立即发出gotoDate命令切换到有效月份。

$('#calendar').fullCalendar({
    viewDisplay: function(view) {
        // maybe return false aborts action? 
        if (view.start > lastDayOfNextMonth) {
            return false;
        }
        // or disable next button if this is last valid month
        if (view.end + oneDay >= lastValidDate) {
            $("#calendar #fc-button-next").attr("disabled","disabled");
        }
        // or gotoDate if view.start is out of range
        if (view.start > lastValidDate) {
           // gotoDate
        }
    }
});

有许多方法可以在那里进行逻辑和数据计算，但我认为你可以通过这种方式获得一些东西。

答案 3 :(得分：3)

您可以使用选项

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            validRange: {
                start: '2017-05-01',//start date here
                end: '2017-07-01' //end date here
            },
            defaultDate: '2017-05-12'
            });

答案 4 :(得分：2)

            var academicYearStartDate = new Date('2013/4/10');
            var academicYearEndDate = new Date('2014/4/10');

            viewDisplay: function (view) {
                //========= Hide Next/ Prev Buttons based on academic year date range
                if (view.end > academicYearEndDate) {
                    $("#SchoolCalender .fc-button-next").hide();
                    return false;
                }
                else {
                    $("#SchoolCalender .fc-button-next").show();
                }

                if (view.start < academicYearStartDate) {
                    $("#SchoolCalender .fc-button-prev").hide();
                    return false;
                }
                else {
                    $("#SchoolCalender .fc-button-prev").show();
                }

            }

答案 5 :(得分：1)

 $('#calendar').fullCalendar({
            viewDisplay   : function(view) {
                var now = new Date(); 
                var end = new Date();
                var begin =  new Date ();

                end.setMonth(now.getMonth() + 12); //Adjust as needed
                begin.setMonth(now.getMonth() - 12); //Adjust as needed

                var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear();
                var cur_date_string = now.getMonth()+'/'+now.getFullYear();
                var end_date_string = end.getMonth()+'/'+end.getFullYear();
                var begin_date_string = begin.getMonth()+'/'+begin.getFullYear();

                if(cal_date_string == begin_date_string) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); }
                else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); }

                if(end_date_string == cal_date_string) { jQuery('.fc-button-next').addClass("fc-state-disabled"); }
                else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); }
            }

答案 6 :(得分：0)

我遇到了类似的情况：我有一个事件计划，并希望将Fullcalendar限制为事件的日期范围（例如，12周）。因此，如果今天是在第6周，则日历仅显示用户点击下一个或上一个的第1周到第12周的日期。我看了修改fullcalendar.js，但没有时间绕过我的项目时间表来这样做。所以我在这里做了一个解决方法：

  1. 将div中的日期选择器添加到页面左侧，右侧显示fullCalendar。
  2. 为您的计划日期范围设置startDate和endDate。
  3. 使用startDate和endDate为datepicker中的程序日期范围设置datepicker中的minDate和maxDate变量，以使该范围之外的所有其他日期变灰。这样做的目的是提示用户留在范围内。另外，我添加了一些代码，以便当用户点击datepicker中的日期时，该日显示在fullCalendar中。

  4. 在自定义jQuery文件.js中，添加 dayClick 的fullCalendar方法，该方法将日期视为变量：

    if（+ date＆lt; + jQuery.startDate || + date＆gt; jQuery.endDate）{

    var $ date_out_of_range_dialog = jQuery（''） .html（'

    抱歉，您选择的日期超出了当前程序的日期范围。

    开始日期：'+（jQuery.startDate .getMonth（）+ 1）+'/'+ jQuery.startDate.getDate（）+'/'+ jQuery.startDate.getFullYear（）+'

    结束日期： '+（jQuery.endDate.getMonth（）+ 1）+'/'+ jQuery.endDate.getDate（）+'/'+ jQuery.endDate.getFullYear（）+'

    '） 。对话（{   autoOpen：false，   莫代尔：是的，   标题：'日期超出范围'，   宽度：600，   纽扣： {      “Ok”：function（）{          jQuery的（本）.dialog（ “关闭”）;          }     } }）

    $ date_out_of_range_dialog.dialog（ '开放'）;

    }其他{

    //在范围内执行当天查看/添加/删除事件等其他操作。

    }

  5. 打开对话框窗口的.dialog方法来自mootools，但jQuery中可以使用类似的东西。我在jQuery之前。 startDate和endDate，以便通过我的.js文件提供变量。

  6. 以下是datepicker选择日期并在fullCalendar上选择的代码：

    的jQuery（ '＃datepicker_for_calendar'）。日期选择器（{               defaultDate：jQuery.startDate，               minDate：jQuery.startDate，               maxDate：jQuery.endDate，               内联：是的，               showButtonPanel：是的，               onSelect：function（dateText，inst）{                   var d = new Date（dateText）;                   jQuery（'#calendar'）。fullCalendar（'gotoDate'，d）;                   selectedDate = d;               }           }）;

答案 7 :(得分：0)

轮到我添加一个调整。然而，这是基于lewsid的answer，其中包括必要的日期数学和全日历选择器，以便将其拉出来，但有一个扭曲。

我刚刚添加了两个if，你可以选择使用其中一个或两个，或者没有。 他们的目的是针对特定日期，只是因为你允许例如“2个月”前后，如果你在一周内查看“今天”+ 2个月可能被禁用，而且，在你前进后可能会被阻止回到“今天”。

jQuery('#edit-calendar').fullCalendar({
    viewDisplay   : function(view) {
      var now = new Date(); 
      var end = new Date();
      end.setMonth(now.getMonth() + 2); //Adjust as needed

      var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear();
      var cur_date_string = now.getMonth()+'/'+now.getFullYear();
      var end_date_string = end.getMonth()+'/'+end.getFullYear();
      // TWEAK: Day Specific Vars
      var cal_date_month_day = parseInt(view.start.getDate());
      var cur_date_month_day = parseInt(now.getDate());

      // TWEAK: Only Disable if I can see today!
      if(cal_date_string == cur_date_string && cal_date_month_day <= cur_date_month_day) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); }
      // TWEAK: Only Disable if I really did reach "Today" + months
      if(end_date_string == cal_date_string && cal_date_month_day >= cur_date_month_day) { jQuery('.fc-button-next').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); }
    }
});

答案 8 :(得分：0)

我喜欢lewsid的答案，但它有一些问题。首先，view.start是一个Moment，而不是一个日期，因此getMonth()不存在。其次，视图的start只是该月的第一个可见日，意味着日期可以来自上个月。要避免这种情况，请使用其intervalStart属性。

这是我的实现，让日历列出当前年份。

viewRender: function(view, element) {
    var now = new Date(new Date().getFullYear(), 0, 1);
    var end = new Date(new Date().getFullYear(), 11, 31);

    var calDateString = view.intervalStart.month()+'/'+view.intervalStart.year();
    var curDateString = now.getMonth()+'/'+now.getFullYear();
    var endDateString = end.getMonth()+'/'+end.getFullYear();

    if (calDateString === curDateString) {
        jQuery('.fc-prev-button').addClass("fc-state-disabled");
    } else {
        jQuery('.fc-prev-button').removeClass("fc-state-disabled");
    }

    if (endDateString === calDateString) {
        jQuery('.fc-next-button').addClass("fc-state-disabled");
    } else {
        jQuery('.fc-next-button').removeClass("fc-state-disabled");
    }
}
相关问题
最新问题