I am using React-Day-Picker to create an appointment booking tool. Currently, the output looks like this.
However the client would like the timeslots to display below the relevant week that has been selected like so:
The question is how can i achieve this?
I capture the onclick event whent user selects a date:
const handleDayClick = (day, { selected }, e) => {
const weekDIV = e.target.closest('.DayPicker-Week')
// non react way would be something like this
const test = document.createElement('div')
weekDIV.after(test)
// thought maybe portal would work?
//ReactDOM.createPortal(weekDIV, document.createElement('div'))
}
Nb: the timeslots are a component and not related to react-day-picker
I have set up a small example here: sandbox
appreciated any guidance.
thanks
Related
In a component, I have a Calendar using react-calendar on the left side. I can add reminders via a form where I can select a date. These two dates are different displayed: the date from the react-calender is shown in the format 18/08/2021 while the date from the reminder form is shown as 2021-08-18.
How can I compare these two values so that only reminders are shown on the specific date when clicking on a calendar date? I tried to parse (which seems to be not recommended by MDN) but the output numbers are different. I tried to compare with valueOf() but the output is false.
EDIT:
I was able to compare both dates and the output is true. Therefore, I set a new prop to reminder "show" with the state of "false". But when I try to return this prop as true when both dates are the same, the prop does not change. (changing it manually with dev tools, the show/hide function works now perfectly fine).
In my index.js file, I created an onChange function when clicking a specific date in the calendar:
const onCalendarChange = (date) => {
setDate(date);
reminders.map((item) => {
const itemDate = item.date
.toLocaleString()
.slice(0, 10)
.replace(/\D/g, "");
const calDate = date.toLocaleDateString().split("/").reverse().join("");
console.log(itemDate === calDate);
if (itemDate === calDate) {
return {
...item,
show: true,
};
}
return item;
});
};
I also tried it with the filter() but this does not seem to work either. The reminders are shown the whole time.
const onCalendarChange = (date) => {
setDate(date);
setReminders(
reminders.filter(
(item) =>
item.date.toLocaleString().slice(0, 10).replace(/\D/g, "") ===
date.toLocaleDateString().split("/").reverse().join("")
)
);
};
1. First code snippet:
The first code snippet may not be working because you forgot to store the new array in a variable and reset reminders on the state using it (which you did correctly in the second code snippet).
So, the first code snippet should be something like this:
const updatedReminders = reminders.map((item) => {
// logic here
});
setReminders(updatedReminders);
2. Second Code Snippet:
Not sure why this isn't working, YET. I'll let you know when I have an update.
In the meantime, see if my suggestion for the first code snippet does the trick?
I was working on a electron-react project for epub file. Right now, I am planning to make the app capable of selecting text field and highlight it.
To achieve it, I was trying to use web's Window.getSelection api. However, there are some really weird things come up like in this.
In short, I am unable to capture the Selection object. It seems like even if I log the Selection object, this object could somehow jump to something else. Also, I cannot even serialize the Selection object with JSON.stringfy. This is super surprising, and this is my first time seeing something like this (I will get empty object to stringfy the Selection object).
So how to use Window.getSelection properly under react-electron environment? Or this api will not work well for text content which is generated by react's dangerouslySetInnerHTML?
Looks like the window.getSelection api needs to toString the selected object.
const getSelectionHandler = () => {
const selection = window.getSelection();
console.log("Got selection", selection.toString());
};
Super simple textarea and button to get selection react demo
this solution might help someone, catch last selection
const selection = useRef('');
const handleSelection = () => {
const text = document.getSelection().toString();
if (text) {
selection.current = text;
}
}
useEffect(() => {
document.addEventListener('selectionchange', handleSelection);
return () => {
document.removeEventListener('selectionchange', handleSelection);
};
});
Has anybody ever used this awesome react components processing server side data?
The solution given here is excellent if you don't need to manually update the data.
I would need to refresh the data not only when changing page/pageSize/sorting/filtering, but also after some intervalled time, to see if data got changed.
Also I have an extension of the table that allows the user to do a full text search on all columns so I would need to update the data when the user changes the content of the custom search box too.
I had the same problem as yours and I started looking for asynchronous tests with ReactJs and I found this article that was very useful. The key part was to use "update" method on the Enzyme component, like below:
const items = ['die Straße', 'die Adresse', 'die Nationalität'];
jest.useFakeTimers();
describe('<DelayedList />', () => {
test('it renders the items with delay', () => {
const component = shallow(
<DelayedList items={items} />
);
jest.runAllTimers();
component.update(); // <--- force re-render of the component
expect(component.state().currentIndex).toEqual(items.length);
expect(component).toMatchSnapshot();
});
For more information, see this medium article.
I downloaded react-native-material-calandarview inside my project.
They just give some piece of code to get calendar.
https://github.com/NuclleaR/react-native-material-calendarview.
I used that inside my render().
selectedDates={this.state.dates}......{this.state.dates} it gives undefined.
I need the selected dates array,but i cant get that.
where i get the selected dates???
Help me ASAP.Thanks in advance
The calendar expose you an event function onDateChange, you have just to setState in this event like that:
<Calendar
selectedDates={this.state.dates}
onDateChange={data => {
// Add the data to your state here
// for example:
this.setState(state => { dates: state.dates.push(data.date) });
}}
/>
I am new to reactJs and trying to implement the below idea -
A data table where data can be filtered by day of the month.
A calendar which will show only days of a month in a row (pagination/tab like view):
Selecting each days will filter the data of the table on the page
Next month can be selected by clicking on the month name appears on the end of the row and data will be filtered accordingly.
what I have tried -
Use a react-bootstrap paginator
Use a data table
I am finding it hard to figure our how can I implement the calendar and connect it as a filter with the data table. BTW, data of the table can be found from any database or some example data.
I hope I made it as clear as possible. Feel free to tell if I need to add something.
You can do 2 several components, for example Filters and Data, first will store your list of possible days, and month, on user select it will call some function, which will change props of the component Data, and in ShouldComponentUpdate of Data you can check was filters changed or no, and sort dates by the filter.
This is good answer with example, how it can be implemented in react, but also it would be more easy to use Redux.
Hope this help.
UPD: Given example:
You can create your calender as empty html. Example of filtering :
ParentComponent
class CalendarContainer extends React.Component {
construnctor(props) {
super(props)
this.state = {
dataObjects = [..],
datefilter = null
}
}
ShouldComponentUpdate(newProps, newState) {
return newState.filter != this.state.filter
}
handeUpdateFilter = (newFilter) => {
this.setState({dateFiter : newFilter});
}
getFilteredDates = () => {
return this.state.dataObjects.filter(x => x.date == this.state.dateFilter);
}
render () {
return (
<Filters filter={this.state.dateFilter}
handeUpdateFilter = {this.chandeUpdateFilter}/>
<DataTable dates={this.getFilteredDates()})
}
}
And in filter component simply call props.handeUpdateFilter(newFilter)