I'm using this setup for react big calendar:
render() {
return (
<div>
<BigCalendar
selectable
step={3}
timeslots={10}
events={eventsE}
defaultView='week'
onSelectEvent={event => this.onSelectEventDate(event)}
onSelectSlot={(slotInfo) => this.onSelectSlotDate(slotInfo) }
/>
</div>
);
I'm using this plugin http://intljusticemission.github.io/react-big-calendar/examples/index.html
But the start time is always at 12AM
How can i change to start only at 8AM...and do not waste time slots.
Thanks in advance
Carlos Vieira
You have to set today date in state and after use.
// For react-big-calendar: "^0.27.0",
// declare 'today' inside your component
const today = new Date();
// start time 8:00am
min={
new Date(
today.getFullYear(),
today.getMonth(),
today.getDate(),
8
)
}
// end time 5:00pm
max={
new Date(
today.getFullYear(),
today.getMonth(),
today.getDate(),
17
)
}
You need to set the 'date' prop to your request date:
render() {
return (
<div>
<BigCalendar
selectable
step={3}
date={new Date(Date.now())}
timeslots={10}
events={eventsE}
defaultView='week'
onSelectEvent={event => this.onSelectEventDate(event)}
onSelectSlot={(slotInfo) => this.onSelectSlotDate(slotInfo) }
/>
</div>
);
anther prop you can use is 'defaultDate'.
Related
I'm using react-datepicker, and I'm unable to get the actual date in onChange.
This is my component :
import DatePicker from "react-datepicker";
const DatePick = () => {
return (
<DatePicker
locale="fr"
dateFormat="dd/MM/yyyy"
onChange={(date) => {
console.log(date);
}}
/>
);
};
export default DatePick;
In console.log I'm getting this kind of string Thu Dec 09 2021 00:00:00 GMT+0100 (heure normale d’Europe centrale).
I need to get the date as dd-MM-yyyy in onChange or a date that I can format and use later in a form and submit its value.
Use Below code , it will work like a charm
const [Cdate, setDate] = useState(new Date().toLocaleDateString('fr-FR'));
return (
<>
<DatePicker
dateFormat="dd/MM/yyyy"
value={Cdate}
onChange={(date) => {
const d = new Date(date).toLocaleDateString('fr-FR');
console.log(d);
setDate(d);
}}
/>
</>
);
stackblitz link: https://stackblitz.com/edit/react-nov8it?file=src/App.js
You can use the Date object, to format the date as you would like. For instance :
onChange={(date) => {
const dateString = new Date(date).toLocaleDateString()
console.log(dateString)
}}
You will then get the date formated to your locale time zone. However, if you specified a different format in your DatePicker from your local timezone format, then you can specify it as a parameter for toLocaleDateString:
new Date(date).toLocaleDateString("fr-FR")
I'm using Reactjs, the database I'm using is firestore, and I'm using moments.js
Problem:
My state is "half" working. When I call it from state.availability inside a function, it will return it's initial state and not the data I loaded into it. However, when I call state.availability from the render, it works and shows the loaded data.
Expected Results:
When in a function, state.availability should be returning the data I loaded into it.
Actual Results:
It returns it's initial data.
I am getting data from my database that contains employee availability. This is called when the page loads using "useEffect":
const LoadEmployeeData = async () => {
await props.firestore
.collection("employeeData")
.where("userID", "==", props.searchID)
.get()
.then(function (e) {
setState({
availability: [
[
e.docs[0].data().availability.availability.sun[0],
e.docs[0].data().availability.availability.sun[1],
],
[
e.docs[0].data().availability.availability.mon[0],
e.docs[0].data().availability.availability.mon[1],
],
[
e.docs[0].data().availability.availability.tue[0],
e.docs[0].data().availability.availability.tue[1],
],
[
e.docs[0].data().availability.availability.wed[0],
e.docs[0].data().availability.availability.wed[1],
],
[
e.docs[0].data().availability.availability.thu[0],
e.docs[0].data().availability.availability.thu[1],
],
[
e.docs[0].data().availability.availability.fri[0],
e.docs[0].data().availability.availability.fri[1],
],
[
e.docs[0].data().availability.availability.sat[0],
e.docs[0].data().availability.availability.sat[1],
],
],
});
});
};
This is what the database looks like:
I'm using a calendar component I wrote to select the date. When a date on the calendar is selected, I run a function for getting the day of the week and then returning a set of divs representing days available (note: the code for this is still very early):
// Gets the date Avaliable
const LoadDay = async (d) => {
var tempdaySlot = [];
var day = moment().year(d.year).month(d.month).date(d.day).day();
setState({
datePicked: moment().year(d.year).month(d.month).date(d.day).day(),
});
for (
var i = state.availability[day][0];
i < state.availability[day][1];
i++
) {
tempdaySlot.push(<div style={LocalStyles.daySlot}></div>);
}
setState({ daySlot: tempdaySlot });
};
d is just an object from the calendar ex: {day:1,month:6,year:1982}. My issue is that state.availability always returns its initial values ([1,24]) and not the values within my database. Initially I thought my data wasn't being filled into the state, however I decided to have the data rendered out on the page and the appropriate values are there:
return (
<div>
<Calender language={props.language} ReturnDay={(d) => LoadDay(d)} />
{state.datePicked !== null ? (
<div>
{props.language.Calender.Days[state.datePicked]}
<p />
{state.availability[state.datePicked][0]} -{" "}
{state.availability[state.datePicked][1]}
<p />
<Grid
container
direction="row"
justify="flex-start"
alignItems="center"
>
{state.daySlot}
</Grid>
</div>
) : null}
</div>
);
Lastly, I have placed "console.log"s through out my code. I had them after the state was being set, and in my GetDate function and everytime the state.availability returned it's initial values.
I figured it was my Calendar component that was causing the issue. I decided to have the "ReturnDay" set a day picked state instead of calling a function directly. Then I have the function run outside of that when the state is changed.
return (
<div>
<Calender
language={props.language}
ReturnDay={(d) => setState({ datePicked: d })}
/>
{state.datePicked !== null ? <RenderDay /> : null}
</div>
);
RenderDay basically is my LoadDay function with an added return part. This solved my issue.
const RenderDay = () => {
var day = moment()
.year(state.datePicked.year)
.month(state.datePicked.month)
.date(state.datePicked.day)
.day();
var tempdaySlot = [];
for (
var i = state.availability[day][0];
i <= state.availability[day][1];
i++
) {
tempdaySlot.push(<div style={LocalStyles.daySlot}>{i}</div>);
}
return (
<div>
{state.datePicked.day} - {state.datePicked.month} -{" "}
{state.datePicked.year}
<p />
{props.language.Calender.Days[day]} <p />
<Grid
container
direction="row"
justify="flex-start"
alignItems="center"
>
{tempdaySlot}
</Grid>
</div>
);
};
enter image description here
i want don't move calendar month so use this code
const FullCalendar = (props) => {
const { calendarInfos, height, dateInfo } = props
const { selectDate } = dateInfo
const localizer = momentLocalizer(moment);
return (
<>
<CalendarCss />
<Calendar
toolbar={false}
popup={false}
localizer={localizer}
culture='ko'
views={['month']}
events={calendarInfos}
defaultDate={new Date(moment(selectDate))}
startAccessor="start"
endAccessor="end"
onRangeChange={(e)=>{console.log(e)}}
style={{
height: height + 'px',
width: '100%',
}}
components={
{
event: (e) =>
(
<FullCalendarEvent
event={e}
/>
)
,
}
}
/>
</>
);
};
but there is an error in this code.
enter image description here
how to use react-big-calendar option onRangeChange
According to the documentation, it depends on the view (sorta).
const onRangChange = (Range: [Date]) => do something
// or, the more likely
const onRangChange = ({start: Date, end: Date}) => do something
Supposed to use the second type for all builtin views, so unsure when that first type would qualify...
If you're trying to restrict it from moving month to month, better option is to use the controlled date prop and do some check to determine wether you set it or not.
I am using react-datepicker module in my website. I want to disable the dates after 2 weeks. for example, today date is : 20-02-2019, so i want to disable dates after 5 march 2019.
How can i do that?
You can give a date that is 13 days into the future to the maxDate prop.
Example (CodeSandbox)
class App extends React.Component {
state = {
startDate: new Date()
};
handleChange = date => {
this.setState({
startDate: date
});
};
render() {
const twoWeeksFromNow = new Date();
twoWeeksFromNow.setDate(twoWeeksFromNow.getDate() + 13);
return (
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
maxDate={twoWeeksFromNow}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
You can add maxDate attribute to your datepicker code.
maxDate={addDays(new Date(), 13)}
The react-datepicker component you are using, already has includeDates parameter.
() => {
const [startDate, setStartDate] = useState(null);
return (
<DatePicker
selected={startDate}
onChange={date => setStartDate(date)}
includeDates={[new Date(), addDays(new Date(), 1)]}
placeholderText="This only includes today and tomorrow"
/>
);
};
This above code is for showing only today and tomorrow. If you want to show dates for two weeks, simply add the list of days in array (line 7).
Link for that particular section https://reactdatepicker.com/#example-include-dates
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 just selected datesSelection={'range'}, but I dont know where I get the selected dates. If datesSelection={'single'} it return date in
onDateChange={data => {
console.log(data.date);//date selected
}}
More code:
render() {
return (
<Calendar
width={(Dimensions.get('window').width)-32}
height={280}
tileHeight={35}
style={{alignSelf: 'center'}}
topbarVisible={true}
datesSelection={'range'}
firstDayOfWeek="monday"
showOtherDates="none"
currentDate={this.state.today}
selectedDates={this.state.dates}
eventsDates={[]}
eventsColor="#9C27B0"
onDateChange={data => {
//alert(sel_date);
console.log(this.state.data);
}}
onMonthChange={month => {
//alert(month)
console.log(month);
}}
/>
);
}
So the onChange will show you the date the user selects it's up to you to make a function to store these in redux/local state. Same for a range the onChange will return you that range in the argument you're passing to it
So what you can do is
In HTML:
onDateChange={this.onChange}
Component method:
onChange = (date) => { this.setState({ selectedDate: date }) };