0

I am using react-big-calendar inside a table with tbody, tr, and td. When there is data in the calendar month, the react-big-calendar fits on the page and inside the panel. However, as I added events to the calendar, it overlaps over the table, tr, panel. The right side expands and I have to use the horizontal scrollbar to see the far right side.

I also tried the following and it helps make the calendar fit but it is hardcoding the width and I like the calendar to resize with the browser width.

style({height: "100vh", width: "100vh"})

width;"100%" does not work.

Any help is greatly appreciated.

I need it to stay fitted inside the table. 

<table className={myStyle.myTableStyle}>
 <tbody>
   <tr>
    <td width=98% className={myStyle.myPanel}>
      <Calendar 
        className="myCalendar"
        selectable={true}
        localizer={myLocalizer}
        defaultView="month"
        events={myEvents}
        style({height: "100vh"})
        popup={true}
      />
    </td>
   </tr>
 </tbody>
</table>
c0micrage
  • 1,118
  • 2
  • 21
  • 56
  • You need to update your question to include the CSS so someone else can replicate it. Also what is ` – MonteCristo Mar 20 '20 at 21:55
  • 1
    ps: The message you deleted https://stackoverflow.com/questions/65306858/react-javascript-button-property-aria-label-result-in-parsing-error-invalid-left try -> `props["aria-label"] =`.. Hopefully you never deleted because of that spammer.. – Keith Dec 15 '20 at 13:42

1 Answers1

0

added to table styling in css

.tableStyle table-layout: fixed width: 100%

This prevents the table from running off the page

c0micrage
  • 1,118
  • 2
  • 21
  • 56