jquery 无法识别 fullcalendar

Posted 2023-03-14

【中文标题】jquery 无法识别 fullcalendar

【英文标题】：jquery didn't recognize fullcalendar

【发布时间】：2021-02-25 13:37:29

【问题描述】：

我使用 laravel 5.8.3，我使用 laravel Mix，我使用的是 fullcalendar 3.10.0，jquery 3.3.2，我还使用 vue 版本 2.6.10。 我不知道它发生了什么变化，但是当我尝试使用 npm run dev 编译我的项目时，我在加载 fullcalendar 时收到此错误： calendario.js:98260 Uncaught TypeError: $(...).fullCalendar is not a function

如果我在我的 webpack 中评论 fullcalendar 脚本，日历可以正常工作。 我发布了一些代码：

webpack.mix.js

const mix = require('laravel-mix');

mix.webpackConfig(webpack => 
    return 
        plugins: [
            new webpack.ProvidePlugin(
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                moment: 'moment',
                daterangepicker: 'daterangepicker',
            )
        ]
    ;
);

module.exports = 
    module: 
        rules: [
            
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            
        ]
    ,
    // plugin omitted




mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/upload_file.js', 'public/js/upload_file.js')
   .js('resources/js/calendario.js', 'public/js/calendario.js')
 /*    .js('resources/js/calendario_corsi.js', 'public/js/calendario_corsi.js')*/
    .js('resources/js/ckeditor_4.js', 'public/js/ckeditor_4.js')
    .js('resources/js/VueRequisiti.js', 'public/js/VueRequisiti.js')
    .js('resources/js/VueBusinessPlan.js', 'public/js/VueBusinessPlan.js')
    .js('resources/js/VueUtenti.js', 'public/js/VueUtenti.js')
    .js('resources/js/TabelleUtenti.js', 'public/js/TabelleUtenti.js')
    .js('resources/js/rapportiOre.js', 'public/js/rapportiOre.js')
    .sass('resources/sass/app.scss', 'public/css');

mix.autoload(
    'jquery': ['jQuery', '$'],
);



//mix.copy('resources/js/upload_file.js', 'public/js/upload_file.js');

bootstrap.js

window._ = require('lodash');

try 
    window.Popper = require('popper.js').default;
    global.$ = global.jQuery = require('jquery');
 catch (e) 

window.moment = require('moment');
window.daterangepicker = require('daterangepicker');

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');


if (token) 
    window.axios.defaults.headers.common = 
        'X-CSRF-TOKEN': Laravel["csrfToken"],
            'X-Requested-With': 'XMLHttpRequest',
            'Authorization': 'Bearer ' + Laravel["apiToken"],
    ;
 else 
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');

package.json

    "private": true,
    "scripts": 
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    ,
    "devDependencies": 
        "axios": "^0.19",
        "bootstrap": "^4.3.1",
        "bootstrap-datepicker": "^1.6.4",
        "bootstrap-sass": "^3.3.7",
        "ckeditor": "^4.12.1",
        "cross-env": "^5.2.*",
        "datatables": "^1.10.*",
        "fullcalendar": "^3.10.0",
        "inputmask": "^4.0.8",
        "jquery": "^3.4.*",
        "jquery-ui": "^1.12.1",
        "laravel-mix": "^4.1.*",
        "lodash": "^4.17.*",
        "moment": "^2.24.0",
        "node-sass": "^4.12.0",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.22.9",
        "sass-loader": "^7.3.1",
        "select2": "^4.0.8",
        "vue": "^2.6.10",
        "vue-template-compiler": "^2.6.10"
    ,
    "dependencies": 
        "@ckeditor/ckeditor5-build-classic": "^12.4.0",
        "@ckeditor/ckeditor5-build-decoupled-document": "^12.3.1",
        "@ckeditor/ckeditor5-vue": "^1.0.0",
        "admin-lte": "^2.4",
        "autosize": "^4.0.2",
        "bootstrap-datetime-picker": "^2.4.4",
        "bootstrap-toggle": "^2.2.2",
        "bootstrap-vue": "^2.16.0",
        "datatables.net": "^1.10.*",
        "datatables.net-bs": "^2.1.*",
        "datatables.net-buttons": "^2.2.0",
        "dateformat": "^3.0.3",
        "daterangepicker": "^3.0.5",
        "fine-uploader": "^5.16.2",
        "flatpickr": "^4.6.*",
        "font-awesome": "^4.7.0",
        "ionicons": "^4.6.2",
        "jquery-datetimepicker": "^2.5.21",
        "jquery-inputmask": "^1.0.1",
        "jquery-ui-dist": "^1.12.1",
        "jszip": "^3.2.*",
        "moment-timezone": "^0.5.31",
        "morris.js": "github:morrisjs/morris.js",
        "nouislider": "^14.0.2",
        "pdfmake": "^0.1.58",
        "rangy": "^1.3.0",
        "uiv": "^0.32.2",
        "vee-validate": "^2.2.13",
        "vue-axios": "^2.1.4",
        "vue-cookie": "^1.1.4",
        "vue-date-range": "^3.1.7",
        "vue-js-toggle-button": "^1.3.2",
        "vue-router": "^3.0.7",
        "vue-select": "^3.1.0",
        "vue-select2": "^0.2.6",
        "vue-tables-2": "1.5.3",
        "vue-textarea-autosize": "^1.0.4",
        "vue2-daterange-picker": "^0.5.1",
        "vuejs-datepicker": "^1.6.2",
        "vuex": "^3.5.1"
    

