BugiDev / react-native-calendar-strip

Easy to use and visually stunning calendar component for React Native.
MIT License
936 stars 325 forks source link

petition to override highlightdatestyle with customdatesstyle #251

Closed Vasault closed 3 years ago

Vasault commented 3 years ago

basically what the title says, we've been dealing with this for a while now (me and my boss), and we realized it was not possible to override the highlightdatenumber and datename styles, whenever we clicked on a specific day, the highlight will always "replace" the color from the customstyle, would be interesting to see a new prop for the customdatestyle, something like this.

  const customDatesStylesFunc = (date: any) => {
    if (Moment(date).isSame(horaActual, 'days')) {
      // dia actual
      return {
        dateNameStyle: {color: '#3066FA'},
        dateNumberStyle: {color: '#3066FA'},
        -> highlightDateNumberStyle: {color: '#FF33FF'},
        -> highlightDateNameStyle: {color: '#FF33FF'},
      };
    }
    if (Moment(date).isAfter(horaActual, 'days')) {
      // dias posteriores
      return {
        dateNameStyle: {color: '#212B42'},
        dateNumberStyle: {color: '#212B42'},
        -> highlightDateNumberStyle: {color: '#FF33FF'},
        -> highlightDateNameStyle: {color: '#FF33FF'},
      };
    }
    if (Moment(date).isBefore(horaActual, 'days')) {
      // dias previos
      return {
        dateNameStyle: {color: '#8E9CB4'},
        dateNumberStyle: {color: '#8E9CB4'},
        -> highlightDateNumberStyle: {color: '#FF33FF'},
        -> highlightDateNameStyle: {color: '#FF33FF'},
      };
    }
  };
peacechen commented 3 years ago

That would be a useful feature to add. In your example, setting the highlight color the same as the custom color would make it hard for the user to tell which date is selected.

I encourage you to submit a PR that implements this. The code that applies highlight styles is at: https://github.com/BugiDev/react-native-calendar-strip/blob/master/src/CalendarDay.js#L429

That will need to be modified to apply the customDatesStyles values.

Vasault commented 3 years ago

That would be a useful feature to add. In your example, setting the highlight color the same as the custom color would make it hard for the user to tell which date is selected.

I encourage you to submit a PR that implements this. The code that applies highlight styles is at: https://github.com/BugiDev/react-native-calendar-strip/blob/master/src/CalendarDay.js#L429

That will need to be modified to apply the customDatesStyles values.

Sorry my mistake, i changed the highlight color to a single color for each one

peacechen commented 3 years ago

Published in 2.1.2