hoangnm
Selected Date Position.
https://drive.google.com/file/d/1lqqEmuOUd9uyjGTPKPyZ7YgK7XXJ3bvO/view?usp=sharing
when I Select a date from the header and want to show the selected date from the start position, but some dates can't be taken from the start? it may be taken to mid or last. watch the above video
Do you mean the following??
- when you press march-25 --> see dates
march-25 | march-26 | march-27 - when you press march-5 --> see dates
march-5 | march-6 | march-7 - when you press march-24 --> see dates
march-24 | march-25 | march-26
This cannot be done at the moment. The days are rendered by pages, in the previous example a page would be march-25-26-27. This behavior would require re-calculating all the pages to show march-24-25-26.
This is somewhat related to #128, once we improve that, we may be able to improve this
yes I want to like this
- when you press march-25 --> see dates march-25 | march-26 | march-27
- when you press march-5 --> see dates march-5 | march-6 | march-7
- when you press march-24 --> see dates march-24 | march-25 | march-26 any idea how to do like this.
I clone the new app and checkout to feature/185-gotodate-position but still not working. It takes the wrong date position. I want that selected date to show on the left side like as I select 23 then show 23,24,25 etc 24=> 24,24,25 25=>25,26,27 https://user-images.githubusercontent.com/58082294/163953497-e3549af0-7b06-4911-9a4b-1394ee856190.mov
/**
* BarberOne - App
* Created by Abdullah
* Copyright © 2022 BarberOne. All rights reserved.
*/
import React, {useState, useEffect, useRef} from 'react'
import {StyleSheet, View, ImageBackground} from 'react-native'
import moment from 'moment'
import {heightPercentageToDP as hp, widthPercentageToDP as wp} from 'react-native-responsive-screen'
import {connect} from 'react-redux'
import WeekView from 'react-native-week-view'
import axios from 'axios'
import Loader from '../../components/common/Spinner'
import CalendarEvents from '../../components/common/CalendarEvents'
import * as Colors from '../../constants/colors'
import * as Typography from '../../constants/typography'
import {API} from '../../utils/helpers'
import {getHeaders} from '../../utils/helpers'
import ShowAlert from '../../components/common/ShowAlert'
import {async} from 'validate.js'
//salman
const CalendarScreenComponent = (props) => {
// const [myEvents, setMyEvents] = useState(props.event ? props.event : [])
// const [date, setDate] = useState(props.date)
const [timeFomat, setTimeFormat] = useState('')
let myEvents = props.event ? props.event : []
const weekViewRef = useRef()
const [loading, setLoading] = useState(false)
const [breaksEvents, setBreaksEvents] = useState([])
let timeNow = new Date()
useEffect(async () => {
weekViewRef.current?.goToDate(props.date, {left: true})
// weekViewRef.goToDate(props.date, { left: true })
await doFetchBussinessDetail()
upDateWokingHours()
// weekViewRef.goToDate(date)
}, [props.event])
const upDateWokingHours = () => {
let _breaksEvents = []
if (props.days === 3) {
for (let index = 0; index < myEvents.length; index++) {
if (myEvents[index].type && myEvents[index].type == 'workingHours') {
_breaksEvents.push(myEvents[index])
}
}
setBreaksEvents(_breaksEvents)
}
return _breaksEvents
}
const doFetchBussinessDetail = async () => {
const header = await getHeaders(props)
try {
await axios
.get(`${API}/businesses/${props.userData.user.business_id._id}`, header)
.then(function (response) {
setTimeFormat(response.data.time_select)
// setTimeFormat(response.data.time_select)
// setCurrency(response.data.currency)
})
.catch((error) => {
setLoading(false)
alert(error.message)
})
} catch (error) {
alert(error.message)
}
setLoading(false)
}
const doUpdateEventData = async (event, newStartDate, newEndDate) => {
setLoading(true)
const header = await getHeaders(props)
const newDate = {
booked_from_iso: newStartDate,
booked_till_iso: newEndDate
}
try {
await axios
.put(`${API}/appointments/reschedule/${event.id}`, newDate, header)
.then(function (response) {
myEvents = []
setLoading(false)
props.onEventChange(newStartDate)
})
.catch(function (response) {
setLoading(false)
ShowAlert({type: 'error', description: 'Somethings went wrong please try again'})
})
} catch (error) {
alert(error.message)
}
}
const MyEventComponent = ({event, position}) => {
// if (event.type == 'workingHours') {
// return null
// } else {
let title = event.is_blocked == true ? 'Block' : event.description
if (event.type == 'break') {
return (
<ImageBackground source={require('../../assets/icons/screens/background.png')} resizeMode="repeat" style={styles.image}>
<CalendarEvents serviceProviderName={title} startTime={event.startDate} endTime={event.endDate} services={event.services} type={event.type} is_blocked={event.is_blocked} />
</ImageBackground>
)
} else {
return (
<View>
<CalendarEvents serviceProviderName={title} startTime={event.startDate} endTime={event.endDate} services={event.services} type={event.type} is_blocked={event.is_blocked} days={props.days} />
</View>
)
}
}
return (
<>
<Loader visible={loading} />
<WeekView
ref={weekViewRef}
selectedDate={props.date}
showNowLine={true}
prependMostRecent={true}
allowMoveByOneDay={true}
righToLeft={false}
timeStep={60}
// showTitle={false}
events={props.event}
startHour={timeNow.getHours()}
hoursInDisplay={6}
EventComponent={MyEventComponent}
onSwipeNext={(date) => {
props.onSwipeCB(moment(date).format())
}}
onSwipePrev={(date) => props.onSwipeCB(moment(date).format())}
// onSwipeNext={(date) => {
// setMyDate(date)
// }}
// onSwipePrev={(date) => setMyDate(date)}
onEventPress={(data) => {
if (data.is_blocked === true) {
props.onPressBlock(data.id)
} else if (data.type === 'break') {
return
} else if (data.type === 'workingHours') {
return
} else if (data.type === 'timeOff') {
return
} else {
props.onBodyClick(data.id, 'event')
}
}}
style={styles.body}
fixedHorizontally={!props.services}
gridRowStyle={styles.gridStyle}
gridColumnStyle={styles.columStyle}
headerTextStyle={styles.headerText}
hourTextStyle={props.days == 3 ? styles.hourText : styles.hourTextDay}
formatTimeLabel={timeFomat == 12 ? 'h:mm a' : 'HH:mm'}
onGridClick={(pressEvent, startHour, date, noWorkingArry) => {
let time = moment(date).format('hh:mm a')
if (props.days == 1) {
if (myEvents.length > 1 && (moment(time, 'hh:mm a').isBefore(moment(myEvents[0]._endDate, 'hh:mm a')) || moment(time, 'hh:mm a').isAfter(moment(myEvents[1]._startDate, 'hh:mm a')))) {
return false
} else {
props.onBodyClick(moment(date).format(), 'body')
}
} else if (props.days == 3) {
if (breaksEvents.length > 1 && moment(date).format('YYYY:MM:D') == moment(breaksEvents[0].startDate).format('YYYY:MM:D') && (moment(time, 'hh:mm a').isBefore(moment(breaksEvents[0]._endDate, 'hh:mm a')) || moment(time, 'hh:mm a').isAfter(moment(breaksEvents[1]._startDate, 'hh:mm a')))) {
return false
} else if (breaksEvents.length > 2 && moment(date).format('YYYY:MM:D') == moment(breaksEvents[2].startDate).format('YYYY:MM:D') && (moment(time, 'hh:mm a').isBefore(moment(breaksEvents[2]._endDate, 'hh:mm a')) || moment(time, 'hh:mm a').isAfter(moment(breaksEvents[3]._startDate, 'hh:mm a')))) {
return false
} else if (breaksEvents.length > 4 && moment(date).format('YYYY:MM:D') == moment(breaksEvents[4].startDate).format('YYYY:MM:D') && (moment(time, 'hh:mm a').isBefore(moment(breaksEvents[4]._endDate, 'hh:mm a')) || moment(time, 'hh:mm a').isAfter(moment(breaksEvents[5]._startDate, 'hh:mm a')))) {
return false
} else {
props.onBodyClick(moment(date).format(), 'body')
}
}
}}
numberOfDays={props.days}
headerStyle={styles.header}
// onDragEvent={doUpdateEventData}
// prependMostRecent={true}
/>
</>
)
}
const styles = StyleSheet.create({
body: {
backgroundColor: Colors.White,
width: wp('92%'),
height: hp('30%'),
justifyContent: 'center',
alignItems: 'center',
color: Colors.Black
},
gridStyle: {
borderColor: Colors.Black,
backgroundColor: Colors.White
},
columStyle: {
borderColor: Colors.Black,
borderLeftWidth: wp('.1%')
},
header: {
backgroundColor: Colors.White,
borderColor: Colors.Black,
borderTopWidth: wp('.1%'),
borderBottomWidth: wp('.1%')
},
headerText: {
color: Colors.Black,
fontSize: Typography.FONT_SIZE_14,
fontFamily: Typography.FONT_FAMILY_REGULAR
},
hourTextDay: {
color: Colors.Black,
fontFamily: Typography.FONT_FAMILY_REGULAR
// marginTop: wp('11%')
},
hourText: {
color: Colors.Black,
fontFamily: Typography.FONT_FAMILY_REGULAR
// marginTop: wp('11%'),
},
image: {
flex: 1
}
})
const mapStateToProps = (state) => {
return {
userData: state.auth.userData
}
}
export default connect(mapStateToProps)(CalendarScreenComponent)
- When you press the date in the video, what are the new props values? (could you show a console log, or something)
- I think the useEffect hook dependecies may be wrong. I think it should be
[props.date]instead of[props.event]
useEffect should not return a promise, see here: https://www.robinwieruch.de/react-hooks-fetch-data/
I also encountered the same issue. The goToDate function works but the selected date is not moving to first column. Sometimes it goes to last column, sometimes on mid, sometimes on first column. @pdpino
https://user-images.githubusercontent.com/36293831/183694194-fde75f86-136c-4476-a046-8ef062bd65d0.mp4
.
@pdpino there is some problem when we select date smaller than today's date. When we select date greater that today's date, it's working fine. May be, there is some issue in goToIndex function. can you please check that? It must be some minor bug.
@SwikarBhattarai what is the problem for previous dates? could you provide a screenshot or video?
https://user-images.githubusercontent.com/36293831/184528271-3f4e3757-ca0a-4b08-913a-988149182b47.mp4
@pdpino check this video