FullCalendar switch between weekends and no weekends

Question

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 t

Answer 1

For toggling weekends:

1. Create a Custom View
2. Set weekends to false in the custom view's properties
3. Add the name of your custom view to your header, so that a button will appear for this view.
4. 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');

Answer 2

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!

Answer 3

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

or

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

Answer 4

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

Answer 5

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

Answer 6

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