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

回答

相关问题