Solution 1 :

The problem is that percentage units are not based on the actual width of the container (width + paddings + border), just the width. It doesn’t help if the container has box-sizing: border-box;, still it’s children width will be computed by it’s original width. dropping the paddings fix most of the problem since the border is 1px, the calculation is not 100% right but it’s much better
(it can be viewed in the image the 4px missing, 2 from each cell – inside and outside):

enter image description here

(still proportions are saved, and percentage units make sense again… well kinda:)

enter image description here

now the only thing missing is how to still add paddings – maybe contain the normal events in a different container… that another question, still if anyone think of a solution let me know

Problem :

I’m developing a calendar using react.

The calendar grid is a table element, where each cell contain a div holding the month day and it’s events.
Multi day events should spread from the day they start to the day they end.
I achieved this behaviour, and set the width with the calculated percentages so it will be responsive.
The event looks good on the full size screen, but once i start to narrow the window down it doesn’t stay the same. The event that should be all the way to the end of the last day isn’t reaching the end, and finish spreading a few pixels before.

image of the full size desktop screen

narrow window

What is need to be done in order to keep the same look from the full size to all the resolutions?


the event component:

const Event = ({ cellWidth, tableWidth, eventColor, styleClass, 
isTimeShown, onEventClicked, time, title, startDate, endDate, 
weekStarter, isAllDay, isMultiDay, duration }) => {

const eventRef = React.useRef<HTMLDivElement>();
const inlineStyles = isMultiDay || isAllDay ?
{ background: eventColor } :
{ borderLeft: `2px solid ${eventColor}` };
let event = getDefaultEvent({ eventRef, inlineStyles, isTimeShown, 
onEventClicked, time, title, isAllDay, isMultiDay });

event = isMultiDay && cellWidth ? getMultiDayEvent({ cellWidth, event, 
duration }) : event;
return event;

default event:

const getDefaultEvent = ({ eventRef, inlineStyles, isTimeShown, 
onEventClicked, time, title, isAllDay, isMultiDay }) => {
return (
  {, { isMultiDay, isAllDay })}
  onClick={() => onEventClicked(time)}
  {isTimeShown && <div className={style.Time}>{time}</div>}
  <div className={style.Title}>{title}</div>

code that calculate the width based on the event duration and the cellWidth (I added 30 because of the cell paddings which are 15px to each side):

const getMultiDayEvent = ({ cellWidth, event, duration }) 
=> {
const eventWidthByDuration = (((cellWidth + 30) * duration)/cellWidth) 
* 100 + '%';
const inlineStyles = { minWidth: eventWidthByDuration };
event = (
<div style={inlineStyles} className={style.MultiDay}>
return event;

event div css:

 .Event {
 position: relative;
 -st-states: isAllDay, isMultiDay;
 padding-left: 4px;
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 overflow: hidden;
 max-width: 99%;

multi day div which contain the event div css:

.MultiDay {
z-index: 10;


It seems that the percentage width is not based on the actual width of the container ( border + padding + width), it’s based only on the width. Is there a way to achieve size which is responsive to the actual width ?
That way the width calculation could be easier:

const eventWidthByDuration = (duration * 100) + '%';


Comment posted by sandrooco

Please post your html/css code! Otherwise we have no idea why this wouldn’t work.

Comment posted by user0101

Not sure if width is the right way to go – what if event spans into two rows? Either way, share your code as you might have mismatched percentage values with px or rems (?)

Comment posted by Vladimir Rodichev

.code put here.

Comment posted by Itay Tur

@user0101 event can’t be more than 1 row. it’s percentage, I see it when i inspect it. i just don’t understand if the width in percentage look in a certain way on one size why would it look different on other size.