jQuery bootstrap UI 选项卡不适用于 fullCalendar
jQuery bootstrap ui tabs not work with fullCalendar
<ul class="nav nav-tabs">
<li class="active"><a href="#tab_1_1" data-toggle="tab"> List </a></li>
<li><a href="#tab_1_2" data-toggle="tab"> Calendar </a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="tab_1_1">
List Management
</div>
<div class="tab-pane" id="tab_1_2">
<div id="calendar"></div>
</div>
</div>
我正在使用jquery twitter boostrap和jquery fullCalendar,当我单击选项卡日历时,它不起作用。如何解决?
我认为您正在尝试在文档就绪函数中初始化完整的日历。您能否尝试在选项卡显示的事件中初始化完整的日历。请尝试以下代码片段。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="/media/css/jquery.ui.theme.css" rel="stylesheet"/>
<link href="/media/css/bootstrap.css" rel="stylesheet"/>
<link href="/media/css/fullcalendar.css" rel="stylesheet"/>
<link href='/media/css/fullcalendar.print.css' rel='stylesheet' media='print' />
</head>
<body>
<script src="/Scripts/jquery-1.11.2.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/ie.js"></script>
<script src="/Scripts/jquery-ui-1.11.2.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/Scripts/fullcalendar.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab_1_1" data-toggle="tab"> List </a></li>
<li><a href="#tab_1_2" data-toggle="tab" id="acalander"> Calendar </a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="tab_1_1">
List Management
</div>
<div class="tab-pane" id="tab_1_2">
<div id="calendar"></div>
</div>
</div>
<script type="text/javascript">
$(document).on('shown.bs.tab', 'a[id="acalander"]', function (e) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2016-01-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2016-01-01'
},
{
title: 'Long Event',
start: '2016-01-07',
end: '2016-01-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-01-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-01-16T16:00:00'
},
{
title: 'Conference',
start: '2016-01-11',
end: '2016-01-13'
},
{
title: 'Meeting',
start: '2016-01-12T10:30:00',
end: '2016-01-12T12:30:00'
},
{
title: 'Lunch',
start: '2016-01-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-01-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-01-12T17:30:00'
},
{
title: 'Dinner',
start: '2016-01-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2016-01-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-01-28'
}
]
});
})
$(document).ready(function () {
});
</script>
相关文章:
- html5 drawImage适用于firefox,而不是chrome
- Jquery Ajax POST不工作.适用于GET
- 如何调试遗留的javascript代码(适用于IE,但在Google Chrome中不正常)
- .load()适用于window,而不是ID
- 使用Jquery更改css样式适用于id's、 不在课堂上
- 提交按钮不会;不适用于Chrome或Firefox,但适用于Internet Explorer
- 为什么 javascript 中的“btoa”编码适用于 20 位字符串而不是 20 位整数
- Javascript String to Date适用于Chrome,而不是FF或Safari
- Onchange,向上,向下箭头键适用于FF和Chrome,但在IE中不起作用
- .load() 适用于 IE 和 dreamweaver 预览版,但不能使用 opera 和 chrome
- 找不到适用于 Highcharts 的 JSON 数组语法
- 为什么在jQuery中使用focusout适用于Firefox,而使用addEventListener则不适用;t
- jQuery选择菜单验证器适用于FF和Chrome,但不适用IE
- 单选按钮'onclick'适用于Chrome和Firefox,但不适用IE
- JQuery ScrollTop适用于chrome,但不适用firefox
- window.opener.location.href适用于IE,但不适用Chrome或Safari
- Frame Busting buster不完全适用于IE
- Jquery touch punch适用于Chrome和Firefox,但不适用IE
- 背景更改仅适用于chrome+$.预加载不适用;不起作用
- JavaScript window.location.replace适用于Firefox,但不适用IE或Chrome