时间戳

首页 > 解决方案 > Javascript 未被调用

javascript - Javascript 未被调用

问题描述

也许我错过了一个非常重要的步骤，但我正在尝试使用 laravel 实现一个简单的日历。我的 JavaScript 没有被调用。我还可以确保在另一个表中来自控制器的数据不为空。已经 dd 并检查了。

以下是我的代码。我在浏览器中没有错误。警报或 console.log 中也没有任何内容。我将感谢您的帮助以使其运行。

@extends('layouts.app')

@section('content')

<h3 class="page-title">@lang('Test calendar Appointement')</h3>
<div id='calendar'></div>
@stop
@section('javascript')
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js'></script>
<script>
    $(document).ready(function() {
            // page is now ready, initialize the calendar...
            alert("here");
            console.log("here");
            $('#calendar').fullCalendar({
                // put your options and callbacks here
                defaultView: 'agendaWeek',
                events : [
                @foreach($appointments as $appointment)
                {
                    title : '{{ $appointment->user->first_name . ' ' . $appointment->user->last_name }}',
                    start : '{{ $appointment->start_time }}',
                    @if ($appointment->finish_time)
                    end: '{{ $appointment->finish_time }}',
                    @endif

                },
                @endforeach
                ]
            })
        });
    </script>
    @endsection

标签： javascriptlaravel

解决方案

您的 javascript 代码运行良好，请检查以下代码段，但您的代码中还有另一个问题，可能问题在于生成事件

<div id="calendar"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js'></script>
<script>
    $(document).ready(function() {
            // page is now ready, initialize the calendar...
            alert("here");
            console.log("here");
            $('#calendar').fullCalendar({
                // put your options and callbacks here
                defaultView: 'agendaWeek',
                events : [    ]
            })
        });
    </script>

推荐阅读