startingDate prop does not center the date.
See original GitHub issueAccording to the documentation, the startingDate prop should center the assigned date; however, my implementation is not working. I thought the view container which it is called in might be inadvertently passing on styles. I test this out by passing in different values to alignItems, alignContents, and justifyContent, but this does not seem to be the culprit.
Here is my implementation:
import React from 'react'
import CalendarStrip from 'react-native-calendar-strip'
import { StyleSheet } from 'react-native'
const HorizontalCalendar = () => {
return (
<CalendarStrip
scrollable
style={styles.calendarStyle}
calendarColor={'transparent'}
iconContainer={{flex: 0.002,}}
startingDate={new Date()}
selectedDate={new Date()}
rightSelector={[]}
leftSelector={[]}
dayContainerStyle={{}}
dateNumberStyle={styles.calendarDateNumber}
highlightDateNumberStyle={styles.calendarHighlightDateNumber}
dateNameStyle={styles.calendarDateName}
highlightDateNameStyle={styles.calendarHighlightDateName}
highlightDateContainerStyle={styles.calendarHighlightDateContainer}
calendarHeaderStyle={styles.calendarHeader}
calendarHeaderPosition='below'
calendarHeaderFormat='MMMM'
/>
)
}
export default HorizontalCalendar
const styles = StyleSheet.create({
calendarStyle: {
height: '20%',
paddingBottom: 10,
},
calendarDateNumber: {
color: '#4B4046',
fontSize: 18,
fontWeight: '400',
},
calendarHighlightDateNumber: {
color: '#FDFCFD',
fontSize: 18,
fontWeight: '700',
},
calendarDateName: {
color: '#8E7C87',
fontSize: 12,
fontWeight: '400',
},
calendarHighlightDateName: {
color: '#FDFCFD',
fontSize: 12,
fontWeight: '400',
},
calendarHighlightDateContainer: {
backgroundColor: '#C11277',
borderRadius: 8,
},
calendarHeader: {
color: '#8E7C87',
fontSize: 16,
fontWeight: '700',
},
})
This is the rendered view:
Issue Analytics
- State:
- Created a year ago
- Comments:7
Top Results From Across the Web
Setting the default startDate and endDate properties for react ...
I was able to follow the docs and got it to work. ... import { DateRangePicker } from "react-dates"; import moment from "moment";...
Read more >Developers - startingDate prop does not center the date. -
According to the documentation, the startingDate prop should center the assigned date; however, my implementation is not working.
Read more >BugiDev/react-native-calendar-strip - GitHub
startingDate, Date to be used for centering the calendar/showing the week based on that date. It is internally wrapped by moment so it...
Read more >React-Calendar: Build and customize a simple calendar
After enabling this prop, React-Calendar returns an array with two dates: the start date and end date. The selected range is highlighted to...
Read more >Set report date ranges - Looker Studio Help - Google Support
The 2 ways of controlling the timeframe in your reports are: Setting the date range property for one or more components, the current....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Centering the selected date isn’t a feature. The documentation that mentions “centering” is for the week, not a specific day. Please submit a PR if you’d like to add a prop for that.
One way to implement this in your app is to set
useIsoWeekday={false}
, then set thestartingDate
prop offset to the date needed to centerselectedDate
. In your example with selectedDate set to Wed, the startingDate should be Sun.Yes the documentation could use improvement. PRs are welcome for anything including documentation 😄
Hope you were able to get the centering working.