question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

startingDate prop does not center the date.

See original GitHub issue

According 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: Simulator Screen Shot - React Simulator - 2022-04-06 at 18 44 31

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:7

github_iconTop GitHub Comments

1reaction
peacechencommented, May 13, 2022

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 the startingDate prop offset to the date needed to center selectedDate. In your example with selectedDate set to Wed, the startingDate should be Sun.

0reactions
peacechencommented, May 13, 2022

Yes the documentation could use improvement. PRs are welcome for anything including documentation 😄

Hope you were able to get the centering working.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found