-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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
customised timeslot bg color change the hours column as well #1766
Comments
I think it's a bug because when I tried in code pen the exemple from website I get the same problem. But on the example on the website there is not this problem. Which version of big calendar is used on the website ? My code pen : https://codepen.io/gulivertx/pen/gOMpbXy |
I didn't check on the latest version, but I also have this problem. It is because of first time-column is rendered as the other timeslots. (TimeSlotGroup)
I tweaked the code a bit and added an extra property to ignore the first column. But like you said, on the official website it works. Anyone any explanation for this? |
thanks for your answer. I'm very intersted for a temporary workaround even in react-big-calendar source code... |
Nice, thank you! Workaround works until we may solve this issue |
by the way the proptype for isGutter should be bool and not object ;)
|
@Gulivertx , would like to learn how you added the side color bars to the event box? Thanks. |
@YooshAI : I use eventPropsGetter to apply personal styles to the events. Here is my method to modify the border : const reactBigCalendarEventStyle = (event: IBigCalendarItem) => {
let borderColor = this.props.theme.palette.blue;
let borderLeftColor = this.props.theme.palette.neutralTertiary;
let borderLeftSize = 1;
switch (event.type) {
case 'gynecological':
borderColor = this.props.theme.palette.greenLight;
break;
case 'obstetric':
//borderColor = this.props.theme.palette.blue;
borderColor = '#eb75dd';
break;
case 'holidays':
borderColor = this.props.theme.palette.yellow;
break;
case 'representant':
borderColor = this.props.theme.palette.red;
break;
case "blocked":
borderColor = this.props.theme.palette.blue;
break;
}
switch (event.status) {
case 'arrived':
borderLeftColor = '#81ecec';
borderLeftSize = 16;
break;
case 'invoiced':
borderLeftColor = '#ffeaa7';
borderLeftSize = 16;
break;
case 'missed':
borderLeftColor = '#74b9ff';
borderLeftSize = 16;
break;
case 'direct_payment':
borderLeftColor = '#00cec9';
borderLeftSize = 16;
break;
}
const style = {
backgroundColor: this.props.theme.palette.neutralTertiaryAlt,
borderRadius: '0px',
//opacity: opacity,
color: this.props.theme.palette.neutralPrimary,
borderLeft: '8px solid ' + borderColor,
borderTop: '1px solid ' + this.props.theme.palette.neutralTertiary,
borderRight: borderLeftSize + 'px solid ' + borderLeftColor,
borderBottom: '1px solid ' + this.props.theme.palette.neutralTertiary,
//display: 'block'
};
return {
style: style
};
}; |
nice, i used borderLeft also but your implementation is more complete. thanks for sharing. |
@Gulivertx @YooshAI Hey Guys, could anyone pls guide me a little bit to achieve this please? Thank you. |
An easier solution that doesn't require changing the library. Just import a CSS file reachable for your calendar component, with: .rbc-time-gutter > .rbc-timeslot-group > .rbc-time-slot { Have fun! |
@igorturturro nice, thank's ! |
Do you want to request a feature or report a bug?
Hmm not sur if it is a bug or something I'm doing not correctly...
What's the current behavior?
I'm using a customised react-big-calendar where for each timeslot in week and day views I apply a specific background color coming from a user calendar settings. My problem is, when I apply a background color for the first day of the view, the column which show the hours get the same background color. To apply tis background color I used the "slotPropGetter".
Here is my method for the slotPropGetter :
Browser : in all tested, last chrome, firefox, electron...
react-big-calendar version : 0.28.0
What's the expected behavior?
I would like to keep the first column with white background and the the first day and each other will get specific background color by timeslot.
The text was updated successfully, but these errors were encountered: