Question

我想知道在Arshaw的FullCalendar中是否有办法： 1-将日历从显示周末更改为不显示周末，反之亦然。 2-将动态时间间隔从30分钟动态更改为60分钟。

换句话说，我想做的是：

//Clicking the button that shows Saturday and Sunday too
    $('#weekend-yes').click(function(){
        $('#weekend-yes').hide();
        $('#weekend-no').fadeIn();
            //HYPOTHETICALLY  DO THIS
        $('#calendar').fullCalendar('option', 'weekends', true/false);
    });

如果无法做到这一点，那么最好的解决方法是什么？我想我可以有第二个日历，它是第一个的复制品，但复制太多了。

感谢我能得到的任何帮助..

Answer 1

试试这个：

$('#values').click(function(){
    var weekend = $('#calendar').fullCalendar('option', 'weekends');
    if (weekend){
        $('#values').text('Show weekend');
        $('.fc-header').remove();
        $('.fc-content').remove();
        $('#calendar').fullCalendar({ firstDay:1, height:650, 
                                           weekMode:'liquid', weekends:false, 
                                           header: {left: 'prev,next today', 
                                                    center: 'title',
                                                    right: 'month,
                                                    agendaWeek,agendaDay'}});
    } else {
        $('#values').text('Hide weekend');
        $('.fc-header').remove();
        $('.fc-content').remove();
        $('#calendar').fullCalendar({ firstDay:1, height:650, 
                               weekMode:'liquid', weekends:true, 
                               header: {left: 'prev,next today',
                                        center: 'title',
                                         right: 'month,agendaWeek,agendaDay'}});
    };
});

Answer 2

根据此插件的作者，所有FullCalendar选项都没有setter（不幸的是weekends就是其中之一）。所以我认为你有几个选择

在周末设置为true / false的情况下重新启动（销毁并初始化）日历
编辑插件的源代码，为此选项添加setter。我已经看到了这个问题，但我不认为这个插件已经被积极开发了。

一切顺利！

Answer 3

我在google上遇到过这个问题，我想我会添加一个未提及的选项。日历日都有一个带有名字的css类，使它们易于定位。

$(document).ready(function(){
   $('#toggleOff').on('click', function(){
       $('.fc-sat').hide();
       $('.fc-sun').hide();
   });

   $('#toggleOn').on('click', function(){
       $('.fc-sat').show();
       $('.fc-sun').show();
   });
});

Answer 4

希望下面的代码片段可能对您有所帮助（我使用的是fullcalendar.js版本2）

var calendarInitiate = function(noWeekend){
$("#calendar").fullCalendar('destroy');
$("#calendar").fullCalendar({weekends:noWeekend, events: [{ ...enter events list here... }]});
}
calendarInitiate(true); //True initially to show weekends

$("#showWeekends").click(function(){ calendarInitiate(true); //This will show weekends });
$("#hideWeekends").click(function(){ calendarInitiate(false); //This will hide weekends });

Answer 5

旧主题但仍未通过fullCalendar（2＆amp; 3）的当前实现解决。 fullCalendar具有“ changeView ”功能。您必须自定义视图。您可以通过扩展现有的一个来完成此操作。

$('#calendar').fullCalendar({
views: {
    workWeek: {
        type: 'agendaWeek',
        hiddenDays: [0, 6]
    }
}});

现在您可以随时更改视图。

$('#calendar').fullCalendar( 'changeView', 'workWeek' )

或

$('#calendar').fullCalendar( 'changeView', 'agendaWeek' )

Answer 6

2017年更新：FullCalendar在2.9.0（7-10-2016）中添加了周末设置器，因此不再需要日历销毁或自定义视图操作。

以下是我如何使用FullCalendar 3.1.0在我的制作应用中实现周末切换：

var calendarOptions = {
  ...
  customButtons: {
    toggleWeekends: {
      text: 'Show Weekends',
      click: function() {
        toggleWeekends();
      },
    },
  },
  ...
  header: {
    left: 'today toggleWeekends',
    ...
  },
  weekends: false,
}

function toggleWeekends() {
  var weekends = $('#calendar').fullCalendar('option', 'weekends');
  var text = 'Show Weekends';

  if (weekends == false) {
    text = 'Hide Weekends';
  }

  $('#calendar').fullCalendar('option', {
    customButtons: {
      toggleWeekends: {
        text: text,
        click: function() {
          toggleWeekends();
        },
      },
    },
    weekends: !weekends,
  });
}

Answer 7

为了切换周末：

创建Custom View
在自定义视图的属性

weekends

将自定义视图的名称添加到header，以便为此视图显示一个按钮。
使用defaultView设置初始视图

$('#calendar').fullCalendar({
    //defaultView: 'agendaWeekdays',
    header: {
        right: 'month,monthWeekdays,agendaWeek,agendaWeekdays'
    },
    views: {
        agendaWeekdays: {
            buttonText: 'Weekdays',
            type: 'agendaWeek',
            weekends: false
        },
        monthWeekdays: {
            buttonText: 'Month (Weekdays)',
            type: 'month',
            weekends: false
        }
    }
});

对于广告时段的持续时间，您可以destroy日历并在slotDuration属性更改后再次创建日历。

或者，您可以创建更多自定义视图，每个视图具有不同的slotDuration。您不需要将这些视图的按钮添加到标题中，而是为调用自定义视图的插槽持续时间创建自己的UI。

$('#calendar').fullCalendar('changeView', 'agendaWeekdaysSlotDuration15');

FullCalendar在周末和周末之间切换

7 个答案: