Blazor 中的 TUI (Toast UI) 日历渲染问题

Question

最近我尝试将 TUI (Toast UI) 日历实现到我的 Blazor 项目之一中。不幸的是，按照指南和文档，我遇到了一些渲染问题。

填充的日历如下所示：

虽然它应该看起来像这样：

JS部分：

var Calendar = require('tui-calendar'); /* CommonJS */
require("tui-calendar/dist/tui-calendar.css");

// If you use the default popups, use this.
require("tui-date-picker/dist/tui-date-picker.css");
require("tui-time-picker/dist/tui-time-picker.css");

window.InitCalendar = function () {
var MONTHLY_CUSTOM_THEME = {
    // month header 'dayname'
    'month.dayname.height': '42px',
    'month.dayname.borderLeft': 'none',
    'month.dayname.paddingLeft': '8px',
    'month.dayname.paddingRight': '0',
    'month.dayname.fontSize': '13px',
    'month.dayname.backgroundColor': 'inherit',
    'month.dayname.fontWeight': 'normal',
    'month.dayname.textAlign': 'left',

    // month day grid cell 'day'
    'month.holidayExceptThisMonth.color': '#f3acac',
    'month.dayExceptThisMonth.color': '#bbb',
    'month.weekend.backgroundColor': '#fafafa',
    'month.day.fontSize': '16px',

    // month schedule style
    'month.schedule.borderRadius': '5px',
    'month.schedule.height': '18px',
    'month.schedule.marginTop': '2px',
    'month.schedule.marginLeft': '10px',
    'month.schedule.marginRight': '10px',

    // month more view
    'month.moreView.boxShadow': 'none',
    'month.moreView.paddingBottom': '0',
    'month.moreView.border': '1px solid #9a935a',
    'month.moreView.backgroundColor': '#f9f3c6',
    'month.moreViewTitle.height': '28px',
    'month.moreViewTitle.marginBottom': '0',
    'month.moreViewTitle.backgroundColor': '#f4f4f4',
    'month.moreViewTitle.borderBottom': '1px solid #ddd',
    'month.moreViewTitle.padding': '0 10px',
    'month.moreViewList.padding': '10px'
};

var calendar = new Calendar('#calendar', {
    defaultView: 'month', // monthly view option
    theme: MONTHLY_CUSTOM_THEME
});

calendar.createSchedules([
    {
        id: 11035,
        calendarId: "1",
        category: "time",
        title: "Vendor 1",
        start: "2021-08-04",
        end: "2021-08-19",
    },
    {
        id: 11036,
        calendarId: "2",
        category: "time",
        title: "Vendor 2",
        start: "2021-08-09",
        end: "2021-08-09",
    },
    {
        id: 11039,
        calendarId: "3",
        category: "time",
        title: "Vendor 3",
        start: "2021-08-04",
        end: "2021-08-04",
    },
    {
        id: 11030,
        calendarId: "4",
        category: "time",
        title: "Vendor 4",
        start: "2021-08-13",
        end: "2021-08-14",
    },
]);

剃须刀：

@page "/personal/calendar"
@using System.Net.Http.Json
@inject IJSRuntime JsRuntime
<h1>Kalendarz</h1>
<div id="menu">
<span id="menu-navi">
    <button type="button" class="btn btn-default btn-sm move-today" data-action="move-today">Today</button>
    <button type="button" class="btn btn-default btn-sm move-day" data-action="move-prev">
        <i class="calendar-icon ic-arrow-line-left" data-action="move-prev"></i>
    </button>
    <button type="button" class="btn btn-default btn-sm move-day" data-action="move-next">
        <i class="calendar-icon ic-arrow-line-right" data-action="move-next"></i>
    </button>
</span>
<span id="renderRange" class="render-range"></span>
</div>
<div id="calendar"></div>
@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JsRuntime.InvokeVoidAsync("InitCalendar");
    }
}
}

作为 Blazor 的新手，我正在寻找一些见解，因为我无法验证问题:(

旁注 - 我尝试使用 gismofx/toast_ui.blazor_calendar 但我的实现和提供的演示都只得到 404 和 NullReferenceExceptions。

Answer 1

我知道我参加聚会迟到了，但如果您仍然遇到此问题： 我使用 gismofx 包装器遇到了完全相同的问题，所以按照你的路线并创建了我自己的。 您遇到的问题是日历的 .css 文件未加载。

如果您使用 WebPack，则需要包含以下 npm 包： “css-loader”、“mini-css-extract-plugin”和“style-loader”。 这将使您能够从 Toast UI npm 包中提取 css 文件。

将 webpack.config.js 文件添加到您初始化 npm 的同一目录中，配置类似于：

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/tuiCalendar.js',
    output: {
        path: path.resolve(__dirname, '../wwwroot/'),
        filename: 'tuiCalendar.bundle.js'
    },
    plugins: [
        new MiniCssExtractPlugin(
            {
                filename: 'tuiCalendar.css'
            })
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
        ]
    }
}

在我的示例中，我要导出的 js 文件是“./src/tuiCalendar.js”，我正在提取 css 文件“tuiCalendar.css”。

提取 css 文件后，您将需要在 html 或 cshtml 中添加对它的引用作为标准。 就我而言，我创建了一个 Razor 类库，因此我按如下方式引用它：

<link href="_content/TUICalendar_Blazor/js/tuiCalendar.css" rel="stylesheet" />

这将其指向项目名称“TUICalendar_Blazor”，该文件位于该项目的 wwwroot/js 文件夹中。

第一次在这里发帖，希望这没问题，我已经帮助了某人，因为我仅仅通过潜伏就得到了很多帮助。

Answer 2

我们目前正在实施新版本的 toast-ui/calendar (v.2.1.3)！

更新：https://github.com/gismofx/toast_ui.blazor_calendar/issues/62