[Feature] Add color to a range of dates

[sbaha88]

Hi,

Would it be possible to add a feature that would add colors (like selected date) to dates given in an array? (I am working on an app where I would like to show dates where an event has occured or hasn't).

ps, your calendar is really awesome:)

[Niels-P]

For people who try to do this:

Insert this prop in the Infinite Calendar

theme={{
       selectionColor: date => {
               return decideColor(date)
       },
});

And add a function to your component.

const decideColor = (selectedDate) => {
    for(let i = 0; i < this.state.selectDates.length; i++) {
        let dateOne = new Date(this.state.selectDates[i]).getDate() + "-" + new Date(this.state.selectDates[i]).getMonth() + "-" + new Date(this.state.selectDates[i]).getYear();
        let dateTwo = new Date(selectedDate).getDate() + "-" + new Date(selectedDate).getMonth() + "-" + new Date(selectedDate).getYear();
        if(dateOne === dateTwo) {
            return 'blue';
        }
    }
    for(let i = 0; i < this.state.dates_available.length; i++) {
        if(new Date(this.state.dates_available[i].split(' ')[0]).valueOf() === new Date(selectedDate).valueOf()) {
            return 'green';
        }
    }
    for(let i = 0; i < this.state.dates_unavailable.length; i++) {
        if(new Date(this.state.dates_unavailable[i].split(' ')[0]).valueOf() === new Date(selectedDate).valueOf()) {
            return 'red';
        }
    }
    for(let i = 0; i < this.state.dates_planned.length; i++) {
        if(new Date(this.state.dates_planned[i].split(' ')[0]).valueOf() === new Date(selectedDate).valueOf()) {
            return 'grey';
        }
    }
    for(let i = 0; i < this.state.dates_maybe.length; i++) {
        if(new Date(this.state.dates_maybe[i].split(' ')[0]).valueOf() === new Date(selectedDate).valueOf()) {
            return 'blue';
        }
    }
    return 'black';
};

[wmertens]

I would like to go a step further, and have support for defined ranges, that each can get a color or something, and that get passed to functions that decide what to do about the day (so if you render/click/hover over a day, callbacks get an array of matching ranges).

[cedricdelpoux]

I'm looking for the same feature. Seeing fast if a date has an event attach to it.

And more it could be awesome to customize the color:

const colorsRange = generateColorsRange({
      colors: [theme.palette.gray, theme.palette.primary],
      min: 0,
      max: distanceMaxForOneDay,
    })
...
<InfiniteCalendar transformDayElement={(element, date) => {
  const distance = values[date] ? values[date].distance : 0
  return React.cloneElement(element, {
    style: {
      fill: getColorFromRange(colorsRange, distance),
    },
  })
}} />

[sators]

You could achieve this using the changes in PR #137