jQuery 带有 Twitter Bootstrap 的 Fullcalendar？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11279394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fullcalendar with Twitter Bootstrap?
提问by Dogweather
The Fullcalendar widget is awesome. I'm using it in a Twitter Bootstrap project, and it looks just about perfect out of the box.
Fullcalendar 小部件很棒。我在 Twitter Bootstrap 项目中使用它，它看起来几乎是完美的开箱即用。
One thing that sticks out, though, is the HTMLfor the buttons, such as forward, back, and today. Is there a way to change how Fullcalendar outputs the button codeso that it conforms to Bootstrap's Button Group? E.g.:
但是，突出的一件事是按钮的HTML，例如前进、后退和今天。有没有办法改变 Fullcalendar 输出按钮代码的方式，使其符合 Bootstrap 的Button Group？例如：
<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.
如果没有，我想一种方法是自己创建按钮并将它们连接到 Fullcalendar 小部件中。但我不是 jquery 专家，我更愿意尝试更简单的东西。谢谢。
采纳答案by merv
There are two ways to do it, as you implied in your question. Either:
正如您在问题中暗示的那样，有两种方法可以做到。任何一个：
Make your own custom build of fullcalendar.js.
Manipulate the default HTML after it renders, preferably using something like jQuery.
制作您自己的fullcalendar.js自定义构建。
在呈现后操作默认 HTML，最好使用 jQuery 之类的东西。
Custom Build
自定义构建
If you want to do the former, you need to edit the Header.jsfile 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.
如果你想做前者，你需要编辑Header.js文件，然后重新编译并提供你的fullcalendar.js自定义版本。但是，我会回避它，因为它会增加将来更新 FullCalendar 插件的开销。但是，如果您想走那条路，这是您的决定。优点是你可以控制一切，所以它从一开始就按照你想要的方式呈现。
jQuery Overrides
jQuery 覆盖
If you want to override the default render, it'll only take a handful of jQuery lines. For example:
如果你想覆盖默认渲染，它只需要几行 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();
This will rip the three default buttons out of that <table>and toss them into a <div>with a btn-groupclass. After that we can discard that empty table.
这将撕掉三个默认按钮<table>并将它们扔到<div>一个btn-group类中。之后我们可以丢弃那个空表。
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.
请记住，一堆 CSS 仍将附加到这些按钮上，因此即使从技术上讲它们现在是“Twitter bootstrap”按钮组，它们仍然不会看起来那么漂亮。我假设，根据另一个答案，您可以自己找出所有 CSS。
JSFiddle Demo
JSFiddle 演示
?
?
回答by mike
To add to the answer from @merv my fullcalendar version does not use a table, so I added this jquery to update the buttons
要添加到@merv 的答案中，我的 fullcalendar 版本不使用表格，所以我添加了这个 jquery 来更新按钮
$('.fc-toolbar').find('.fc-button-group').addClass('btn-group');
$('.fc-toolbar').find('.ui-button').addClass('btn btn-primary');
$('.fc-toolbar').find('.fc-prev-button').html($('<span />').attr('class', 'glyphicon glyphicon-chevron-left'));
$('.fc-toolbar').find('.fc-next-button').html($('<span />').attr('class', 'glyphicon glyphicon-chevron-right'));
回答by osyan
This are the default css for Fullcalendar Buttons
这是 Fullcalendar按钮的默认 css
/* Buttons
------------------------------------------------------------------------*/
.fc-button {
position: relative;
display: inline-block;
cursor: pointer;
}
.fc-state-default { /* non-theme */
border-style: solid;
border-width: 1px 0;
}
.fc-button-inner {
position: relative;
float: left;
overflow: hidden;
}
.fc-state-default .fc-button-inner { /* non-theme */
border-style: solid;
border-width: 0 1px;
}
.fc-button-content {
position: relative;
float: left;
height: 1.9em;
line-height: 1.9em;
padding: 0 .6em;
white-space: nowrap;
}
/* icon (for jquery ui) */
.fc-button-content .fc-icon-wrap {
position: relative;
float: left;
top: 50%;
}
.fc-button-content .ui-icon {
position: relative;
float: left;
margin-top: -50%;
*margin-top: 0;
*top: -50%;
}
/* gloss effect */
.fc-state-default .fc-button-effect {
position: absolute;
top: 50%;
left: 0;
}
.fc-state-default .fc-button-effect span {
position: absolute;
top: -100px;
left: 0;
width: 500px;
height: 100px;
border-width: 100px 0 0 1px;
border-style: solid;
border-color: #fff;
background: #444;
opacity: .09;
filter: alpha(opacity=9);
}
/* button states (determines colors) */
.fc-state-default,
.fc-state-default .fc-button-inner {
border-style: solid;
border-color: #ccc #bbb #aaa;
background: #F3F3F3;
color: rgb(162, 48, 48);
}
.fc-state-hover,
.fc-state-hover .fc-button-inner {
border-color: #999;
}
.fc-state-down,
.fc-state-down .fc-button-inner {
border-color: #555;
background: #777;
}
.fc-state-active,
.fc-state-active .fc-button-inner {
border-color: #555;
background: #777;
color: #fff;
}
.fc-state-disabled,
.fc-state-disabled .fc-button-inner {
color: rgb(122, 69, 69);
border-color: #ddd;
}
.fc-state-disabled {
cursor: default;
}
.fc-state-disabled .fc-button-effect {
display: none;
}
So just try to add this to your CSS and change them as you like
因此，只需尝试将其添加到您的 CSS 并根据需要更改它们
