Question

<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，当我点击标签日历时，它无效。如何解决？

Answer 1

我认为您正在尝试在文档就绪功能中初始化完整日历。您可以尝试在显示的标签事件中初始化完整日历。请尝试以下代码段。

<!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>

jQuery bootstrap ui tabs不能与fullCalendar一起使用

1 个答案: