React Big Schedule is a powerful and intuitive scheduler and resource planning solution built with React.
Home Page: https://react-big-schedule.vercel.app/
License: MIT License
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
This issue is related to #48 . We want to refactor all class components to functional components.
Better
Better
No response
No response
Better
Better
Better
No response
No response
https://stephenchou1017.github.io/scheduler/#/draganddrop
please visit this link
it is too complicated
i copy same code did not run and also download same file but did not install get error
Instead of
I'd like to be able to show weeks, e.g
Or other cadences, like quarters
This feature will help to find better solution for the core functionality of the library.
My first solution in mind is to implement our own drag and drop functionality.
Better maintenance.
No response
No response
How can I display a specified date range? Like startDate=2023-12-15,endDate=2024-01-05,
If the event is set from 10AM to 11PM same day, or 2PM today to 3PM tommorow, the tab showing existence of that event is shown as 100% fill of a day when view is set to week, or 100% fill of both days when it is a part of one day and next day (it assumes that it is "whole day" but in reality it is not, how can I show the actual graphical representation of time reserved in a day ?
I want to have more like "timeline" feel.
And i want to be able to add meeting from 2PM today to 10AM tomorrow, and next meeting from 11 AM tomorrow to 4PM tomorrow. And be able to show the relative length of the block representing that meeting in the day.
Right now we need to check on the tooltip what is the actual length of the event, and it would be much better to show it/visualize it.
If there is an option to do that, please point me to the proper example or just tell how to do that.
I hope I have explained it clearly
Thank You
No response
No response
Please help me to find DND
Is there a possiblity to display in popover additional data fields for events (e. g. total sales revnue, next event for same resource).
in this i want only month, quarter and year in viewType how to do it?
I am currently getting crashes when I try to open the calendar popover, I have set the locales as well according to the documentation but that didnt work and I have done it without it as well. It has been fairly temperamental because very rarely it did work fine, I cant recreate or remember what the situation was when it was working fine sadly.
I have noticed that it works fine in react-big-scheduler-stch, but it crashes the website in here, presumably because of the addition of dayjs, below is my code:
const dispatch = useDispatch();
const schedulerParentRef = useRef();
var today = new Date();
var date = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
let schedulerData = new SchedulerData(
date,
ViewType.Day, // Change the status of daily, weekly or monthly
false,
false,
{
eventItemPopoverPlacement: "bottomRightMousePosition",
responsiveByParent: true,
besidesWidth: window.innerWidth <= 1600 ? 100 : 350,
startResizable: false,
endResizable: false,
schedulerContentHeight: "100%",
weekResourceTableWidth: window.innerWidth * 0.1,
dayResourceTableWidth: window.innerWidth * 0.1,
monthResourceTableWidth: window.innerWidth * 0.1,
yearResourceTableWidth: window.innerWidth * 0.1,
weekCellWidth: 80,
dayCellWidth: 40,
}
);
schedulerData.setResources([]);
schedulerData.setEvents([]);
const prevClick = (schedulerData) => {
schedulerData.prev();
schedulerData.setEvents(Events);
dispatch(setViewModel(schedulerData));
};
const nextClick = (schedulerData) => {
schedulerData.next();
schedulerData.setEvents(Events);
dispatch(setViewModel(schedulerData));
};
const onViewChange = (schedulerData, view) => {
schedulerData.setViewType(view.viewType, view.showAgenda, view.isEventPerspective);
schedulerData.setEvents(Events);
dispatch(setViewModel(schedulerData));
};
const onSelectDate = (schedulerData, date) => {
schedulerData.setDate(date);
schedulerData.setEvents(Events);
dispatch(setViewModel(schedulerData));
};
<div className="w-full" ref={schedulerParentRef}>
{displayTimeline && (
<div className="-mt-4" style={{ marginLeft: "auto" }}>
<Scheduler
parentRef={schedulerParentRef}
schedulerData={viewModel}
prevClick={prevClick}
nextClick={nextClick}
onSelectDate={onSelectDate}
onViewChange={onViewChange}
eventItemClick={eventClicked}
viewEventClick={ops1}
viewEventText="Details"
/>
</div>
)}
Below is the crash error:
What would I have done incorrectly here? Any help is appreciated.
Placed the in a container and it goes out of the container.
Using the grid from ant.design:
<Layout className="">
<Sider />
<Layout>
<Header />
<Content>
<Row>
<Col span={24}>
.... ant tabs container / content etc ......
<Row gutter={[32, 32]}>
<Col span={24}>
<div className="schedular-container">
<Scheduler
schedulerData={schedulerData}
prevClick={prevClick}
nextClick={nextClick}
onSelectDate={onSelectDate}
onViewChange={onViewChange}
eventItemClick={eventClicked}
/>
</div>
</Col>
</Row>
.... end ant tabs container / content etc ......
</Col>
</Row>
</Content>
</Layout>
</Layout>
While resizing the window browser it adjust the table width the same as window size, and it does not take the sidebar into account.
MAC OSX
Chromium engine / Safari
18.2.0
4.2.1
No response
I was using react-big-scheduler, in that package we faced event display issue if we create event before 5:30 AM.
As per your suggestion I tried to install react-big-schedule package.
Old package was deleted with all the references.
Installed react-big-schedule package.
while gulp build facing error.
Please find below error -
[13:28:39] Error - [tsc] node_modules/react-big-schedule/dist/index.d.ts(129,20): error TS1110: Type expected.
[13:28:39] Error - [tsc] node_modules/react-big-schedule/dist/index.d.ts(130,16): error TS1109: Expression expected.
Hello, Is it possible to have an example of how to use library with Redux Toolkit?
Description:
After careful consideration, we have decided to remove the dependencies on react-dnd and react-dnd-html5-backend from our project. This decision is primarily driven by the fact that these libraries are no longer actively maintained by their respective teams. As a result, relying on them poses potential risks and may hinder our ability to address future issues or introduce new features.
To ensure the long-term stability and maintainability of our project, we need to remove the dependencies on react-dnd and react-dnd-html5-backend.
Tasks:
Update package.json: Remove the entries for react-dnd and react-dnd-html5-backend from the "dependencies" section.
Remove Imports: Locate and remove any import statements related to react-dnd and react-dnd-html5-backend in the relevant files.
Refactor Components: If any components rely on react-dnd and react-dnd-html5-backend, refactor them to use an alternative drag-and-drop solution that is actively maintained and aligned with our project requirements.
Update Tests: If tests exist for components or functionality affected by this change, update them accordingly to reflect the removal of react-dnd and react-dnd-html5-backend.
By removing these dependencies, we aim to mitigate potential risks and ensure that our project remains up-to-date with actively maintained libraries. We understand that this removal may require additional adjustments to code and components, and we will perform thorough testing to ensure the stability and functionality of the application post-removal.
If you have any questions or concerns regarding this issue, please feel free to reach out. Your cooperation in removing react-dnd and react-dnd-html5-backend from our project is crucial to maintaining the project's health and sustainability. Thank you for your support.
This issue is related to #48 and it is connected only to HeaderView component.
Better
Functional programming
No response
No response
Tracking issue for:
When I click on an empty area in calendar, I see the below error message
For example, if I click on the grey area below 3/12.
Sometimes, the error says reading 'end'. Below is the error in the console:
As a workaround, I am okay to just disable clicking in empty area in calendar but I don't see any such prop that allows me to do that.
I am just using the example in the repository.
Mac
Edge
18.2.0
4.4.0
No response
The localization of the date items are not working.
I have tried this configurations:
import * as dayjsLocale from 'dayjs/locale/nl';
schedulerData.setSchedulerLocale(dayjsLocale);
and
schedulerData.localeDayjs.locale('nl_NL');
schedulerData.setSchedulerLocale('nl_NL');
and
schedulerData.localeDayjs.locale('nl');
schedulerData.setSchedulerLocale('nl');
Nothing happend, also no error's. Also tried to use the br-pt local, but also not changing.
See above.
Mac
Chromium
18.2
4.2.1
No response
for ViewType Day, only showing first hour of the day as header, all other ViewType working properly
If a multi day event is included in the events set after another event then currently a bug will "overwrite" the event that appears before it when _createRenderData runs in SchedulerData.
I don't have a standalone example but I believe the commented out line 1097 in SchedulerData is intended to prevent this:
// this.events.sort(this._compare);
Because the value of let pos = -1; is not being reset to -1 within the following resourceEvents.headerItems.forEach then the check that pos = -1 doesn't always run and thus pos is not updated to the correct value for multi day events.
You need to add some events where the first event is on a specific date and the second event spans multiple days including the date of the first event.
All
All
Latest
Latest
No response
Hi, Is it possible to have an example of how to use this in React Hooks?
thx!
Using JSX on the resource setter:
{
id: element.product_id,
parentId: 0,
title: element.product_name,
name: <Flex justify="space-between" gap={5}>
<div className="product-label">{element.product_name}</div>
</Flex>,
}
The title on the resource buttons gives: [object Object]. Not sure why this title's has been set. You can find it here:
and here:
Possible to rename to title={resourceEvents.slotTitle} instead of using title={resourceEvents.slotName}.
Also, make more send to have this aligned using the title from the resource setter instead of the name.
Using "react-big-schedule": "^4.3.2",
MacOSX
Chromium
18.2
"react-big-schedule": "^4.3.2",
No response
how to adjust scheduler width as per outer div width
I would like to use the Customize Design Token like described here: https://ant.design/docs/react/customize-theme.
Because this integration is using Ant Design already, it is probably easy to add?
This is a very basic example of how to use the theme / custom settings:
import { Scheduler, } from 'react-big-schedule';
import { ConfigProvider, theme, } from 'antd';
const App = () =>{
const { useToken } = theme;
const { token } = useToken();
return(
<ConfigProvider
theme={{
token: {
colorPrimary: token.colorPrimary,
colorPrimaryHover: token.colorPrimaryHover,
borderRadius: token.borderRadius,
},
}}>
<Scheduler {...props} />
</ConfigProvider>
)}
The Scheduler got the same colors and gui setup as the rest of the antd application config.
No response
No response
When importing the modules in a typescript / nextjs environment, there is an error with importing Scheduler. When imported as the Default import (i.e) outside the bracket, we get this error when running the app:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
However if its imported as a named export we dont get an app error, but we get a TS error:
Module '"react-big-schedule"' has no exported member 'Scheduler'.
We work within a strict TS environent so any help would be greatly appreciated!
https://github.com/Cambrai2/react-big-schedule
reproduceable by running:
npm create t3-app@latest
and importing the react-big-schedule and trying to use.
Linux
Chrome
18.2.0
^4.3.2
No response
The scheduler does not conform to the outside parent div no matter what I try, the second issue is that when I change the viewType, from day to week or month, the entire scheduler expands outside the div and will not look functional.
Currently the scheduler does not conform to the outside div:
If I change to week:
If I rerender the component it reshapes itself back to a normal size, but its still not conforming to the outside div.
I have tried the
None have worked so far, from my understanding it seems that the resource table have a dynamic width that increases its size dependent on the width rather than the events table.
What could it be and what should I be trying? I would really like this to work in my application.
const schedulerParentRef = useRef();
var today = new Date();
var date = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
let schedulerData = new SchedulerData(
date,
ViewType.Day, // Change the status of daily, weekly or monthly
false,
false,
{
eventItemPopoverPlacement: "bottomRightMousePosition",
responsiveByParent: true,
besidesWidth: window.innerWidth <= 1600 ? 100 : 350,
startResizable: false,
endResizable: false,
schedulerContentHeight: "100%",
weekCellWidth: 80,
dayCellWidth: 40,
}
);
schedulerData.setResources([]);
schedulerData.setEvents([]);
useEffect(() => {
dispatch(initialiseViewModel(schedulerData));
return () => dispatch(reInitialiseViewModel());
}, [date, dispatch, initialiseViewModel, reInitialiseViewModel]);
const changeDate = (e) => {
setDateState(e);
};
const getResources = useCallback(() => {
getAuthorization()
.get(`company/get_companyschedule_recources?assigned_to=${DropDownValue}`)
.then((res) => {
setResources(res.data.message ? [] : res.data);
dispatch(setAPIDetailsUser(res.data.message ? [] : res.data));
getEvents(); // Get events after resources have been set
})
.catch((err) => {
console.log("Error in getting schedule", err);
});
}, [dispatch, DropDownValue]);
const getEvents = useCallback(() => {
getAuthorization()
.get(`company/get_companyschedule_events?assigned_to=${DropDownValue}`)
.then((res) => {
setEvents(res.data.message ? [] : res.data);
dispatch(setAPIDetailsUserEvents(res.data.message ? [] : res.data));
setDataLoaded(true); // Set dataLoaded to true after both resources and events are set
})
.catch((err) => {
console.log("Error in getting schedule", err);
});
}, [dispatch, DropDownValue]);
//Set Scheduler Data
useEffect(() => {
if (dataLoaded) {
viewModel.setResources(Resources);
viewModel.setEvents(Events);
dispatch(setViewModel(viewModel));
setDataLoaded(false); // Reset after processing the loaded data
}
}, [dataLoaded, Resources, Events, DropDownValue]);
useEffect(() => {
setDataLoaded(false); // Reset the dataLoaded state before fetching
getResources();
}, [DropDownValue, getResources]);
const prevClick = (schedulerData) => {
schedulerData.prev();
schedulerData.setEvents(Events);
dispatch(setViewModel(schedulerData));
};
const nextClick = (schedulerData) => {
schedulerData.next();
schedulerData.setEvents(Events);
dispatch(setViewModel(schedulerData));
};
const onViewChange = (schedulerData, view) => {
schedulerData.setViewType(view.viewType, view.showAgenda, view.isEventPerspective);
schedulerData.setEvents(Events);
dispatch(setViewModel(schedulerData));
};
const onSelectDate = (schedulerData, date) => {
schedulerData.setDate(date);
schedulerData.setEvents(Events);
dispatch(setViewModel(schedulerData));
};
const eventClicked = (schedulerData, event) => {
setOpen(true);
getAuthorization()
.get(`company/schedule_view/${event.id}/`)
.then((res) => {
setScheduleDetails(res.data);
setDateState([new Date(`${res.data.start_date}`), new Date(`${res.data.end_date}`)]);
})
.catch((err) => {
console.log("Error in getting schedule details", err);
});
};
const ops1 = (schedulerData, event) => {
setOpen(true);
getAuthorization()
.get(`company/schedule_detail/${event.id}/`)
.then((res) => {
setScheduleDetails(res.data);
})
.catch((err) => {
console.log("Error in getting schedule details", err);
});
// alert(
// `You just executed ops1 to event: {id: ${event.id}, title: ${
// event.title
// }}`
// );
};
return (
<div className="w-full" ref={schedulerParentRef}>
{displayTimeline && (
<div className="-mt-4" style={{ marginLeft: "auto" }}>
<Scheduler
parentRef={schedulerParentRef}
schedulerData={viewModel}
prevClick={prevClick}
nextClick={nextClick}
onSelectDate={onSelectDate}
onViewChange={onViewChange}
eventItemClick={eventClicked}
viewEventClick={ops1}
viewEventText="Details"
/>
</div>
)}
windows
firefox
^18.0.2
^4.2.5
No response
In the react-big-schedule project, several ESLint errors need to be addressed to ensure consistent code quality and avoid potential bugs. The affected files are:
react-big-schedule/src/components/SchedulerData.jsreact-big-schedule/src/components/DnDSource.jsreact-big-schedule/src/components/DnDContext.jsEach file needs to be reviewed and updated to comply with the project's ESLint rules. Please note the importance of not disabling the ESLint rules globally or within the files, as this might mask other potential issues.
Please use the npm run lint command after making the changes to ensure that all ESLint errors have been successfully fixed.
Thanks in advance for your attention to this issue.
I have been working on my project using a different architecture, but after considering the benefits of functional programming, I have decided to switch to a functional-based approach. This transition will not only align with industry standards but also enhance the maintainability and scalability of my project.
I understand that functional programming promotes immutability, pure functions, and declarative code, which can lead to more predictable and easier-to-test applications. By embracing these principles, I believe my project will become more robust and efficient.
However, I am relatively new to functional programming and would greatly appreciate your guidance and expertise in refactoring my codebase. I am confident that with your assistance, I will be able to successfully migrate my project to a functional-based architecture.
I have already done some initial research and identified areas in my project that can benefit from functional transformations. By adopting higher-order functions, leveraging immutable data structures, and embracing functional composition, I hope to optimize the performance and readability of my code.
Once again, I want to express my gratitude for your willingness to support me in this endeavor. Your expertise and guidance will undoubtedly contribute to the success of my project. Thank you for your assistance and I look forward to working together on this functional conversion.
I would like to request assistance in converting my project to TypeScript. As I am currently learning TypeScript, my knowledge in this area is limited. Therefore, I am seeking the help of someone who is knowledgeable in TypeScript to guide me through the conversion process. I greatly appreciate any support that can be provided. Thank you in advance for your help.
errorMsg:
(0 , react_dnd__WEBPACK_IMPORTED_MODULE_0__.DndContext) is not a function
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.