调整大小时修改完整日历标题

我正在使用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'
    }
});

我也

需要一个响应式脚本，但我得到的最好的是：

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 日历在调整大小时。

你可以简单地使用jquery删除或隐藏它，

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

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（）。

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

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

请注意，我从右侧部分删除了"basicWeek"，"basicDay"。此代码将仅显示月视图选项。FullCalendar为您提供了一种标题模板，其中有左，中和右部分。你只需要声明你需要什么。在此链接中，您将在标题中找到所有按钮选项：

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

祝你好运！

以下解决方案利用了以下事实：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);
});

工作示例：工作示例

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

完整日历.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);
        }
    }

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

相关内容

最新更新

热门标签：