Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect import in @bitnoi.se/react-scheduler README example code #165

Open
Deepan-kishore opened this issue Sep 13, 2024 · 2 comments
Open
Labels
question Further information is requested

Comments

@Deepan-kishore
Copy link

I encountered an issue with the example code provided in the @bitnoi.se/react-scheduler README. It seems that there are missing imports and setup that result in errors when trying to run the example.

Steps to Reproduce:

  • Install the @bitnoi.se/react-scheduler library by running:
    -npm install @bitnoi.se/react-scheduler dayjs

  • Copy the example code from the README into a React component:
    `import { Scheduler, SchedulerData } from "@bitnoi.se/react-scheduler";
    import dayjs from "dayjs";

default export function Component() {
const [filterButtonState, setFilterButtonState] = useState(0);

const [range, setRange] = useState({
startDate: new Date(),
endDate: new Date()
});

const handleRangeChange = useCallback((range) => {
setRange(range);
}, []);

const filteredMockedSchedulerData = mockedSchedulerData.map((person) => ({
...person,
data: person.data.filter(
(project) =>
dayjs(project.startDate).isBetween(range.startDate, range.endDate) ||
dayjs(project.endDate).isBetween(range.startDate, range.endDate) ||
(dayjs(project.startDate).isBefore(range.startDate, "day") &&
dayjs(project.endDate).isAfter(range.endDate, "day"))
)
}))

return (


<Scheduler
data={filteredMockedSchedulerData}
isLoading={isLoading}
onRangeChange={handleRangeChange}
onTileClick={(clickedResource) => console.log(clickedResource)}
onItemClick={(item) => console.log(item)}
onFilterData={() => setFilterButtonState(1)}
onClearFilterData={() => setFilterButtonState(0)}
config={{ zoom: 0, filterButtonState }}
/>

);
}

const mockedSchedulerData = [...] // Same as the example data in the README
`

  • Attempt to run the project, and you'll encounter the following errors:
    -The isBetween function is not recognized.

  • To resolve this, you need to import and extend isBetween from dayjs:
    import isBetween from "dayjs/plugin/isBetween"; dayjs.extend(isBetween);

@Deepan-kishore
Copy link
Author

I could not assign this to anyone. The option shows to be disabled for me.

@Deepan-kishore
Copy link
Author

For some reason, when I create a separate TS project from scratch and use the example in readme.md, this issue arises. But it's working fine when I clone it from this Repository.

@ppgallas ppgallas added the question Further information is requested label Sep 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants