I'm attempting to customize the appearance of appointments on a calendar by assigning each appointment a specific color. I've been trying to add a top border to represent the color, but it's not displaying correctly. Can anyone spot what might be causing this issue?
Here is the JSX code snippet:
<div className={props.start >= moment() ? "appointment" : " appointment disabled"} style={props.color !== null ? {borderTopColor: props.color} :{borderTopColor: '#000'}}>
</div>
Below are the SCSS classes related to appointments:
.appointment{
width:105%;
height:95%;
background-color:$plain-white;
margin-top:3% !important;
margin-left:3%;
border: 4px solid $plain-white;
border-radius: 5px;
padding:5px;
-webkit-box-shadow: 1px 5px 23px -2px rgba(199, 199, 199, 1);
-moz-box-shadow: 1px 5px 23px -2px rgba(199, 199, 199, 1);
box-shadow: 1px 5px 23px -2px rgba(199, 199, 199, 1);
.service{
text-align: center;
font-weight: 700;
}
}
.enable{
cursor: pointer;
border-top-color:#9DBBF5;
}
.disabled{
pointer-events: none;
border-color: $white;
border-top-color: $black;
background-color: $white;
}