Question

这是我的代码，如果我将它完美地用于Sitecore项目，该代码将起作用。但是，当我在Sitecore视图中使用它时，它会引发以下错误：

未捕获的TypeError：$（...）。fullCalendar不是函数在HTMLDocument中。

<script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/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>
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" />

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css'>
<script>
$(document).ready(function () {

    $('#calendar').fullCalendar({
        header: {
            left: 'basicWeek,month',
            center: 'title',
            right: 'today,prev,next '
        },
        defaultDate: '2016-12-12',
        
    });

});
</script>
     <h2>Events and Appointments</h2>
     <div class="ui container">
         <div class="ui grid">
            <div class="ui sixteen column">
            <div id="calendar"></div>
         </div>
     </div>

我已经检查过了，看起来没有任何冲突的jquery引用，也没有其他控制台错误。

Answer 1

我认为您在使用js时遇到问题，请尝试使用以下网址来解决您的问题，

$('#calendar').fullCalendar({
   header: {
            left: 'basicWeek,month',
            center: 'title',
            right: 'today,prev,next '
        },
        defaultDate: '2016-12-12'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.js"></script>
<link href="https://cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/fullcalendar/1.5.4/gcal.js"></script>
<link href="https://cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.print.css"  rel="stylesheet"/>
<div id = "calendar"></div>

Answer 2

我认为您对我也遇到了同样的问题（可能是js和css坏了）我改为使用dom javascript

<script>
document.addEventListener('DOMContentLoaded', function() 
{
        var calendarEl = document.getElementById('calendar');
        var yearMonth = document.getElementById('yearMonth');
        //alert(yearMonth.value);

        var calendar = new FullCalendar.Calendar(calendarEl, 
        {
            height: 600,
            plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: ''
            },
            customButtons: {
                prev: {
                text: 'prev',
                    click: function() {

                    }
                },
                next: {
                text: 'next',
                    click: function() {

                    }
                }
                ,
                today: {
                text: 'today',
                    click: function() {

                    }
                }
                
            },
            
            eventBackgroundColor: '#D2FFF9',
            defaultDate: '',
            editable: true,
            navLinks: true, // can click day/week names to navigate views
            eventLimit: true, // allow "more" link when too many events
            events: {
                
            },
            loading: function(bool) 
            {
                document.getElementById('loading').style.display =
                bool ? 'block' : 'none';
            },
            eventClick: function(arg) {

            },
            eventRender: function(info) {
                //info.el.querySelector('.fc-title').innerHTML =  info.event.title ;       
            }
        });
        
        calendar.render();
        
    });

</script>

在Sitecore中使用代码时，为什么会出现.fullCalendar（）错误？

2 个答案: