JS，jquery，全日历，学生

我是JS新手，甚至更新Jquery和fullcalendar。我创建了一个日历，可以在页面上正常工作。我正在尝试将此代码与另一个页面组合起来，而我无法获取要呈现的日历。JS，jquery，全日历，学生

首先，我有一些文件：

<link href='/Include/fullcalendar-2.6.1/fullcalendar.css' rel='stylesheet'/> 
<link href='/Include/fullcalendar-2.6.1/fullcalendar.print.css' rel='stylesheet' media='print'/> 
<script src='/Include/fullcalendar-2.6.1/lib/moment.min.js'></script> 
<script src='/Include/fullcalendar-2.6.1/lib/jquery.min.js'></script> 
<script src='/nclude/fullcalendar-2.6.1/fullcalendar.min.js'></script> 

<script type="text/javascript" src="/include/jquery-1.9.0.js"></script>

我的日历代码：

$(document).ready(function() { 

    $('#calendar').fullCalendar({ 
     defaultDate: '2017-02-01', 
     editable: true, 
     eventLimit: true, // allow "more" link when too many events 
     events: [ 

      { 
       id: 200, 
       title: 'Weekly System\nBackup', 
       url: '/images/backup.jpg', 
       start: '2017-01-29' 
      }, 
      { 
       id: 200, 
       title: 'Weekly System\nBackup', 
       url: '/images/backup.jpg', 
       start: '2017-02-05' 
      }, 
      { 
       id: 200, 
       title: 'Weekly System\nBackup', 
       url: '/images/backup.jpg', 
       start: '2017-02-12' 
      }, 
      { 
       id: 200, 
       title: 'Weekly System\nBackup', 
       url: '/images/backup.jpg', 
       start: '2017-02-19' 
      }, 
      { 
       id: 200, 
       title: 'Weekly System\nBackup', 
       url: '/images/backup.jpg', 
       start: '2017-02-26' 
      }, 
      { 
       id: 200, 
       title: 'Weekly System\nBackup', 
       url: '/images/backup.jpg', 
       start: '2017-03-05' 
      }, 
      { 
       title: 'Snow Break', 
       url: 'https://www.youtube.com/watch?v=SxqmPdIxh8s', 
       start: '2017-02-10', 
       end: '2017-02-15' 
      }, 
      { 
       title: 'C# Quiz', 
       url: '/images/quiz.jpg', 
       start: '2017-02-15T11:30:00', 
       end: '2017-02-15T12:30:00' 
      }, 
      { 
       title: 'Snow day 4', 
       url: '/images/day4.jpg', 
       start: '2017-02-16' 
      }, 
      { 
       title: 'SOG3 Due', 
       url: '/images/sog3.jpg', 
       start: '2017-02-17' 
      }, 
      { 
       title: 'Started SOG4', 
       url: '/images/sog4.jpg', 
       start: '2017-02-17' 
      }, 
      { 
       title: 'Winter Sale!', 
       url: '/SOG4/index.htm', 
       start: '2017-02-28' 
      } 

     ] 
    }); 

});

我donn't认为这里有任何问题，因为它适用于第一页。

我有一些内嵌样式：

body { 
    margin: 40px 10px; 
    padding: 0; 
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 
    font-size: 14px; 
} 

#calendar { 
    max-width: 900px; 
    margin: 0 auto; 
}

最后的HTML：

<div id="Content"> 
    <p>Test</p> 
    <div id='calendar'></div> 
</div>

试验证明了它应该，但没有日历。我很抱歉所有的代码，但我是一名学生，我不明白为什么这不起作用。感谢您的期待。任何建议都会被大大忽视。

来源

2017-02-18 Protium

在文档页面，它说你必须包括jQuery的你此刻包括和fullcalendar.js '<链接相对= '样式' HREF = 'fullcalendar/fullcalendar.css' 前/ > ' 它看起来像你在之后而不是之前包括jquery。 – Inkdot

谢谢，我会尽力的。 – Protium

我不确定这会解决它，我只是意识到它看起来像专门为日历库的jQuery文件。 – Inkdot

你必须在第三和第四脚本标记

<script src='/nclude/fullcalendar-2.6.1/fullcalendar.min.js'></script>

错别字（你输入nclude，而不是Include）。尝试修复它，看看它是否工作。

来源

2017-02-18 04:25:25

我不能够感谢你，我可能直到明天才会发现！这是问题所在。 – Protium

$(document).ready(function() { 
 

 
    $('#calendar').fullCalendar({ 
 
     defaultDate: '2017-02-01', 
 
     editable: true, 
 
     eventLimit: true, // allow "more" link when too many events 
 
     events: [ 
 

 
      { 
 
       id: 200, 
 
       title: 'Weekly System\nBackup', 
 
       url: '/images/backup.jpg', 
 
       start: '2017-01-29' 
 
      }, 
 
      { 
 
       id: 200, 
 
       title: 'Weekly System\nBackup', 
 
       url: '/images/backup.jpg', 
 
       start: '2017-02-05' 
 
      }, 
 
      { 
 
       id: 200, 
 
       title: 'Weekly System\nBackup', 
 
       url: '/images/backup.jpg', 
 
       start: '2017-02-12' 
 
      }, 
 
      { 
 
       id: 200, 
 
       title: 'Weekly System\nBackup', 
 
       url: '/images/backup.jpg', 
 
       start: '2017-02-19' 
 
      }, 
 
      { 
 
       id: 200, 
 
       title: 'Weekly System\nBackup', 
 
       url: '/images/backup.jpg', 
 
       start: '2017-02-26' 
 
      }, 
 
      { 
 
       id: 200, 
 
       title: 'Weekly System\nBackup', 
 
       url: '/images/backup.jpg', 
 
       start: '2017-03-05' 
 
      }, 
 
      { 
 
       title: 'Snow Break', 
 
       url: 'https://www.youtube.com/watch?v=SxqmPdIxh8s', 
 
       start: '2017-02-10', 
 
       end: '2017-02-15' 
 
      }, 
 
      { 
 
       title: 'C# Quiz', 
 
       url: '/images/quiz.jpg', 
 
       start: '2017-02-15T11:30:00', 
 
       end: '2017-02-15T12:30:00' 
 
      }, 
 
      { 
 
       title: 'Snow day 4', 
 
       url: '/images/day4.jpg', 
 
       start: '2017-02-16' 
 
      }, 
 
      { 
 
       title: 'SOG3 Due', 
 
       url: '/images/sog3.jpg', 
 
       start: '2017-02-17' 
 
      }, 
 
      { 
 
       title: 'Started SOG4', 
 
       url: '/images/sog4.jpg', 
 
       start: '2017-02-17' 
 
      }, 
 
      { 
 
       title: 'Winter Sale!', 
 
       url: '/SOG4/index.htm', 
 
       start: '2017-02-28' 
 
      } 
 

 
     ] 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html><head> 
 
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' /> 
 
<script src='lib/jquery.min.js'></script> 
 
<script src='lib/moment.min.js'></script> 
 
<script src='fullcalendar/fullcalendar.js'></script> 
 
<script src='test.js'></script> // this is the file which includes your jquery, call it whatever you like 
 
</head> 
 
<body> 
 
    
 
<div id="Content"> 
 
    <p>Test</p> 
 
    <div id='calendar'></div> 
 
</div> 
 

 
</body> 
 
</html>

来源

2017-02-18 04:26:41 Inkdot

JS，jquery，全日历，学生

回答

相关问题