FullCalendar不工作MVC 5

我想顯示一個完整的日曆，但沒有運氣。我試圖從nuGet下載fullcalendar幷包含這些文件但不工作。FullCalendar不工作MVC 5

<script src="~/Scripts/lib/jquery.min.js"></script> 
    <script src="~/Scripts/lib/moment.min.js"></script> 
    <script src="~/Scripts/fullcalendar.min.js"></script> 
    <link href="~/Content/fullcalendar.min.css" rel="stylesheet" /> 


    <script src="~/Scripts/gcal.js"></script> 
    <link href="~/Content/fullcalendar.print.css" rel="stylesheet" /> 

    <link href="~/Content/bootstrap.css" rel="stylesheet" /> 


    <script type="text/javascript"> 
     $(document).ready(function() { 

      $('#calendar').fullCalendar({ 
      }); 

     }); 

    </script> 



    <meta name="viewport" content="width=device-width" /> 
    <title>Index</title> 

</head> 
<body> 

    <div id='calendar'></div> 

</body> 
</html>

而且我嘗試下面的代碼，也沒有工作。我做錯了什麼，以及我如何顯示fullcalendar？

<!DOCTYPE html> 

<html> 
<head> 


    <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script> 
    <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script> 
    <script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script> 
    <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script> 
    <script> 
    $(document).ready(function() { 
     $('#calendar').fullCalendar({ 
      defaultDate: '2014-09-12', 
      editable: true, 
      eventLimit: true, // allow "more" link when too many events 
     }); 
    }); 
    </script> 



    <link href="~/Content/bootstrap.css" rel="stylesheet" /> 


    <meta name="viewport" content="width=device-width" /> 
    <title>Index</title> 

</head> 
<body> 

    <div id='calendar'></div> 

</body> 
</html>

在Chrome瀏覽器檢查元素

編輯1：

我改變腳本代碼，現在我沒有錯誤，但仍然沒有顯示任何

<script type="text/javascript"> 
    var m = moment('2016-09-19'); 

    $('#calendar').fullCalendar({ 
     // put your options and callbacks here 
     header: { 
      left: 'title', 
      center: '', 
      right: 'prev,next' 
     }, 
     weekends: false, 
     weekNumbers: true, 
     defaultView: 'month', 
     defaultDate: m, 
     events: [{ 
      start: '2016-09-19', 
      allDay: true, 
      rendering: 'background', 
      backgroundColor: '#F00', 
      title: 'full', 
      textColor: '#000', 
      className: 'event-full' 
     }, { 
      start: '2016-09-20', 
      allDay: true, 
      rendering: 'background', 
      backgroundColor: '#F00', 
      title: 'full', 
      textColor: '#000', 
      className: 'event-full' 
     }], 
     eventAfterRender: function (event, element, view) { 
      element.append('FULL'); 
     }, 
     viewRender: function (view, element) { 
      var start = new Date("2016-09-01"); 
      var end = new Date("2016-11-30"); 

      if (end < view.end) { 
       $("#calendar .fc-next-button").hide(); 
       return false; 
      } else { 
       $("#calendar .fc-next-button").show(); 
      } 

      if (view.start < start) { 
       $("#calendar .fc-prev-button").hide(); 
       return false; 
      } else { 
       $("#calendar .fc-prev-button").show(); 
      } 

     } 
    }); 

</script>

來源

2017-02-12 marios

您需要包含fullCalendar CSS文件。在您的示例中，我只能看到fullcalendar.print.css - 只有在將日曆發送到打印機時才能使用。由nuget下載的文件中的某處應該是「fullcalendar.css」。確保你在頁面中包含這個，否則很可能沒有任何東西會被正確渲染。

請參閱https://fullcalendar.io/docs/usage/瞭解所有必需文件的簡單示例以及必須包含它們的順序。顯然，如果它們與解決方案中的文件位置不匹配，請更改示例中建議的相對路徑。

來源

2017-02-13 10:49:19 ADyson

FullCalendar不工作MVC 5

回答

相關問題