<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>
I'm using jquery twitter boostrap and jquery fullCalendar, when I click on tab calendar, it not work. How to fix it?
I think you are trying to initialize full calendar in document ready function. Can you please try to initialize full calendar in tab shown event. Please try the below code snippet.
<!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>
