FullCalendar修改调整大小的标题

问题描述 投票:3回答:7

我正在使用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'
    }
});
jquery fullcalendar
7个回答
2
投票

我也需要一个响应式脚本,但我得到的最好的是:

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
             }

也许你可以在resize上重建de calendar。


1
投票

您可以使用jquery删除或隐藏它,

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

1
投票
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()。


0
投票

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

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

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

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

祝好运!


0
投票

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

Calendar.views对象存储与该日历可用的各种视图相对应的对象列表,例如, Calendar.views.agendaDay是一个包含initialisation optionsagendaDay的对象。

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

0
投票

工作示例: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

在构造函数中添加此行

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

0
投票
   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');
      }
    }
© www.soinside.com 2019 - 2024. All rights reserved.