Odoo 16启用FullCalendar垂直资源视图报错求助

错误原因分析 #

你遇到的SyntaxError: Cannot use import statement outside a module，本质是因为直接加载了npm安装的ES模块版本FullCalendar资源插件。这类文件使用import语法，但Odoo通过loadJS加载的是普通脚本，而非ES模块，浏览器环境不支持这种语法，因此报错。

正确实现步骤 #

1. 确认依赖的UMD格式文件路径

npm安装依赖后，资源插件的兼容版本存放在各模块的dist目录下（UMD格式，支持普通脚本加载），路径为：

• @fullcalendar/resource/dist/main.js
• @fullcalendar/resource-timegrid/dist/main.js
• @fullcalendar/resource-daygrid/dist/main.js

2. 修改脚本加载代码

更新web/static/src/views/calendar/hooks.js中的loadJsFiles函数，替换为UMD格式的文件路径：

async function loadJsFiles() {
const files = [
"/web/static/lib/fullcalendar/core/main.js",
"/web/static/lib/fullcalendar/interaction/main.js",
"/web/static/lib/fullcalendar/daygrid/main.js",
"/web/static/lib/fullcalendar/luxon/main.js",
"/web/static/lib/fullcalendar/timegrid/main.js",
"/web/static/lib/fullcalendar/list/main.js",
// 替换为UMD版本资源插件
"/web/static/lib/fullcalendar/node_modules/@fullcalendar/resource/dist/main.js",
"/web/static/lib/fullcalendar/node_modules/@fullcalendar/resource-timegrid/dist/main.js",
"/web/static/lib/fullcalendar/node_modules/@fullcalendar/resource-daygrid/dist/main.js",
];

for (const file of files) {
await loadJS(file);
}
}

3. 配置日历渲染器启用资源视图

在web/static/src/views/calendar/calendar_common/calendar_common_renderer.js中，找到FullCalendar初始化代码，添加资源视图相关配置：

this.calendar = new FullCalendar.Calendar(this.el, {
    // 保留原有配置（如事件源、语言等）
    resources: [
        // 示例资源，可从Odoo业务数据动态获取
        { id: 'res1', title: '会议室A' },
        { id: 'res2', title: '会议室B' }
    ],
    views: {
        resourceTimeGridDay: { buttonText: '按日资源视图' },
        resourceTimeGridWeek: { buttonText: '按周资源视图' }
    },
    headerToolbar: {
        // 原有头部配置，添加资源视图切换按钮
        center: 'resourceTimeGridDay,resourceTimeGridWeek'
    }
});

4. 可选：更新模块资产配置（自定义模块场景）

如果是在自定义模块中扩展，需在模块的__manifest__.py中添加资源引用，确保打包时包含这些文件：

'assets': {
    'web.assets_backend': [
        # 你的自定义日历扩展脚本
        'your_module/static/src/js/calendar_resource_view.js',
        # 直接引用FullCalendar资源插件UMD文件
        '/web/static/lib/fullcalendar/node_modules/@fullcalendar/resource/dist/main.js',
        '/web/static/lib/fullcalendar/node_modules/@fullcalendar/resource-timegrid/dist/main.js',
    ],
},

验证效果 #

重启Odoo服务并更新模块，进入日历视图后，即可看到新增的资源视图切换按钮，点击即可启用垂直资源布局。

内容的提问来源于stack exchange，提问作者klausjulius