FullCalendar switch between weekends and no weekends

问题:

I was wondering if there was a way in Arshaw's FullCalendar to: 1- Change the calendar from showing weekends to not show weekends and vice versa. 2- To dynamically change the timeslot interval from say 30 minutes to 60 minutes.

In other words, what I am trying to do is:

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

If something like that is not possible, what would be the best workaround? I guess I could have a second calendar which is a replica of the first, but that would be too much replication.

Appreciate any help I can get..

回答1:

Per the author of this plugin, all the FullCalendar options don't have setters (unfortunately weekends is one of them). So I think you have a couple of options

1. reinit (destroy and init) the calendar with weekends set to true/false
2. edit the source for the plugin to add a setter for this option. I have seen issues logged around this, but I don't think this plugin is actively developed anymore.

All the best!

回答2:

try this:

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

回答3:

I came across this on google and figured I would add an option not mentioned already. The calendar days all have a css class with their name, making them easy to target.

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

回答4:

Hope below code snippet might help you (I am using fullcalendar.js version 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 });

回答5:

Old topic but still is not solved with current implementation of fullCalendar (2 & 3). fullCalendar has feature 'changeView'. You have to customize view. You can do this by extending one of existing.

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

Right now you can change view any time you need.

$('#calendar').fullCalendar