周末和周末之间的FullCalendar切换

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

换句话说，我所要做的是：

//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); 
    });

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

感谢所有帮助我能得到..

来源

2012-08-14 karancan

每这个插件的作者，所有FullCalendar选项没有制定者（可惜周末就是其中之一）。所以我认为你有几个选择 - 1）重新设置（销毁和初始化）日历，周末设置为true/false或者2）编辑插件的源代码，为此选项添加setter。我已经看到了围绕这个问题记录的问题，但我不认为这个插件是积极开发了。祝一切顺利！ – ganeshk 2012-08-14 19:07:07

你的建议摧毁和重新初始工作了不起..如何将您的评论转换为答案？ – karancan 2012-08-14 20:48:19

很高兴工作！添加我的评论作为答案！ :) – ganeshk 2012-08-14 20:52:29

每这个插件的作者，所有FullCalendar选项没有制定者（可惜weekends是其中之一）。所以，我认为你有两个选择

重新发起（破坏和init）的日历/设置为true周末假
编辑源代码的插件添加setter此选项。我已经看到了围绕这个问题记录的问题，但我不认为这个插件是积极开发了。

一切顺利！

来源

2012-08-14 20:51:44 ganeshk

FullCalendar在2.9.0（7-10-2016）中添加了一个周末制作工具，因此不再需要日历销毁或自定义视图操作。查看我的解决方案了解更多详情 – gregblass 2017-07-26 03:52:35

@gregblass感谢您的更新。也许你可以和你一起编辑我的答案，所以今后来这里的人可以获得最新的信息？ – ganeshk 2017-07-26 13:29:37

是的，我的意思是，显然我有偏见:)但我觉得我的答案现在应该是公认的答案。它还显示了如何将控件添加到切换文本的日历标题。 – gregblass 2017-07-26 16:30:20

试试这个：

$('#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-09 10:19:08 Diego

我碰到这对谷歌和想我会添加尚未提及的一个选项。日历天都有一个名称为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-20 14:23:55 James

我使用这个解决方案，但是营业时间背景不会切换。您还必须切换'.fc-bgevent-skeleton td：eq（dow）'，在我的情况下，我以下列单行结束： '$（“。fc-sat，.fc-sun，.fc -bgevent-skeleton td：eq（6），.fc-bgevent-skeleton td：eq（7）“）。toggle（）;' – fiz 2015-08-24 13:41:43

这会错位天数。不是一个可行的解决方案。 – gregblass 2017-07-25 19:54:34

希望下面的代码片段可能会帮助你（我使用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-04 00:00:23

版本2允许这个，但它没有出来时，我发布的问题 – karancan 2014-09-04 01:03:16

老话题了，但仍没有与当前实现fullCalendar（2 & 3）解决。 fullCalendar有功能'changeView'。你必须定制视图。你可以通过扩展现有的一个来做到这一点。

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

现在您可以在任何需要的时候改变视图。

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

或

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

来源

2016-11-01 22:35:42 hsd

用于切换周末：

创建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');

来源

2017-02-03 20:27:53

更新2017年： FullCalendar在2.9.0（2016年7月10日）增加了一个周末的制定者，所以没有日历破坏或自定义视图操作是必要的了。

下面是我在使用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-26 03:25:25 gregblass

周末和周末之间的FullCalendar切换

回答

相关问题