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

I'm using tui.Calendar in reactjs, i read the documentation to get started with it, but when i try to include the calendar it gave me an error Uncaught TypeError: Cannot read property 'split' of undefined using the debugger in tui-calendar.js:3512 ymd = matches[0].split(separator); here's my code:

Uncaught TypeError: Cannot read property 'split' of undefined

tui-calendar.js:3512

ymd = matches[0].split(separator);

import React, { Component } from 'react';
import Calendar from 'tui-calendar';

export default class Ttt extends Component {
componentDidMount() {
this.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;
}
}
});
}
render() {
return

Anyone can help me face this problem?

1 Answer
1

Your DIV doesn't exist yet when you create the calendar class - render function just tells react what your component should look like. Additionally, you will create a new calendar instance every time your div needs to update, which is probably not what you want.

Instead, it should be created in a different lifecycle method:

render() {
...
return

This is still not ideal because it will break if your component is removed (check if the library provides a method to destroy a calendar instance and place it in componentWillUnmount). It also doesn't support multiple calendar components, which can be fixed by assigning a different ID to every instance.

componentWillUnmount

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.