完整日历在周末和无周末之间切换

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

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 3

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

1. 重新初始化（销毁和初始化）日历，将周末设置为 true/false
2. 编辑插件的源代码以添加此选项的二传手。我已经看到围绕此问题记录的问题，但我认为这个插件不再积极开发。

万事如意！

Answer 4

旧主题，但当前实现的fullCalendar（2和3）仍未解决。完整日历具有"更改视图"功能。您必须自定义视图。您可以通过扩展现有之一来执行此操作。

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

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

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

或

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

Answer 5

我在

谷歌上遇到了这个，我想我会添加一个尚未提到的选项。日历日都有一个带有其名称的 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 6

希望下面的代码片段可能对您有所帮助（我使用的是完整日历.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 7

切换周末：

1. 创建自定义视图
2. 在自定义视图的属性中将周末设置为 false
3. 将自定义视图的名称添加到标题中，以便显示此视图的按钮。
4. 使用默认视图设置初始视图

---

$('#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
        }
    }
});

---

至于插槽持续时间，您可以销毁日历并在更改 slotDuration 属性的情况下再次创建它。

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

---

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