tui-calendar.js:3512 Uncaught TypeError: Cannot read property 'split' of undefined

[zeyadetman]

Version

1.4.0

Development Environment

Windows10, on Chrome 67.

Current Behavior

render() {
    var calendar = new Calendar('#calendar', {
      defaultView: 'month',
      taskView: true,
      template: {
        monthGridHeader: function(model) {
          var date = new Date(model.date);
          var template = '<span class="tui-full-calendar-weekday-grid-date">' + date.getDate() + '</span>';
          return template;
        }
      }
    });
    
    calendar.createSchedules([
      {
          id: '1',
          calendarId: '1',
          title: 'my schedule',
          category: 'time',
          dueDateClass: '',
          start: '2018-01-18T22:30:00+09:00',
          end: '2018-01-19T02:30:00+09:00'
      },
      {
          id: '2',
          calendarId: '1',
          title: 'second schedule',
          category: 'time',
          dueDateClass: '',
          start: '2018-01-18T17:30:00+09:00',
          end: '2018-01-19T17:31:00+09:00',
          isReadOnly: true    // schedule is read-only
      }
  ]);

return (
      <div id="calendar" style={{height: 800 +'px'}}></div>)

Expected Behavior

display the calendar but the output is tui-calendar.js:3512 Uncaught TypeError: Cannot read property 'split' of undefined

[dongsik-yoo]

Need call stack or reproduce steps. Can I get this information?

[zeyadetman]

@dongsik-yoo you mean this

[dongsik-yoo]

Yes. I'll check that.

[dongsik-yoo]

I think you wouldn't create a Calendar instance in render() function. Why don't you see this issue #134 and my answer for React. And let me know the result.

[zeyadetman]

CalendarTemplate, TuiCalendar, and generateSchedule are not defined!

[dongsik-yoo]

I mean you shouldn't create a Calendar instance in render() function. There is no real element of #calendar at that time you create it. I wanted you to see componentDidMount().

[zeyadetman]

Here's my code after i fixed it but it gives me the same error! Can you help me further?

import React from 'react'
import Calendar from 'tui-calendar'

class CalendarMain extends React.Component {
  state = {
    options: {
      defaultView: 'month',
      template: {
        monthGridHeader: function(model) {
          var date = new Date(model.date);
          var template = '<span class="tui-full-calendar-weekday-grid-date">' + date.getDate() + '</span>';
          return template;
        }
      },
      useCreationPopup: true,
      useDetailPopup: true,
      calendars: [],
      month: {},
      week: {}
    }
  }

  componentDidMount() {
    var calendar = new Calendar('#calendar', {
      defaultView: 'month',
      taskView: true,
      template: {
        monthGridHeader: function(model) {
          var date = new Date(model.date);
          var template = '<span class="tui-full-calendar-weekday-grid-date">' + date.getDate() + '</span>';
          return template;
        }
      }
    });

    calendar.createSchedules([
      {
          id: '1',
          calendarId: '1',
          title: 'my schedule',
          category: 'time',
          dueDateClass: '',
          start: '2018-01-18T22:30:00+09:00',
          end: '2018-01-19T02:30:00+09:00'
      },
      {
          id: '2',
          calendarId: '1',
          title: 'second schedule',
          category: 'time',
          dueDateClass: '',
          start: '2018-01-18T17:30:00+09:00',
          end: '2018-01-19T17:31:00+09:00',
          isReadOnly: true    // schedule is read-only
      }
  ]);
  }

  render() {
    return (
      <div id="calendar" style={{height: 800 +'px'}}></div>)
  }
}

export default CalendarMain

[dongsik-yoo]

@zeyadetman Can you provide this sample project to reproduce it?

[dongsik-yoo]

No discussion. I close this. If you have more issue, please leave it.