当我添加 javascript 时，Laravel Maddhatter fullcalendar 不起作用

Question

我在我的 Laravel 应用程序中使用 Maddhatter fullcalendar 包创建了事件日历。这是代码：

<div class="container">
    <h2>Appointments</h2>
    <br>
    <div class="row">
        <div class="col-md-12">
              <div class="x_panel">              
                 <div class="x_content"> 
                    {!! $calendar->calendar() !!}
                 </div>
               </div>              
        </div>
    </div>
 <div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
                <h4 id="modalTitle" class="modal-title"></h4>
            </div>
            <div id="modalBody" class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button class="btn btn-primary"><a id="eventUrl" target="_blank">Event Page</a></button>
            </div>
        </div>
    </div>
</div>
</div>
@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
{!! $calendar->script() !!}

<script type="text/javascript">

$( document ).ready(function() {
  $('#calendar-legalexfull').fullCalendar({
    dayClick: function(date, jsEvent, view) {
         $('#fullCalModal').modal();
    }
});
});

</script>
@endsection

问题是，当我删除 $(document).ready(function(){}); 时，JavaScript 工作但所有事件都没有显示在日历中，但是当我添加 $(document).ready(function(){}); 时，事件正在显示但 JavaScript 不工作。检查浏览器控制台时没有错误日志。我该如何解决这个问题？任何帮助将不胜感激。

Answer 1

当您想添加事件时，尝试在您的EventController 中使用setCallbacks() 函数。

$calendar = \Calendar::addEvents($events)->setCallbacks([
            'dayClick' => 'function(calEvent, jsEvent, view){ 
                $('#fullCalModal').modal();
            }',

        ]);