Have you ever wanted to add a gorgeous Calendar for event scheduling to your project, but decided that the much easier solution was to use those boring ordered lists – or even worse…tables. Yuck!

Responsive monthly, weekly and daily views, event drag & drop functionality, simple milestone and task management, popovers, and even “pretty colors” that will completely wow your special someone (read: client) with only a few measly lines of code. What if I told you that there is an Open Source solution capable of all of that? Yeaaah… #MindBlown

ToastUI Calendar is an Open Source solution released under the MIT license that can be used for rendering stunning Calendars for Event scheduling using both Vanilla JavaScript and jQuery – so pick your poison. It is currently hosted on GitHub, and there you can find everything needed to get started.

ToastUI Calendar
https://github.com/nhn/tui.calendar

Preparation is always half of the work, and that is especially the case for this awesome library. Dependencies are available through some CDNs for the lazy, but in the following few paragraphs I will show you how to generate them by yourself – just in case you need to tweak something during the development.

Main dependency of our champion library is the “ToastUI Code Snippets” available through the following GIT repository.

ToastUI Code Snippet
https://github.com/nhn/tui.code-snippet

It doesn’t come with the compiled files so that is something you will have to do all by yourself, like in the following example – look how capable you are. Amazing!

git clone https://github.com/nhn/tui.code-snippet
cd tui.code-snippet && npm install
npm run bundle

This will generate both minified and non-minified bundles in the “dist” directory that you can use in project. Alternatively, you can just use the premade bundle from the Toast CDN.

https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js

That wasn’t too difficult, eh? Great, now do exactly that three more times with the following libraries.

https://github.com/nhn/tui.dom
https://github.com/nhn/tui.time-picker
https://github.com/nhn/tui.date-picker

In the end, you should have the following resource files – if you just copy & paste the CDN example below…I’ll know.

<link href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" type="text/javascript" type="text/css" rel="stylesheet" />
<link href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" type="text/javascript" type="text/css" rel="stylesheet" />
<link href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css
" type="text/javascript" type="text/css" rel="stylesheet" />
<script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js" type="text/javascript"></script>
<script src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js" type="text/javascript"></script>
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js" type="text/javascript"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js" type="text/javascript"></script>
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js" type="text/javascript"></script>

Sure, there are 8 resource files, but don’t be scared! You can easily compile everything into two easily manageable JavaScript & CSS bundles using ex. GULP or a similar toolkit, essentially minimizing the number of resource files and in turn requests.

Any empty DOM element can be used for Calendar rendering, nothing special to see here. Carry on, carry on…my wayw…nevermind.

<div id="calendar" style="width: 600px"></div>

And finally, after all the necessary and tedious preparations, it’s time to utter the magic words and have some fun. Generating the magnificent and awe-inspiring Calendar for your epic events is done by executing the “tuiCalendar” function on a selected element.

$("#calendar").tuiCalendar({
    "defaultView"     : "month",
    "usageStatistics" : false
});

And that is essentially all that is needed to render a lovely and responsive Calendar. But empty Calendar is worth nada. To populate your, you simply need to utilize the “createSchedules” function like in the following example.

$("#calendar").tuiCalendar("createSchedules", [ {
    "id"           : "1",
    "calendarId"   : "1",
    "title"        : "my schedule",
    "category"     : "time",
    "dueDateClass" : "",
    "start"        : "2020-01-18T22:30:00+09:00",
    "end"          : "2020-01-19T02:30:00+09:00"
}, {
    "id"           : "2",
    "calendarId"   : "1",
    "title"        : "second schedule",
    "category"     : "time",
    "dueDateClass" : "",
    "start"        : "2020-01-20T17:30:00+09:00",
    "end"          : "2020-01-21T17:31:00+09:00"
} ]);

Good job kiddo, you have just learned something new. How does that make you feel? Absolutely amazing, I’m sure of it. Now, for more advanced stuff feel free to review the API and the accompanying documentation, experiment with the CodePen example I prepared for you, and so on. What are you waiting for?

ToastUI Calendar API
https://nhn.github.io/tui.calendar/latest/Calendar

ToastUI Calendar Demo
https://codepen.io/djordje-jocic/full/ZEYNOgL