Downsize Calendar Block

Custom Coding
1

Hi,

The Calendar Block is very well made, the only thing I’m struggling with is that it’s so big. I would like to downsize it. Any custom code that can do this?

2

In the header code of the page settings. Play with 0.8. The best downsize should be 0.9, IMO.
You may need to play with the padding top and bottom in the style settings of the block (inside block settings).
Use transform-origin: top; if the downsize gives to much space on top of the block (it can happen)

<style>
#calendar1 {
  transform: scale(0.8);
  transform-origin: top;
}
</style>
3

Thanks, I really need to pic up my basic coding skills :sweat_smile:

4

Or use this one, your choice. I had some problem to adjust margin top AND bottom at the same time with transform-origin (which is normal).
With this code where I separate everyhting to be customized, it seems a bit better. You will still need to adjust padding top and bottom with the block style settings (best is to reduce to the maximum)

<style>
#calendar1 {
  transform: scale(0.8);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
</style>
2 Likes
5

This works great, but leaves white space around the block (my app has a dark background). I’ve tried to play with the code, but no luck. Any tips?

P.S. I know a new calendar block is coming, but would appreciate a quick fix for now if possible!

6

Hi James,

Would this work better for you?

<style>
#calendar1 .filter-container {
    transform: scale(0.8);
    transform-origin: top;
  }
  
</style>
1 Like
7

You, sir, are a true champion.

Do you happen to know the names of the other parts of the calendar? I’d love to wrap the text within the boxes, as most of the item name disappears. Or, if you can direct me where to find them, I’ll find it myself.

If not, I am still super happy with your response already!

8

I think it should be

class=“toastui-calendar-template-time”

Meaning, in a code => .toastui-calendar-template-time or #calendar1 .toastui-calendar-template-time

Capture d'écran 2024-03-31 233312
Capture d'écran 2024-03-31 2333121777×787 67 KB

It can also be one of the elements containing it, as:

.toastui-calendar-weekday-events

.toastui-calendar-weekday-event-block

.toastui-calendar-weekday-event

.toastui-calendar-weekday-event-title

The calendar block is hard to customize, a lot of elements inside elements, inside other elements etc.(which is normal for any dynamic calendar)