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..

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!

Diego

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

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

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

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' )

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

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