在这个文件中我调用了日历 (calendario.js)

import 'fullcalendar';
import moment from 'moment';
import 'jquery-ui-dist/jquery-ui';
$(document).ready(function () 
    
    function ini_events(ele) 
        ele.each(function () 
            let eventObject = 
                title: $.trim($(this).text()), 
                color: $(this).css("background-color"), 
            ;
            
            $(this).data('event', eventObject);
            $(this).draggable(
                zIndex: 1070,
                revert: true, 
                revertDuration: 0  
            );
        );
    
    ini_events($('#external-events div.external-event'));

    $('#calendar').fullCalendar(
        locale: 'it',
        lang: 'it',
        columnFormat: 'ddd D/M',
        slotLabelFormat:"HH:mm",
        events: 
            url: '/calendarioGet',
            data: function ()  
                return 
                    personId: $("select.collaboratore").children("option:selected").val(),
                ;

            ,textColor: 'black'
        ,

        header: 
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        ,
        
        slotDuration: '00:15:00',

        defaultTimedEventDuration: '01:00:00',
        forceEventDuration: true,
        timeFormat: 'H:mm',

        eventClick: function (event, jsEvent, view) 
            
            if (!event.hasOwnProperty('descrizione')) 
                window.open(event.url);
            
            return false;
        ,
    );
);

【问题讨论】：

您实际上是在代码中的哪个位置尝试创建日历？您的问题似乎缺少错误的根源。

你是对的...我更新了我的帖子...谢谢

@m.Sarto 你检查过我的最新答案了吗？

这个错误的来源几乎总是，A.“jQuery 是在 fullCalendar 库之后加载的”，或者 B。 "fullCalendar 库根本没有加载。"您应该仔细检查您的 html 以确保 1. 它们的顺序正确，2. 没有文件返回 404 错误，并且 3.<script>s没有使用async或defer，这可以改变javascript文件的加载顺序。

尝试将它放在 setTimeoOut 中有时会有所帮助

【参考方案1】：

你不能在这个版本中使用这个$('#calendar').fullCalendar() 你可以在这个语法中使用这个而不是https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js cdn $('#calendar').fullCalendar()

对于 newnpm 版本

https://fullcalendar.io/docs/getting-started 这个语法有点不同有错字 FullCalendar 这里 F 应该是大写

import  Calendar  from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

document.addEventListener('DOMContentLoaded', function() 
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, 
    plugins: [ dayGridPlugin ]
  );

  calendar.render();
);

【讨论】：

我有 3.10 版，在文档中有：$('#calendar').fullCalendar( weekends: false // will hide Saturdays and Sundays ); 见：fullcalendar.io/docs/v3/initialization

然后使用新语法import Calendar from '@fullcalendar/core';

如果我使用新版本，我必须更改所有代码，这不是我的目的......

试试FullCalendar

总是一样：calendario.js:98260 Uncaught TypeError: $(...).FullCalendar is not a function at HTMLDocument. (calendario.js:98260) at mightThrow (calendario. js:69468) 在进程 (calendario.js:69536)