-
Notifications
You must be signed in to change notification settings - Fork 406
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature] Add color to a range of dates #70
Comments
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';
}; |
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). |
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:
|
You could achieve this using the changes in PR #137 |
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:)
The text was updated successfully, but these errors were encountered: