# Adjusting Calendar Size in Desktop

**URL:** https://meta.discourse.org/t/adjusting-calendar-size-in-desktop/348571
**Category:** Development
**Tags:** events, css
**Created:** [January 23, 2025, 10:13am UTC](https://meta.discourse.org/t/adjusting-calendar-size-in-desktop/348571 "2025-01-23T10:13:13Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Ethsim2](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ethsim2/32/522255_2.png) [@Ethsim2](https://meta.discourse.org/u/Ethsim2)
#### Post date: [January 23, 2025, 10:13am UTC](https://meta.discourse.org/t/adjusting-calendar-size-in-desktop/348571/1 "2025-01-23T10:13:13Z")

</div>

> [@Discourse Calendar - How to?](https://meta.discourse.org/t/discourse-calendar-how-to/165536/17):
>
> Well as far as I have observed haven’t seen a Calender companion TC. You might though be able to create a custom #Customization > Theme component using inspect element in your browser to identify and adjust the calender size in Desktop. Just be sure to put it in the Desktop CSS header

I was inspecting inside the `html` class containing `desktop-view not-mobile-device`, to reduce the calendar size on desktop, and have found where the CSS might need to be changed to achieve this task.

the class `fc-month view` appears to be the calendar widget we’re interested in, and i was able to resize it locally and relatively, using CSS, through the `fc-view-container` class. However, i was only able to scale the width, not the height or overall size.

Has anyone else encountered this issue, when trying to modify locally?

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [January 23, 2025, 3:18pm UTC](https://meta.discourse.org/t/adjusting-calendar-size-in-desktop/348571/2 "2025-01-23T15:18:02Z")

</div>

![CleanShot 2025-01-23 at 10.17.02@2x](https://global.discourse-cdn.com/meta/original/4X/e/c/a/eca11e4ce013ef5d11aaf02797e207c2bba3d539.png)

You should be able to change the height using the `.calendar.fc` element.

---

<div class="post-metadata">

### Author: ![Ethsim2](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ethsim2/32/522255_2.png) [@Ethsim2](https://meta.discourse.org/u/Ethsim2)
#### Post date: [January 23, 2025, 3:45pm UTC](https://meta.discourse.org/t/adjusting-calendar-size-in-desktop/348571/3 "2025-01-23T15:45:09Z")

</div>

Ah, but unfortunately you’ve pictured the per topic calendar, and not the category one

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [January 23, 2025, 4:50pm UTC](https://meta.discourse.org/t/adjusting-calendar-size-in-desktop/348571/4 "2025-01-23T16:50:47Z")

</div>

Same element is shown on the category view. You may need a bit more CSS though:

 ![CleanShot 2025-01-23 at 11.49.57@2x](https://global.discourse-cdn.com/meta/original/4X/9/c/0/9c0ffe94edc8d34ff1f9553eea9b30c76fbb179c.png)

```css
#main-outlet .calendar.fc.fc-unthemed {
  height: 200px;
  overflow-y: scroll;
}

```