I'm building a web app and would like to integrate the react-calendar-timeline into it. I've never worked with React before but I have worked with Vue. Every option I try gives me a blank browser window, either with or without an error in the console. What I've tried:
First try:
I've created a new folder and used npm install --save react-calendar-timeline into it to install all peer dependencies. This creates a nodes_module package with the dependencies react, react-dom, moment and interacsjs (and a few more), this seems to work fine for me. Then I tried to create a javascript file (tried both .js and .jsx) with the code below, also stated under 'At the very minimum:' on the Github page of the library.
index.js:
import Timeline from 'react-calendar-timeline'
// make sure you include the timeline stylesheet or the timeline will not be styled
import 'react-calendar-timeline/lib/Timeline.css'
import moment from 'moment'
const groups = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }]
const items = [
{
id: 1,
group: 1,
title: 'item 1',
start_time: moment(),
end_time: moment().add(1, 'hour')
},
{
id: 2,
group: 2,
title: 'item 2',
start_time: moment().add(-0.5, 'hour'),
end_time: moment().add(0.5, 'hour')
},
{
id: 3,
group: 1,
title: 'item 3',
start_time: moment().add(2, 'hour'),
end_time: moment().add(3, 'hour')
}
]
ReactDOM.render(
<div>
Rendered by react!
<Timeline
groups={groups}
items={items}
defaultTimeStart={moment().add(-12, 'hour')}
defaultTimeEnd={moment().add(12, 'hour')}
/>
</div>,
document.getElementById('root')
)
I've created a basic HTML file and created a script src to this index.js file from above.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
This loads the index.js file but gives me an error:
Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1). So I added type="module" to the script link: <script type="module" src="index.js"></script> on line 7 in index.js. This gives me the following error: Uncaught SyntaxError: Unexpected token '<' (at index.js:33:3).
Second try:
I also saw on the github that there were some examples, so I tried one, the Basic Usage one. This is a link to a codesandbox.io, I've created files with the exact names and code as used in the example but don't know where to go from there. The index.html only has a div and if I open this file (either by just opening it or by opening it with a live server from VSC) nothing seems to happen. So I add the code from the index.html file from above to link to the index.js file in here. This opens the code from index.js, but gives me the exact error from above (the module one). So I add type="module" again and it then gives me the error Uncaught SyntaxError: Unexpected token '<' (at index.js:7:3), which again is the <div> opening tag.
What am I missing to create a minimal version of the react-calendar-timeline, so I can use it to create my own timeline afterwards?