CSS code to prevent Calendar Scrolling

Etienne

Hi all,

I wanted my calendar in Pipedrive to be stuck around my working hours, no need to see 0-7AM or 6-12PM, and i found a (dirty) way to achieve it with CSS, please see bellow :

/* Adjust height to hide the last hours of the day */

._calendar__calendar___u_P4k {
height: 300%; /* Expands the container to prevent scrolling */
}

/* Shift up the calendar grid to hide the first hours of the day /
._calendar__grid___Kk0V0 {
margin-top: -368px; / Moves the grid upwards */
}

/* Ensure the header stays on top /
._header__header___qemWb {
position: relative; / Ensure it's positioned relative to the parent /
z-index: 1000; / Higher z-index to stay above other elements /
background-color: white; / Optional: to make sure it's not transparent */
}

/* Ensure the all-day section stays on top /
._grid-allday__calendarAllday___my5HZ {
position: relative; / Ensure it's positioned relative to the parent /
z-index: 1000; / Higher z-index to stay above other elements /
background-color: white; / Optional: to prevent overlap transparency */
}

I'm sure there would be a more elegant way to achieve but that's what I have found so far.

You will probably need to adjust height: 300% and margin-top: -368px to your screen but here is how it can look :

Jonathan Gennick

Interesting! Where do you place the CSS?

Etienne

I use a browser extension called Stylus that allows you to inject CSS and theme websites. I also know Stylish and Stylebot.

Etienne

Also to quickly hide elements i don't need, I use the browser extension "Click To Remove Element".

Jonathan Gennick

Thank you @Etienne, because I have been interested in something like that. Good to know, and I will check it out sometime.