时间戳

首页 > 解决方案 > jquery 无法识别 fullcalendar

jquery - jquery 无法识别 fullcalendar

问题描述

我使用 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');

引导程序.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');
}

包.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;
        },
    });
});

标签： jquerylaravelwebpackfullcalendar

解决方案

你不能$('#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();
});

推荐阅读