jquery – 具有Twitter Bootstrap的Fullcalendar?

前端之家收集整理的这篇文章主要介绍了jquery – 具有Twitter Bootstrap的Fullcalendar?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Fullcalendar小部件很棒。我在Twitter Bootstrap项目中使用它,它看起来就是完美的开箱即用。

然而,突出的一件事就是按钮的HTML,如前进,后退和今天。有没有办法改变Fullcalendar如何输出按钮代码,使其符合Bootstrap的按钮组?例如。:

<div class="btn-group">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>

如果没有,我想象,一种方法是创建我自己的按钮,并将它们连接到Fullcalendar小部件。但我不是一个jquery pro,而且我更喜欢尝试更简单的东西。谢谢。

解决方法

有两种方法可以做到这一点,就像你在你的问题中所暗示的那样。或者:

>制作自己定制的fullcalendar.js。
>在渲染后操作默认的HTML,最好使用类似jQuery的东西。

自定义构建

如果要执行前者,则需要编辑Header.js文件,然后重新编译并提供自定义版本的fullcalendar.js。但是,我会避开这个,因为它将会增加更新FullCalendar插件的开销。但是,如果你想去那条路线,那就是你的电话。优势在于您控制所有内容,因此从一开始就呈现出您的想法。

jQuery覆盖

如果要覆盖默认渲染,则只需要少量的jQuery行。例如:

var $fcButtons = $('[class*="fc-button"]').addClass('btn'),$oldTable = $('.fc-header-right > table');

$('<div>')
  .addClass('btn-group')
  .appendTo('.fc-header-right')
  .append($fcButtons);

$oldTable.remove();

这将从该< table>中删除三个默认按钮。并将它们折成< div>与btn组班。之后,我们可以丢弃那个空的表。

请记住,一堆CSS仍然会附加到这些按钮上,所以即使在技术上他们现在是一个“Twitter引导”按钮组,它们仍然看起来不是很漂亮。我假设,给出另一个答案,你可以自己弄清楚所有的CSS。

JSFiddle Demo

呃,

猜你在找的jQuery相关文章