FullCalendar修改调整大小的标题

Question

I'm using FullCalendar and I'm attempting to make it responsive by changing the view when the window size is below a certain size:

windowResize : function(view) {
    if ($(window).width() < 500) {
        $('#calendar').fullCalendar('changeView', 'basicDay');
    } else {
        $('#calendar').fullCalendar('changeView', 'month');
    }
    // modify the header (remove options for month and week and remove title)
}

That works fine but how can I modify the header (remove options for month and week and remove title)? You can see an example of the calendar here .

Header is set as such:

$('#calendar').fullCalendar({
    header : {
        left : 'prev,next today',
        center : 'title',
        right : 'month,basicWeek,basicDay'
    }
});

Answer 1

I needed a responsive script too, but the best i get was:

var view = 'month';
var header = {
            left : "title",
            center : "",
            right : "prev,next month,basicWeek,basicDay today"
    };
if ($(window).width() <= 480) {
    view = 'basicDay';
    header = {
        left : 'prev,next today',
        center : '',
        right : ''
    };
}
var acalendar = $("#ccalendar").fullCalendar(
            {
                            lang : "pt-BR",
                            defaultView : view,
                            header : header
             }

Maybe you can rebuild de calendar on resize.

Answer 2

You can simply remove or hide it using jquery,

 $(".fc-header-title").hide();
 $(".fc-button-month").hide();
 $(".fc-button-basicWeek").hide();

Answer 3

windowResize:function(view){
    var isBigScreen = $(window).width() > 768;
    if(isBigScreen){
       $('.fc-agendaWeek-button').show();
       $('#calendar').fullCalendar('changeView', 'agendaWeek');
    }else{
       $('.fc-agendaWeek-button').hide();
       $('#calendar').fullCalendar('changeView', 'agendaDay');
    } 
}

basically,you need to find the class you want to hide and use jquery hide().

Answer 4

if you don't want the option of month, week, or day just remove it from the properties block.

$('#calendar').fullCalendar({
header : {
    left : 'prev,next today',
    center : 'title',
    right : 'month'
}});

Notice that I removed 'basicWeek', 'basicDay' from the right section. This code will only display the month view option. FullCalendar provides you with a sort of a template for the header in which you have the left, center, and right section. You only have to declare what you need. In this link you will find all the buttons options that you may have in the header:

http://arshaw.com/fullcalendar/docs/display/header/

Good Luck!

Answer 5

The following solution takes advantage of the fact that Javascript objects be accessed as if they were associative arrays . One downside to this method is that the options need to be set inside the Calendar object before the calendar can be initialised, including events.

The Calendar.views object stores a list of objects that correspond with the various views available to this calendar, eg Calendar.views.agendaDay is an object that contains the initialisation options for agendaDay .

Calendar.whichView determines the name of the view to initialise based on the width of the window.

Working Example: http://jsfiddle.net/7jbuzu7x/

var Calendar = {
  e: $('#calendar'),

  views: {
    agendaDay: {
      defaultView: 'agendaDay',
      slotDuration: '00:15:00',
      minTime: '00:00:00',
      maxTime: '20:00:00',
      header: {
        right: 'prev,next today',
        left: 'title'
      }
    },
    agendaWeek: {
      defaultView: 'agendaWeek',
      slotDuration: '00:30:00',
      minTime: '09:00:00',
      maxTime: '17:00:00',
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaDay,agendaWeek,month'
      }
    }
  },

  resize: function() {
    if (Calendar.whichView($(document).width()) !== Calendar.e.fullCalendar('getView')) {
      Calendar.e.fullCalendar('destroy');
      Calendar.init();
    } 
  },

  whichView: function(width) {
    if (width < 601) {
      return 'agendaDay';
    } else {
      return 'agendaWeek';
    }
  },

  init: function() {
    Calendar.e.fullCalendar(Calendar['views'][Calendar.whichView($(document).width())]);
  }
}

$(function() {
  Calendar.init();
  $(window).resize(Calendar.resize);
});

Answer 6

Working Example : Working Example

$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        windowResize: function (view) {
            var view = getView();
            //Change view during window resize
            $('#calendar').fullCalendar('changeView', view);
            //Update header during window resize
            $('#calendar').fullCalendar('updateHeader',getHeader(), view);                
        },
        defaultDate: new Date(),
        editable: true,
        eventLimit: true,

    });

    function getHeader() 
        {
     if (window.innerWidth < 768) {
         return {
             left: 'prev today',
             center: 'title',
             right: 'next'
         };

     }
     else {
         return {
             left: 'prev,next today ',
             center: 'title',
             right: 'month,basicWeek,basicDay'
         }
     }
 }
 function getView() 
        {
     if (window.innerWidth < 768) {
         return "basicDay";
     }
     else {
     return "month";
     }
 }

fullcalendar.js

Add this line inside constructor

t.updateHeader = updateHeader;

And add this function

function updateHeader(newHeader, currentView)
    {
        t.options.header = newHeader;
        headerElement = header.render();

        updateHeaderTitle();
        updateTodayButton();
        header.activateButton(currentView);

        //replace current header with new header
        if (headerElement) {
            $("div.fc-toolbar").remove();
            element.prepend(headerElement);
        }
    }

Answer 7

   windowResize: function (view) {
      if ($(window).width() < 500) {
        $(this).fullCalendar('option', {
          header: {
            left: 'prev,next',
            center: '',
            right: 'basicDay'
          }
        });
        $(this).fullCalendar('changeView', 'basicDay');
      } else {
        $(this).fullCalendar('option', {
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
          }
        });
        $(this).fullCalendar('changeView', 'month');
      }
    }