fullcalendar - 调整窗口上日程调整

我使用fullcalendar（fullcalendar by adam shaw）fullcalendar - 调整窗口上日程调整

我想知道什么，我需要做的，这样我fullcalendar大小取决于浏览器窗口的大小是动态变化的？我已经研究了他的“渲染”功能，但一直无法解决这个问题。

（即，当用户改变他们的窗口，我想fullcalendar重新调整它的宽度和高度，以一个合适的高宽比）

2012-04-02 captainrad

这一切都记录在案。

让我们来看看，尝试一些沿着这条线：

//function to calculate window height 
function get_calendar_height() { 
     return $(window).height() - 30; 
} 

//attacht resize event to window and set fullcalendar height property 
$(document).ready(function() { 
    $(window).resize(function() { 
     $('#calendar').fullCalendar('option', 'height', get_calendar_height()); 
    }); 


    //set fullcalendar height property 
    $('#calendar').fullCalendar({ 
      //options 
      height: get_calendar_height 
    }); 
});

应用类似的宽度。或者你可以在div中放置日历并以这种方式进行操作。

来源

2012-04-02 19:07:28

完美。感谢您的帮助！ p.s.我相信你错过了一个额外的'}）;' ..但是，好吧！ – captainrad 2012-04-02 19:20:11

我用Google搜索“有求必应日历”，因为那是你想要什么，我只是觉得你不知道该怎么说。我相信我提供给你的链接应该让你顺利。我假设你想要使用javascript/jquery，因为你的标签。如果链接是有用的，那也很好，因为现在你知道要搜索什么，祝你好运！

响应日历演示：
http://dbushell.com/demos/calendar/v1_03-01-12.html
http://www.manystrands.com/projects/calendar.html（更改议程观点在一定程度之后。）

来源

2012-04-02 18:56:41 dkroy

抱歉，我应该更清楚。我正在与亚当肖斯fullcalendar jquery插件..我已更新我的帖子澄清！ – captainrad 2012-04-02 19:04:24

对于宽度，我们做出了日历灵活，与响应式设计一起调整，和它的工作相当不错的大屏幕显示：

#calendar { 
    width: 100%; 
    margin: 0 auto; 
}

对于任何其他定制（改变高度或默认视图），使用FullCalendar内置的windowResize事件。接受的答案的缺点是，该功能将在窗口被调整大小时运行，对于每个像素更改。相反，windowResize事件在调整大小完成后触发。

现在，响应式日历的问题在于，您仍然处于桌子的摆布之中 - 这是一个在小屏幕上可怕的地方。

对于我们的项目，如果用户在小于769px的屏幕上，我们选择强制日视图。在这个例子中你可以看到我们的方法。如果它不适合你，至少它会给你如何实施一个解决方案的方向。

var ww,view; 
$(function(){ 
    $('#calendar').fullCalendar({ 
     windowResize: function(view) { 
      ww = getWindowWidth(); 
      view = getView(); 
      var currentView = $('#calendar').fullCalendar('getView'); 
      if(view != currentView){ 
       $('#calendar').fullCalendar('changeView',view); 
      } 
      if(ww <= 768){ 
       $('.fc-header-right .fc-button').hide(); 
      }else{ 
       $('.fc-header-right .fc-button').show(); 
      } 
     } 
    }); 
});

这里是上面提到的功能：

function getWindowWidth(){ 
    return $(window).width(); 
} 
function getView(){ 
    return (ww <= 768) ? 'basicDay' : 'month'; 
}

来源

2013-12-19 15:40:58 Matt

fullcalendar - 调整窗口上日程调整

回答

相关问题