ToastUI 日历依赖要求

Question

I was trying to work with Toast UI calendar available here: https://github.com/nhn/tui.calendar I tried to use it via CDN which requires us to insert the following:

<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" />

<!-- If you use the default popups, use this. -->
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />

<script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>
<script src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>  

When I tried to create a calendar in my html file, I noticed that it lacked a few functions such as date-picker, render-range, or even the event scheduler pop-up. I also noticed that they talk of tui-code-snippet as a dependency for this calendar: https://github.com/nhn/tui.calendar#-dependency However, I'm not sure what to include from the tui-code-snippet exactly, as there are a bunch of functions in there and they state that we should only import the functions we need from it: https://github.com/nhn/tui.code-snippet#-usage

Any help in this would be greatly appreciated.

EDIT : I added the following tui-code-snippet file as well, and this only helped me to get the calendar to show/render, but all the functionalities are still missing:

<script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>

Answer 1

The code lacks a few js links such as:

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.13/chance.min.js"></script>

Once these links are attached, we simply need to create a tui.calendar instance and then post the custom options as required. An example of such can be:

    <script type="text/javascript">
    var cal, resizeThrottled;
    var useCreationPopup = true;
    var useDetailPopup = true;
    var datePicker, selectedCalendar;

    cal = new tui.Calendar('#calendar', {
    defaultView: 'week',
    useCreationPopup: useCreationPopup,
    useDetailPopup: useDetailPopup,
    calendars: CalendarList,
    template: {
        milestone: function(model) {
            return '<span class="calendar-font-icon ic-milestone-b"></span> <span style="background-color: ' + model.bgColor + '">' + model.title + '</span>';
        },
        allday: function(schedule) {
            return getTimeTemplate(schedule, true);
        },
        time: function(schedule) {
            return getTimeTemplate(schedule, false);
        }
    }
});
</script>

and it should load the calendar just fine, and allow adding events to the scheduler. I hope this helps anyone else stuck in a similar problem.