Comments (6)
hi @naimgarzuzi sorry for the delay, could you please share a piece of code to reproduce this
from react-appointment-picker.
Hi @roggervalf ,
This is my code, I'm new in React so there might be some simple code.
But basicly the code is working fine, but the isSelected not worked for me.
Also the code file attached as TXT file
Thanks in advance.
`import { useEffect, useState, useContext } from 'react';
import { AppointmentPicker } from 'react-appointment-picker';
import { DatePickerCalendar } from 'react-nice-dates'
import 'react-nice-dates/build/style.css'
import './Appointments.css'
import { Container, Row, Col } from 'react-bootstrap'
import { getDay } from 'date-fns';
import AppointmentContext from '../Context/AppointmentContext';
function AppointmentsComp() {
const [lodaing, setLoading] = useState(false);
const [date, setDate] = useState(new Date(new Date().setHours(8, 0, 0, 0)));
const [days, setDays] = useState([[]]);
const modifiers = {
disabled: date => getDay(date) === 0 || getDay(date) === 6, // Disables Saturdays
}
const postContext = useContext(AppointmentContext)
const { error, appointments, getAppointments, removeAppointment, addAppointment } = postContext
useEffect(() => {
if (date != null) {
console.log("getting appointments")
setDays([
[
{
"id": 1,
"number": 1
},
{
"id": 2,
"number": 2,
"isReserved": true
},
{
"id": 3,
"number": 3,
"isSelected": true
},
{
"id": 4,
"number": 4
},
{
"id": 5,
"number": 5
},
{
"id": 6,
"number": 6
},
{
"id": 7,
"number": 7
},
{
"id": 8,
"number": 8
},
{
"id": 9,
"number": 9
},
{
"id": 10,
"number": 10
},
{
"id": 11,
"number": 11
},
{
"id": 12,
"number": 12
},
{
"id": 13,
"number": 13
}
]
])
}
}, [date])
// useEffect(() => {
// console.log(appointments)
// if (appointments.length > 0) {
// setDays(appointments)
// }
// }, [appointments])
async function addAppointmentCallbackContinuousCase({
addedAppointment: { day, number, time, id },
addCb,
removedAppointment: params,
removeCb
}) {
setLoading(true)
if (removeCb) {
await removeAppointment({ params });
console.log(
Removed appointment ${params.number}, day ${params.day}, time ${params.time}, id ${params.id}
);
removeCb(params.day, params.number);
}
await addAppointment({ id, number, day, time });
console.log(error)
if (!error) {
console.log(
`Added appointment ${number}, day ${day}, time ${time}, id ${id}`
);
addCb(day, number, time, id);
}
setLoading(false)
};
async function removeAppointmentCallbackContinuousCase(
{ day, number, time, id },
removeCb
) {
setLoading(true)
let params = { id, number, day, time }
await removeAppointment({ params });
console.log(
Removed appointment ${number}, day ${day}, time ${time}, id ${id}
);
removeCb(day, number);
setLoading(false)
};
return (
);
}
export default AppointmentsComp;
Appointments.txt
`
from react-appointment-picker.
@naimgarzuzi, could you please set it in https://codesandbox.io/, would be easier to take a look
from react-appointment-picker.
@naimgarzuzi, could you please set it in https://codesandbox.io/, would be easier to take a look
@roggervalf , you have edit permission
https://codesandbox.io/s/naughty-frog-sqw1y?file=/src/App.js
from react-appointment-picker.
Nice, I was playing around and it works when dates is not set by setDays, if you just declare the dates variables and just pass it into the react-appointment-picker, it should work
from react-appointment-picker.
I know that changing variable must be with use state, So I declared the setDays for changing the value of the days
Could you please change it in the sandbox to make it work?
I'll take a look after that to see how to do it without changing the state.
Thanks in advance.
from react-appointment-picker.
Related Issues (11)
- Is rendering of custom element possible? HOT 1
- Does not contain a default export (imported as 'AppointmentPicker'). HOT 1
- Update peer dependencies to support react 18
- Unused `unitTime` prop HOT 1
- İf i change ip picker initial 12 Am
- Change time and date format HOT 1
- How do we set the initial delay in time slots for each day?
- One exclusive appointment HOT 2
- How can i start the schedule earlier than 9AM? HOT 4
- Displaying time in GMT instead of local timezone on IOS device HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 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.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
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.
from react-appointment-picker.