FullCalendar 调整大小时修改标题栏

Question

我正在使用FullCalendar，尝试通过在窗口大小低于某个值时更改视图使其具有响应性：

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

那样可以，但是我该如何修改标题（删除月份和周的选项以及删除标题）？你可以在这里看到日历的一个例子： 这里。

头部设置如下：

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

- SeanWM

Answer 1

我也需要一个响应式脚本，但是最好的结果是：

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
             }

也许您可以在调整大小时重新构建日历。

- Victor Pinto

Answer 2

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

基本上，您需要找到要隐藏的类并使用jQuery hide()。

- sOm2y

Answer 3

您可以使用jQuery简单地移除或隐藏它，

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

- sulaiman sudirman

Answer 4

工作示例：工作示例

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

在构造函数内添加这行代码。

t.updateHeader = updateHeader;

并添加此函数

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

- mridul

Answer 5

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

- Roberto Amed Heredia González

---

在回答中加入一些解释有助于更容易地理解解决方案。例如，问题是什么，实际的修复方法是什么。 - Atul Dwivedi

Answer 6

如果您不想要月、周或日选项，请从属性块中将其删除。

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

请注意，我从右侧部分中删除了“basicWeek”和“basicDay”。此代码仅显示月视图选项。 FullCalendar为您提供了一种标题模板，其中包括左、中、右三个部分。您只需要声明所需内容即可。在此链接中，您将找到标题中可能具有的所有按钮选项：

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

祝你好运！

- dgv275

---

原帖作者知道如何使用标题配置。问题是如何根据视口宽度更改标题配置。 - Brian Zelip

Answer 7

以下解决方案利用了Javascript 对象可以像关联数组一样访问的事实。这种方法的一个缺点是需要在初始化日历之前在 Calendar 对象内设置选项，包括事件。 Calendar.views 对象存储了与此日历可用视图对应的对象列表，例如 Calendar.views.agendaDay 是一个包含 agendaDay 的初始化选项的对象。 Calendar.whichView 根据窗口宽度确定要初始化的视图名称。 工作示例：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);
});

- Jacob Mulquin