I am trying to build a scheduler in my app. I found this scheduler here: React Scheduler
GitHub - Bitnoise/react-scheduler
I have tried to install the component by these directions here:
I get stuck as this point.
3. Log in to Retool
npx retool-ccl login
I then tried it the legacy custom component way.
Here is my iframe code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scheduler Integration</title>
<style>
body {
margin: 0;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/@bitnoi.se/react-scheduler@1.0.0/dist/index.css">
</head>
<body>
<script src="https://cdn.tryretool.com/js/react.production.min.js" crossorigin></script>
<script src="https://cdn.tryretool.com/js/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@material-ui/core@3.9.3/umd/material-ui.production.min.js"></script>
<script src="https://unpkg.com/@bitnoi.se/react-scheduler@1.0.0/dist/index.umd.js"></script>
<div id="react"></div>
<script>
window.Retool.subscribe(function(model) {
if (!model) { return; }
const { useState, useEffect } = window.React;
const { Scheduler } = window["reactScheduler"];
const { createRoot } = window.ReactDOM;
function App() {
const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState(model.data || []);
useEffect(() => {
setIsLoading(true);
// Simulate fetching data
setTimeout(() => {
setData(model.data);
setIsLoading(false);
}, 1000);
}, [model.data]);
return window.React.createElement(Scheduler, {
isLoading: isLoading,
data: data,
onItemClick: (clickedItem) => console.log(clickedItem),
onFilterData: () => {
// Filter your data
},
onClearFilterData: () => {
// Clear all your filters
},
config: {
filterButtonState: 0,
zoom: 0,
lang: "en",
maxRecordsPerPage: 20,
}
});
}
const rootElement = document.getElementById('react');
const root = createRoot(rootElement);
root.render(window.React.createElement(App));
});
</script>
</body>
</html>
I receive an error when i try the above code.
