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

reinit (destroy and init) the calendar with weekends set to true/false
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( 'changeView', 'workWeek' )

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

回答6:

Update for 2017: FullCalendar added a weekend setter in 2.9.0 (7-10-2016), so no calendar destroy or custom view manipulation is necessary anymore.

Here's how I implemented a weekend toggle in my production app using 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,
  });
}

回答7:

For toggling weekends:

Create a Custom View
Set weekends to false in the custom view's properties
Add the name of your custom view to your header, so that a button will appear for this view.
Use defaultView to set the your initial view

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

As for slot duration, you could destroy the calendar and create it again with the slotDuration property changed.

Alternatively, you could create more Custom Views, each with different slotDurations. You wouldn't need to add buttons for these views to the header but instead create your own UI for slot duration that calls your custom views.

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

来源：https://stackoverflow.com/questions/11958479/fullcalendar-switch-between-weekends-and-no-weekends

标签

jquery

fullcalendar