TUI (Toast UI) Calendar rendering issue in Blazor

Question

recently I've tried to implement TUI (Toast UI) Calendar into one of my Blazor projects. Unfortunately, following the guide and documentation I'm facing some rendering issues.

Populated calendar looks like this:

While it should look something like this:

JS part:

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",
    },
]);

Razor:

@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");
    }
}
}

Being quite new to Blazor I'm looking for some insight as I'm unable to verify the issue :(

Side note - I've tried using gismofx/toast_ui.blazor_calendar but only got 404s and NullReferenceExceptions for both my implementation as well as provided demo.

Answer 1

I know I am late to the party, but in-case you are still having this issue: I had the exact same problem using the gismofx wrapper so went your route and created my own. The issue you're having is the .css file for the calendar isn't being loaded.

If you are using WebPack you will need to include the following npm packages: 'css-loader', 'mini-css-extract-plugin', and 'style-loader'. This will enable you to extract the css file from the Toast UI npm package.

Add a webpack.config.js file to the same directory you initialised npm into with a config similar to:

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'],
            },
        ]
    }
}

In my example the js file I want to export is './src/tuiCalendar.js', and I'm extracting the css file 'tuiCalendar.css'.

Once you have the css file extracted you will need to add a reference to it in your html or cshtml as standard. In my case I created a Razor Class library so I reference it as follows:

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

This points it to the project name 'TUICalendar_Blazor', and the file is in the wwwroot/js folder of that project.

First time posting here so hopefully this is OK and I have helped someone as I've received a lot of help just by lurking.