All the examples in "[...]/apps/calendar/examples/" are not working

[MarGraz]

Version

Version 2.1.3

Test Environment

Browser type: Firefox, OS: Windows 11

Current Behavior

I have downloaded the TUI Calendar zip code from the main branch, and I tried to run the examples, in the folder: "tui.calendar-main\tui.calendar-main\apps\calendar\examples", but all the examples are not working. The must common error returned in the console is:

Uncaught TypeError: Calendar is not a constructor
    <anonymous> file:///C:/Users/Dev/Downloads/tui.calendar-main/tui.calendar-main/apps/calendar/examples/15-template-popup.html:67

Expected Behavior

Have working examples.

[MarGraz]

It seems that is missing the module import const Calendar = tui.Calendar; as explained in the documentation.

[adhrinae]

@MarGraz

In order to run examples, You need to build the package first.

In the apps/calendar directory(npm dependencies are already installed for sure):

npm run build

Then open the examples with browser or through static server like http-server.

[adhrinae]

Closing because it's answered.

[MarGraz]

@MarGraz

In order to run examples, You need to build the package first.

In the apps/calendar directory(npm dependencies are already installed for sure):

npm run build

Then open the examples with browser or through static server like http-server.

Thank you for your reply. To avoid misunderstanding, I suggest to change the name of "calendar" folder, that seems a pre-compiled folder, to "{used-framework}-calendar", like the other two folder in the "apps" directory.

So, in the "tui.calendar-main\tui.calendar-main\apps" folder, you will have:

• react-calendar;
• vue-calendar;
• {used-framework}-calendar.

Could be also useful, to add in the "Installation" docs, a chapter that explain how to run the examples.

Thank you

[adhrinae]

To avoid misunderstanding, I suggest to change the name of "calendar" folder, that seems a pre-compiled folder,

The calendar folder is not a pre-compiled folder. It's targeting Vanilla JS users and the core of other wrapper packages.

And you gave us a fair point about running examples. I will consider that.

[toomanylogins]

I have just downloaded and did as suggested.
In the apps/calendar directory(npm dependencies are already installed for sure):
npm run build

get a rimraf error.
npm install rimraf

results in added 1111 packages, changed 800 packages, and audited 2024 packages

try again get error

F:\tui.calendar-calendar-2.1.3\apps\calendar>npm run build

@toast-ui/calendar@2.1.3 build
rimraf dist/ && concurrently 'npm:build:*'

'concurrently' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Lifecycle script build failed with error:
npm ERR! Error: command failed
npm ERR! in workspace: @toast-ui/calendar@2.1.3
npm ERR! at location: F:\tui.calendar-calendar-2.1.3\apps\calendar

git a bit further after 5 attempts but gave up.

[types] error TS2688: Cannot find type definition file for 'jest'.
[types] The file is in the program because:
[types] Entry point of type library 'jest' specified in compilerOptions
[types] npm ERR! Lifecycle script build:types failed with error:
[types] npm ERR! Error: command failed
[types] npm ERR! in workspace: @toast-ui/calendar@2.1.3
[types] npm ERR! at location: F:\tui.calendar-calendar-2.1.3\apps\calendar

[MarGraz]

@toomanylogins ok. In the end I didn't compiled it, because I used the CDN libraries.

If you need to do some local test, and you don't need to work on the JS libraries, you can always change the library reference in the html file, in all that rows where you see a reference to the "dist" folder, and it should start working.

For example, in this case, you can change the reference at row 11 and row 51 and use the CDN library instead, like this:

Row 11, from this: <link rel="stylesheet" href="../dist/toastui-calendar.css" />
To this: <link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.css" />

Row 51, from this: <script src="../dist/toastui-calendar.ie11.min.js"></script>
To this: <!-- To get bundle file for legacy browser --> <script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.ie11.min.js"></script>

You can find the CDN reference here, see "Via Contents Delivery Network (CDN)" paragraph.