How to remove scrollbars in the week view and fit to the container

[andrelung]

Version

• TOAST UI Calendar 2nd Edition
• @Version 2.1.1 | Wed Aug 03 2022

Test Environment

Chrome Version 104.0.5112.79 (arm64)
macOS Monterey Version 12.4 (21F79)

Expected Behavior

I'd love to remove the scroll bars from within the calendar. My setup needs to show the whole calendar, so I set the following weekOptions:

• hourStart: 0,
• hourEnd: 24,

I expect the following setTheme-command to reduce the calendar-height:

  cal.setTheme({
    common: {
      gridSelection: {
        backgroundColor: "rgba(81, 230, 92, 0.05)", // change color of transparency selection (just to check if this is generally working)
        border: "1px dotted #515ce6",
      },
    },
    week: { // <= these settings have no effect on the week or day view
      timegridOneHour: {
        height: "12px",
      },
      // timegridHalfHour: {
      //   height: "6px",
      // },
      dayGridSchedule: {
        height: "6px",
      },
    },
    // "week.timegridOneHour.height": "10px", // << also no effect
    // "week.timegridHalfHour.height": "5px" // << neither combined, nor in single use
  });

I also tried setting the options with only number values. No effect either

Current Behavior

I can't figure out any change when settings these options. If these are the wrong settings, I'd love to get a nudge how to remove in-container-scrollbars (make the calendar fit it's container).

[adhrinae]

@andrelung

Reason

You're trying to use the v1's theme, which significantly differs from the current version.

https://github.com/nhn/tui.calendar/blob/main/docs/en/apis/theme.md#week-theme

You can override CSS styles for your own use case, but we fixed the unit of the height of each row in the time grid as percentage(%) values.

Solution

You can open the browser's devtools and find which element creates the scrollbar then override the stylesheet. That's what we intended, however, I'll leave the solution for documentation.

First, Let's override the min-height of the time grid panel.

.toastui-calendar-timegrid {
  height: 100%;
  /* fit-content or auto(IE) */
  min-height: fit-content;
}

But It still has a tiny scrollbar as well as other areas(we call them panels).

We intended that every panel should be aligned with the time grid having the scrollbar by default.

But you're removing scrollbars so it doesn't have to right now.

/* Declared class twice to increase the specificity. */
/* You can use the `!important` but not recommended */
.toastui-calendar-panel:not(.toastui-calendar-time).toastui-calendar-panel:not(.toastui-calendar-time) {
  overflow-y: hidden;
}

.toastui-calendar-panel.toastui-calendar-panel {
  overflow-y: hidden;
}

Now you can see the calendar without scrollbars.
Check out this working example.

[andrelung]

Awesome, that worked. Thank you very much!

[adhrinae]

Moved to the discussion in order to expose others who have a similar use case.