3

我想知道 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);
    });

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

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

4

7 回答 7

4

尝试这个：

$('#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'}});
    };
});
于 2012-10-09T10:19:08.723 回答
2

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

  1. 重新初始化（销毁并初始化）周末设置为 true/false 的日历
  2. 编辑插件的源代码以为此选项添加一个设置器。我已经看到有关此问题的记录，但我认为该插件不再被积极开发。

一切顺利！

于 2012-08-14T20:51:44.677 回答
2

旧主题，但仍无法通过 fullCalendar (2 & 3) 的当前实现来解决。fullCalendar 具有“ changeView ”功能。您必须自定义视图。您可以通过扩展现有的一个来做到这一点。

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

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

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

或者

$('#calendar').fullCalendar( 'changeView', 'agendaWeek' )
于 2016-11-01T22:35:42.060 回答
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,
  });
}
于 2017-07-26T03:25:25.973 回答
1

我在谷歌上遇到了这个，并想我会添加一个尚未提及的选项。日历日都有一个带有其名称的 css 类，使它们易于定位。

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

   $('#toggleOn').on('click', function(){
       $('.fc-sat').show();
       $('.fc-sun').show();
   });
});
于 2014-06-20T14:23:55.363 回答
1

希望下面的代码片段可能对您有所帮助（我使用的是 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 });
于 2014-09-04T00:00:23.017 回答
0

对于切换周末：

  1. 创建自定义视图
  2. 在自定义视图的属性中将周末设置为 false
  3. 将自定义视图的名称添加到header中，以便此视图出现一个按钮。
  4. 使用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
        }
    }
});

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

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

$('#calendar').fullCalendar('changeView', 'agendaWeekdaysSlotDuration15');
于 2017-02-03T20:27:53.337 回答