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

工作正常，但我如何修改标题（删除月份和星期的选项并删除标题）？您可以看到日历here的示例。

标题设置如下：

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

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
             }

也许你可以在调整大小时重建de calendar。

Answer 2

您可以使用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');
    } 
}

基本上，您需要找到要隐藏的类并使用jquery hide（）。

Answer 4

如果您不想要月，周或日的选项，只需从属性块中删除它。

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

请注意，我从右侧部分删除了'basicWeek'，'basicDay'。此代码仅显示月视图选项。 FullCalendar为您提供了一种左侧，中间和右侧部分的标题模板。你只需申报你需要的东西。在此链接中，您将找到标题中可能包含的所有按钮选项：

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

祝你好运！

Answer 5

以下解决方案利用Javascript objects be accessed as if they were associative arrays这一事实。这种方法的一个缺点是需要在初始化日历之前在double对象内设置选项，包括事件。

Calendar对象存储与该日历可用的各种视图相对应的对象列表，例如： Calendar.views是一个包含Calendar.views.agendaDay的{{3}}的对象。

agendaDay根据窗口的宽度确定要初始化的视图的名称。

工作示例：initialisation options

Calendar.whichView

Answer 6

工作示例： Working Example

    # yum update
    Loaded plugins: refresh-packagekit, security, ulninfo
    Setting up Update Process
    cloudera-cdh5                                                                                                                                    |  951 B     00:00     
    cloudera-cdh5/primary                                                                                                                            |  43 kB     00:00     
    cloudera-cdh5                                                                                                                                                   146/146
    cloudera-manager                                                                                                                                 |  951 B     00:00     
    cloudera-manager/primary                                                                                                                         | 4.1 kB     00:00     
    cloudera-manager                                                                                                                                                    7/7
    public_ol6_UEKR4                                                                                                                                 | 1.2 kB     00:00     
    public_ol6_UEKR4/primary                                                                                                                         | 1.9 kB     00:00     
    http://yum.oracle.com/repo/OracleLinux/OL6/UEKR4/x86_64/repodata/primary.xml.gz: [Errno -1] Metadata file does not match checksum
    Trying other mirror.
    public_ol6_UEKR4/primary                                                                                                                         | 1.9 kB     00:00     
    http://yum.oracle.com/repo/OracleLinux/OL6/UEKR4/x86_64/repodata/primary.xml.gz: [Errno -1] Metadata file does not match checksum
    Trying other mirror.
    Error: failure: repodata/primary.xml.gz from public_ol6_UEKR4: [Errno 256] No more mirrors to try.

<强> fullcalendar.js

在构造函数

中添加此行

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

并添加此功能

t.updateHeader = updateHeader;

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

FullCalendar修改调整大小的标题

7 个答案: