2017-02-18 8 views
1

私はJSに新しく、さらにJqueryとfullcalendarに新しいです。私は、ページ上でうまく動作するカレンダーを作成しました。私はこのコードを別のページと組み合わせようとしており、カレンダーをレンダリングすることができません。JS、Jquery、フルカレンダー、学生

まず、私はいくつかのファイルが含ま:それは上の作品として、私は何の問題がここにあると思いますdonn't

$(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' 
      } 

     ] 
    }); 

}); 

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

マイカレンダーのコードを最初のページ。

私はいくつかのインラインスタイルが含まれています

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> 

テストはどこでする必要がありますが、ノーカレンダー表示されます。私はすべてのコードを残念に思っていますが、私は学生であり、なぜこれが機能していないのか理解できません。探してくれてありがとう。どんなアドバイスも大いにアピールされます。

+0

、それはあなたが今とfullcalendar.js '<リンクのrel = 'スタイルシート' のhref = 'fullcalendar/fullcalendar.css' を含める前に、あなたはjqueryのを含める必要がありますと言います/ > <スクリプトSRC = 'のlib/jquery.min.js'> <スクリプトSRC = 'のlib/moment.min.js'> <スクリプトSRC = 'fullcalendar/fullcalendar.js'> ' それをあなたはjqueryを前にかわりに後に入れているようです。 – Inkdot

+0

ありがとう、私はそれを試みます。 – Protium

+0

それを解決するかどうかはわかりませんが、カレンダーライブラリ専用のjqueryファイルがあるように見えます。 – Inkdot

答えて

4

あなたは(あなたの代わりにIncludencludeを入力)3番目と4番目のスクリプトタグ

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

で誤植を持っています。それを修正し、それが動作するかどうか確認してください。ドキュメントページで

+0

私は十分にあなたに感謝することはできません、私はおそらく明日までそれを発見していないだろう!それが問題でした。 – Protium

0

$(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>

関連する問題