I'm trying to create events in react-big-calendar by dragging, putting the data in a Tootip form and send a request to server to save it.
Problem after i drag the event the selection disappears: i need it to stay until I submit the event. Right now
it works like this
In the docs/examples they have alert, which of corse stops exection of function and the selection remains the same:
<BigCalendar
selectable
events={events}
defaultView='week'
scrollToTime={new Date(1970, 1, 1, 6)}
defaultDate={new Date(2015, 3, 12)}
onSelectEvent={event => alert(event.title)}
onSelectSlot={(slotInfo) => alert(
`selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
`\nend: ${slotInfo.end.toLocaleString()}`
)}
/>
if i trow and error at the end of onSelectSlot function it stays also open the selection, but then i need to close after I submit.
Use the onSelecting method for dragging a selection this will give you an object with start and end date of the selection { start: Date, end: Date } and make sure to not return false on this method, for more information see the documentation here
Related
I want to have an object slide to the left side of the screen from the right. This is my code:
import rock1 from "src/demos/MyDemo/assets/rock1.png"
import Slide from '#mui/material/Slide';
const Test = () => {
return (
<>
<Slide
direction="left"
in={true}
mountOnEnter unmountOnExit
timeout={4000}
easing={{
enter: "linear",
exit: "linear"
}}
addEndListener={()=>alert("Done")}
>
<img
height={100}
className="Rock" src={rock1}
style={{position:"absolute", left: -100, marginBottom:20}}
/>
</Slide>
</>
);
}
export default Test;
I want to do some stuff when the transition ends, so I've added a placeholder end listener for now. However, the listener triggers when the transition starts and does not trigger again when it ends. Why is it happening at the beginning, not the end, and how can I get it to register correctly?
According to the react-transition-group doc that is referenced by MUI on the Slide API page, addEndListener can be used to add another listener for the transition end and pass a callback.
Live demo for below examples on stackblitz.
Perhaps try below example for addEndListener:
addEndListener={(node, done) =>
// 👇 node is the element being transitioned
node.addEventListener(
// 👇 This event fires at the finish of transition
"transitionend",
(e) => {
// 👇 Do something here
console.log("Actually done");
done(e);
},
false
)
}
However, according to the above sources, it seems that another way to achieve the same result here is by adding a callback to the prop onEntered:
onEntered={() => console.log('onEntered fired')}
Despite the name, onEntered is fired when the transition is complete here, while another prop onExited runs when the exit transition concludes, if applicable. More details can be found in above source links.
Hope this will help.
I am using Ag-grid library for grid view in React app. Following is my Ag-Grid component:
const handleChanged = (gridOptions) => {
const selectedNodes = gridOptions.api.getSelectedNodes()
//TODO
}
<AgGridReact
data-testid="details-data"
columnDefs={DetailsColDef}
rowData={formatDetailsData(
data?.Response,
false
)}
rowSelection="single"
reactNext={true}
defaultColDef={defaultColDef}
onSelectionChanged={handleSelected}
suppressPaginationPanel={true}
domLayout="autoHeight"
suppressMaxRenderedRowRestriction={true}
rowBuffer={5}
suppressColumnVirtualisation={false}
debounceVerticalScrollbar={true}
alwaysShowVerticalScroll={true}
></AgGridReact>
Current Scenario: handleChanged is getting called when we click on Grid row.
Requirement: Need to call handleChanged event every time on multiple click at same time. Currently event is getting called first time only. If we click again on same row, it need's to be called.
You can call gridOptions.api.getSelectedNodes() inside onCellClicked. Every time the row/cell is clicked you will get the data
const onCellClicked = (e) => {
const selectedRows = gridOptions.api.getSelectedNodes();
console.log(selectedRows)
}
<AgGridReact
onCellClicked={onCellClicked}
....
>
</AgGridReact>
Check working example
I think you are trying to use onSelectionChanged out of its scope, if you need to see if a cell is clicked (any number of times, you can use the onCellClicked Event). there are multitudes of events that can be used if that doesn't suit your needs.
https://www.ag-grid.com/react-data-grid/grid-events/#reference-selection
Otherwise if you are going to use this event only one handy way would be to change the selected row at the end of your processing and making this process async. this would be be problematic if the user clicks the row you have chosen to set it to so not the optimal solution i would say.
https://www.ag-grid.com/react-data-grid/row-selection/#node-selection-api
using //https://material-ui-pickers.dev/demo/datepicker
Configured like below. this.state.start_year_date starts at null. Works great when user brings up the modal and selects a date and clicks OK. However, if they bring up modal, and hit cancel, it displays 2019 (!??!?!) after the modal closes. However since they didn't actually choose 2019, state.start_year_date is not set to 2019, it is still null. Things go sideways from there. How can I prevent cancel from doing that?
<DatePicker
value={this.state.start_year_date}
onChange={this.handleStartDateChange}
views={["year"]}
disablePast={true}
label={"Start year"}
onAccept={this.handleStartDateAccept}
maxDate={ this.state.end_year_date ? this.state.end_year_date : (new Date().setYear(2099) ) }
/>
I believe you can use the onClose method to either reset the value to the original value or set it to whatever you like.
<DatePicker
value={this.state.start_year_date}
onChange={this.handleStartDateChange}
views={["year"]}
disablePast={true}
label={"Start year"}
onAccept={this.handleStartDateAccept}
maxDate={ this.state.end_year_date ? this.state.end_year_date : (new Date().setYear(2099) ) }
onClose={ () => this.setState({start_year_date: 2019 }) }
/>
I don't see anything in API for disabling this behavior.
I just want users to have to click on a specific date.
use the prop onSelecting. For example: onSelecting = {slot => false}
I had to get selection for clicked date, without drag.
Used the onSelectSlot with required logic.
onSelectSlot={(e) => {
if (e.slots?.length > 1) return; // or a message
alert("onSelectSlot" + JSON.stringify(e));
}}
Note: this wont handle drag selection styling!!
I've followed a documentation and uploaded a project here.
There are no errors, but events are not displayed. Here's some code:
<BigCalendar
events={events}
startAccessor='startDate'
endAccessor='endDate'
defaultDate={new Date(2017, 11, 1)}
views={allViews}
defaultView='day'
titleAccessor='tttttttt'
components={{
event: Event,
agenda: {
event: EventAgenda
}
}}
/>
Cannot understand what is the problem. According to this answer I added some style, but the result is the same.
A page with the documentation of React Big Calendar is here.
Make sure your event dates match up to the accessors.
When you define a 'startAccessor' and 'endAccessor' it will look at those for the event dates. In the sample data for events big-calendar supplies 'end' and 'start' for the dates.
The default states for start/end Accessors is 'start' and 'end' so if you change to 'startDate' and 'endDate' your event dates need to match that.