TypeError: Cannot read property 'createRangePicker' of undefined

[blacksagres]

Version

• latest, copied from CDN

Development Environment

• Google Chrome (latest version)

Current Behavior

Hello,

I've been looking through the documentation in order to create the schedule popup, I found this example in your demo pages: https://nhn.github.io/tui.calendar/latest/tutorial-example16-template-for-popup

But whenever I run the code and click the calendar to create the popup, I get this error:

Uncaught TypeError: Cannot read property 'createRangePicker' of undefined
    at m._createDatepicker (tui-calendar.js:formatted:2519)
    at m.render (tui-calendar.js:formatted:2416)
    at y.showCreationPopup [as _showCreationPopup] (tui-calendar.js:formatted:10231)
    at y._onBeforeCreate (tui-calendar.js:formatted:11970)
    at m.CustomEvents.invoke (tui-snippet.js:3239)
    at m.CustomEvents.fire (tui-snippet.js:3194)
    at m._createSchedule (tui-calendar.js:formatted:6300)
    at tui-calendar.js:formatted:6336

This is what I have in my .html file:

 let Calendar = tui.Calendar;
    // register templates
    const templates = {
      popupIsAllDay: function () {
        return 'All Day';
      },
      popupStateFree: function () {
        return 'Free';
      },
      popupStateBusy: function () {
        return 'Busy';
      },
      titlePlaceholder: function () {
        return 'Subject';
      },
      locationPlaceholder: function () {
        return 'Location';
      },
      startDatePlaceholder: function () {
        return 'Start date';
      },
      endDatePlaceholder: function () {
        return 'End date';
      },
      popupSave: function () {
        return 'Save';
      },
      popupUpdate: function () {
        return 'Update';
      },
      popupDetailDate: function (isAllDay, start, end) {
        var isSameDate = moment(start).isSame(end);
        var endFormat = (isSameDate ? '' : 'YYYY.MM.DD ') + 'hh:mm a';

        if (isAllDay) {
          return moment(start).format('YYYY.MM.DD') + (isSameDate ? '' : ' - ' + moment(end).format('YYYY.MM.DD'));
        }

        return (moment(start).format('YYYY.MM.DD hh:mm a') + ' - ' + moment(end).format(endFormat));
      },
      popupDetailLocation: function (schedule) {
        return 'Location : ' + schedule.location;
      },
      popupDetailUser: function (schedule) {
        return 'User : ' + (schedule.attendees || []).join(', ');
      },
      popupDetailState: function (schedule) {
        return 'State : ' + schedule.state || 'Busy';
      },
      popupDetailRepeat: function (schedule) {
        return 'Repeat : ' + schedule.recurrenceRule;
      },
      popupDetailBody: function (schedule) {
        return 'Body : ' + schedule.body;
      },
      popupEdit: function () {
        return 'Edit';
      },
      popupDelete: function () {
        return 'Delete';
      }
    };

    var calendar = new tui.Calendar('#calendar', {
      defaultView: 'month',
      template: templates,
      useCreationPopup: true,
      useDetailPopup: true
    });

Expected Behavior

The calendar renders just fine but the popup seems to not work right out of the box, or maybe it's a configuration I missed.

[jungeun-cho]

@blacksagres Duplicate of #277 Check #285 out

[blacksagres]

@jungeun-cho thanks, I'll try it later on.

Could you please also add those dependencies to the documentation as well? I copied what the example showed at https://github.com/nhn/tui.calendar#via-contents-delivery-network-cdn and the dependencies below are missing there.

<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.js"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.js"></script>

Thanks again! 🙂

[jungeun-cho]

@blacksagres I agree with you. I will update the docs (e.g. *.md files). Thanks. :D

[dncpax]

Should reopen as having the exact same problem today. Adding time-picker and date-picker does not solve the issue.

[sylvain-perez]

Same for me having the same issue with calendar, date and time fetched from CDN

[oromancer]

It is important to have correct order of imports... I spend 3 hours with changing versions etc...

The order:

<script type="text/javascript" src="@{/lib/toast-ui/tui-time-picker.min.js}"></script>
<script type="text/javascript" src="@{/lib/toast-ui/tui-date-picker.min.js}"></script>
<script type="text/javascript" src="@{/lib/toast-ui/toastui-calendar.min.js}"></script>

The documentation does not says. I hope it helps someone