Fullcalendar与Twitter Bootstrap？ [英] Fullcalendar with Twitter Bootstrap?

问题描述

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的专业人员，我宁愿尝试更简单的事情。感谢。

解决方案

有两种方法可以解决问题。您可以：

创建 fullcalendar.js 的自定义版本。

在渲染后操作默认的HTML，最好使用类似jQuery的。

b
$ b

自定义构建

如果您想做前者，您需要编辑 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> / code>，然后用 btn-group 类将它们折成< div> 。在这之后，我们可以放弃这个空表。

请记住，一堆CSS仍然会附加到这些按钮，所以即使技术上他们现在是 Twitter引导按钮组，他们仍然看起来不那么漂亮。我假设，鉴于另一个答案，你可以自己找出所有的CSS。

JSFiddle Demo

The Fullcalendar widget is awesome. I'm using it in a Twitter Bootstrap project, and it looks just about perfect out of the box.

One thing that sticks out, though, is the HTML for the buttons, such as forward, back, and today. Is there a way to change how Fullcalendar outputs the button code so that it conforms to Bootstrap's Button Group? E.g.:

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

If not, I imagine that one way to go would be to create the buttons on my own and wire them into the Fullcalendar widget. But I'm not a jquery pro, and I'd prefer to try something simpler. Thanks.

解决方案

There are two ways to do it, as you implied in your question. Either:

1. Make your own custom build of fullcalendar.js.

2. Manipulate the default HTML after it renders, preferably using something like jQuery.

Custom Build

If you want to do the former, you need to edit the Header.js file and then recompile and serve your custom version of fullcalendar.js. However, I'd shy away from that because it will add overhead to updating the FullCalendar plugin in the future. However, it's your call if you want to go that route. The advantage is you control everything and so it's rendered how you want from the beginning.

jQuery Overrides

If you want to override the default render, it'll only take a handful of jQuery lines. For example:

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

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

$oldTable.remove();

This will rip the three default buttons out of that <table> and toss them into a <div> with a btn-group class. After that we can discard that empty table.

Keep in mind that a bunch of the CSS will still be attached to those buttons, so even though technically they are now a "Twitter bootstrap" button group, they still won't look as spiffy. I assume, given the other answer, you can figure out all the CSS yourself.

JSFiddle Demo

​

这篇关于Fullcalendar与Twitter Bootstrap？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！