Question

我已经尝试过在这里发布的许多解决方案，但它们似乎都不适合我。所以，我有一个自举材料主题，并且想要在点击导航中的一个图标时加载谷歌日历。

CSS LINKS

 <head>
 <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
 <link href="assets/css/material-kit.css" rel="stylesheet"/>
 <link href="assets/css/custom.css" rel="stylesheet"/>
 <link href='assets/fullcalendar.min.css' rel="stylesheet" ></link>
 <link href='assets/fullcalendar.print.css' rel="stylesheet" ></link>
 </head>

JS LINKS

 <script type='text/javascript'>

 $(document).ready(function() {
 $('#calendar').fullCalendar({
    googleCalendarApiKey: 'AIzaSyBKOSL-1QRAqsWDpHdofs73feA9CKJPqoc',
    events: {
        googleCalendarId: 'yoganathan.shiv@gmail.com'
    }
  });
});

</script>


<script src="assets/js/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js/material.min.js"></script>
<script src="assets/js/nouislider.min.js" type="text/javascript"></script>
<script src="assets/js/moment.min.js" type="text/javascript"></script>
<script src='assets/gcal.js' type='text/javascript' ></script>
<script src='assets/fullcalendar.min.js' type='text/javascript' ></script>
<script src='assets/moment.js' type='text/javascript' ></script>
<script src="assets/js/bootstrap-datepicker.js" type="text/javascript">     </script>
<script src="assets/js/material-kit.js" type="text/javascript"></script>

NAVBAR CODE

    <div class="collapse navbar-collapse" id="navigation-index">
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#">
                    <i class="material-icons">web</i> News
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="material-icons">contacts</i> People
                </a>
            </li>
            <li>
           <a href="#calendarModal" data-toggle="modal" data-target="#calendarModal">
           <i class="material-icons">date_range</i> Calendar
           </a>
           </li>
           <li>
           <a rel="tooltip" title="" data-placement="bottom" href="#">
                        <i class="fa fa-facebook-square"></i>
           </a>
           </li>
           <li>
           <a rel="tooltip" title="" data-placement="bottom" href="#">
           <i class="fa fa-linkedin-square"></i>
           </a>
           </li>

           </ul>
           </div>
           </div>
           </nav>

模式代码

 <!-- Begin Modal -->

 <div class="modal fade" id="calendarModal" tabindex="-1" role="dialog" aria-   labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
   <div class="modal-header" style="color:white;">
    <div class="modal-content">
     <div class="modal-header" style="background-color:#225593; color:white;">
        <button type="button" class="close" style="color:white;" data-dismiss="modal" aria-hidden="true">&times;</button>
     </div>
    <div class="modal-body">
   <div id="calendar"></div>
 </div>
   <div class="modal-footer" style="background-color:#225593; color:white;">
    </div>
   </div>
  </div>
  </div>
 </div>
 <!--  End Modal -->

修改问题是，我正在加载错误的moment.js文件。

无法在Bootstrap模式中加载FullCalendar

0 个答案: