我正在尝试在 laravel 框架中设置 fullCalendar，但由于某种原因它不起作用。
我制作了一个单独的原型（没有框架，只是一个索引.html文件），当我复制该代码时，它突然不再起作用了......
我收到Uncaught TypeError: $(...).fullCalendar is not a function错误。
谁能告诉我我做错了什么？
拉拉维尔：应用刀片.php
<!DOCTYPE html>
<html lang="<!DOCTYPE html">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Larabase</title>
<script src="{{ asset('bower/jquery/dist/jquery.js') }}"></script>
<script src="{{ asset('bower/moment/moment.js') }}"></script>
<script src="{{ asset('bower/moment/locale/nl.js') }}"></script>
<script src="{{ asset('bower/fullcalendar/dist/fullcalendar.js') }}"></script>
<script src="{{ asset('bower/fullcalendar/dist/lang/nl.js') }}"></script>
<link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.css') }}"/>
<link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.print.css') }}"/>
@stack('scripts_head_before')
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
{{-- Font Awesome --}}
{{--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--}}
@stack('scripts_head_after')
</head>
<body>
@include('partials.nav')
<div class="container" style="margin-top: 30px;">
@include('partials.alert')
@yield('content')
</div><!-- /.container -->
@stack('scripts_footer_before')
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
{!! HTML::script('js/global.js') !!}
@stack('scripts_footer_after')
</body>
</html>
拉拉维尔：家，刀锋.php
@extends('app')
@section('content')
<div id='calendar'></div>
<script type="text/javascript">
var events = [
{
title: 'Meeting',
start: '2016-01-12T10:30:00',
end: '2016-01-12T11:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T11:30:00',
end: '2016-01-12T12:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T12:30:00',
end: '2016-01-12T13:30:00'
}
];
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
lang: 'nl',
eventLimit: true,
weekends: true,
firstDay: 1,
weekNumbers: true,
businessHours: {
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [1, 2, 3, 4, 5]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
},
events,
dayClick: function (date, jsEvent, view) {
alert('Clicked on: ' + date.format());
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'red');
},
eventClick: function (calEvent, jsEvent, view) {
// alert('Event: ' + calEvent.title);
// alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
// alert('View: ' + view.name);
console.log('event', calEvent);
console.log('jsEvent', jsEvent);
console.log('View', view);
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
});
</script>
@stop
索引.html原型（有效）：
<html>
<head>
<title>Fullcalendar prototype</title>
<link rel='stylesheet' href='bower_components/fullcalendar/dist/fullcalendar.css'/>
<script src='bower_components/jquery/dist/jquery.min.js'></script>
<script src='bower_components/moment/min/moment.min.js'></script>
<script src='bower_components/fullcalendar/dist/fullcalendar.js'></script>
<script src='bower_components/fullcalendar/dist/lang/nl.js'></script>
<script src='bower_components/bootstrap/dist/js/bootstrap.min.js'></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body>
<h1>Fullcalendar prototype
<button id="addbutton" class="btn btn-default">+</button>
</h1>
<div id='calendar'></div>
<script type="text/javascript">
var events = [
{
title: 'Meeting',
start: '2016-01-12T10:30:00',
end: '2016-01-12T11:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T11:30:00',
end: '2016-01-12T12:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T12:30:00',
end: '2016-01-12T13:30:00'
}
];
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
lang: 'nl',
eventLimit: true,
weekends: true,
firstDay: 1,
weekNumbers: true,
businessHours: {
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [1, 2, 3, 4, 5]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
},
events,
dayClick: function (date, jsEvent, view) {
alert('Clicked on: ' + date.format());
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'red');
},
eventClick: function (calEvent, jsEvent, view) {
// alert('Event: ' + calEvent.title);
// alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
// alert('View: ' + view.name);
console.log('event', calEvent);
console.log('jsEvent', jsEvent);
console.log('View', view);
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
});
</script>
</body>
</html>
按如下方式编写代码：-
应用刀片.php
<!DOCTYPE html>
<html lang="<!DOCTYPE html">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Larabase</title>
<script src="{{ asset('bower/jquery/dist/jquery.js') }}"></script>
<script src="{{ asset('bower/moment/moment.js') }}"></script>
<script src="{{ asset('bower/moment/locale/nl.js') }}"></script>
<script src="{{ asset('bower/fullcalendar/dist/fullcalendar.js') }}"></script>
<script src="{{ asset('bower/fullcalendar/dist/lang/nl.js') }}"></script>
<link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.css') }}"/>
<link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.print.css') }}"/>
@stack('scripts_head_before')
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
{{-- Font Awesome --}}
{{--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--}}
@stack('scripts_head_after')
</head>
<body>
@include('partials.nav')
<div class="container" style="margin-top: 30px;">
@include('partials.alert')
@yield('content')
</div><!-- /.container -->
@stack('scripts_footer_before')
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
{!! HTML::script('js/global.js') !!}
@stack('scripts_footer_after')
// ADD another yield section here.
@yield('external_script')
</body>
</html>
首页.刀锋.php
@extends('app')
@section('content')
<!-- Add only div here -->
<div id='calendar'></div>
@stop
@section('external_script')
<!-- Here is your script-->
<script type="text/javascript">
var events = [
{
title: 'Meeting',
start: '2016-01-12T10:30:00',
end: '2016-01-12T11:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T11:30:00',
end: '2016-01-12T12:30:00'
},
{
title: 'Meeting',
start: '2016-01-12T12:30:00',
end: '2016-01-12T13:30:00'
}
];
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
lang: 'nl',
eventLimit: true,
weekends: true,
firstDay: 1,
weekNumbers: true,
businessHours: {
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [1, 2, 3, 4, 5]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
},
events,
dayClick: function (date, jsEvent, view) {
alert('Clicked on: ' + date.format());
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'red');
},
eventClick: function (calEvent, jsEvent, view) {
// alert('Event: ' + calEvent.title);
// alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
// alert('View: ' + view.name);
console.log('event', calEvent);
console.log('jsEvent', jsEvent);
console.log('View', view);
// change the border color just for fun
$(this).css('border-color', 'red');
}
});
});
</script>
@stop
希望它能帮助你:)