2017-05-03 11 views
0

こんにちは私はfullCalendarとhtml collectiveを使ってlaravel 5.4でフルカレンダーを表示しましたが、私はレスポンス() - > json($ data)を返しましたが、私のウェルカムビューには空のページがありました:/。ビューでフルカレンダーを表示するlarovel 5.4

<script> 
 

 
\t $(document).ready(function() { 
 
\t \t 
 
\t \t $('#calendar').fullCalendar({ 
 
\t \t \t header: { 
 
\t \t \t \t left: 'prev,next today', 
 
\t \t \t \t center: 'title', 
 
\t \t \t \t right: 'month,basicWeek,basicDay' 
 
\t \t \t }, 
 
\t \t \t defaultDate: '2017-05-12', 
 
\t \t \t navLinks: true, // can click day/week names to navigate views 
 
\t \t \t editable: true, 
 
\t \t \t eventLimit: true, // allow "more" link when too many events 
 
\t \t \t events: [ 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'All Day Event', 
 
\t \t \t \t \t start: '2017-05-01' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'Long Event', 
 
\t \t \t \t \t start: '2017-05-07', 
 
\t \t \t \t \t end: '2017-05-10' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t id: 999, 
 
\t \t \t \t \t title: 'Repeating Event', 
 
\t \t \t \t \t start: '2017-05-09T16:00:00' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t id: 999, 
 
\t \t \t \t \t title: 'Repeating Event', 
 
\t \t \t \t \t start: '2017-05-16T16:00:00' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'Conference', 
 
\t \t \t \t \t start: '2017-05-11', 
 
\t \t \t \t \t end: '2017-05-13' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'Meeting', 
 
\t \t \t \t \t start: '2017-05-12T10:30:00', 
 
\t \t \t \t \t end: '2017-05-12T12:30:00' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'Lunch', 
 
\t \t \t \t \t start: '2017-05-12T12:00:00' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'Meeting', 
 
\t \t \t \t \t start: '2017-05-12T14:30:00' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'Happy Hour', 
 
\t \t \t \t \t start: '2017-05-12T17:30:00' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'Dinner', 
 
\t \t \t \t \t start: '2017-05-12T20:00:00' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'Birthday Party', 
 
\t \t \t \t \t start: '2017-05-13T07:00:00' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'Click for Google', 
 
\t \t \t \t \t url: 'http://google.com/', 
 
\t \t \t \t \t start: '2017-05-28' 
 
\t \t \t \t } 
 
\t \t \t ] 
 
\t \t }); 
 
\t \t 
 
\t }); 
 

 
</script>
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset='utf-8' /> 
 
{!! Html::style('vendor/maryem/fullcalendar/fullcalendar.min.css') !!} 
 
{!! Html::style('vendor/maryem/fullcalendar/fullcalendar.print.min.css') !!} 
 
<style> 
 

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

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

 
</style> 
 
</head> 
 
<body> 
 

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

 
</body> 
 

 
{!! Html::script('vendor/maryem/fullcalendar/fullcalendar.min.js') !!} 
 
    {!! 
 
    {!! Html::script('vendor/maryem/fullcalendar/lib/moment.min.js') !!}Html::script('vendor/maryem/fullcalendar/lib/jquery.min.js') !!}

+1

を使用してそれらを呼び出すしてくださいラインを呼び出して、あなたのライブラリーにエラーがあると思いますか?あなたがjQueryをロードし、fullCalendarライブラリの前に瞬時にロードする必要があることを確かめてください。私はあなたがJSファイルをロードするために使用している構文に慣れていませんが、fullCalendarライブラリの後にロードするように見えます。インクルードをページの ''セクションに移動することも検討してください。そのような底を下ろす特別な理由はありません。カレンダー設定が含まれている '

関連する問題