trouble updating css for calendar view

[alliances]

HI Im having trouble with updating the calendar view — screenshot attached.
Week view

Our days have meetings every half hour, and they start at 8 am.
They end a 6 pm.

So should be hopefully a way to:

-How can I make the boxes larger so that they show more nicely?
-How can I set the entire frame to start at 8 am?
-How can I remove the all day row?
-How can I expand the overall wrapper box to show all events without scrolling.

Widen the time column.
I want to add background colors, and that’s not hard

[Andras]

Hey alliances,

Thanks for your question.

I can try to help you out here, but please note that customizations are beyond the scope of our support.

How can I make the boxes larger so that they show more nicely?

This is tricky as the layout generation is driven partially by javascript. I will need some time to look into it if it’s possible.

How can I set the entire frame to start at 8 am?

Try this snippet:

https://gist.github.com/andrasguseo/2f54569869dd2e1556af4537e00b34ce

How can I remove the all day row?

This css snippet should do that.

.tribe-grid-allday {
display: none;
}

Alternatively you can create a template override for this file:

wp-content/plugins/events-calendar-pro/src/views/pro/week/loop-grid-allday.php

The override file should be empty.

How can I expand the overall wrapper box to show all events without scrolling

You can use this:

.tribe-week-grid-wrapper.tribe-scroller.has-scrollbar {
height: 660px;
}

Depending on the timeframe you want to show the height needs to be the shown hours times 60px.

If you make the rows higher than 60px then of course you need to multiply that.

Widen the time column

Like this:

.column.tribe-week-grid-hours, .tribe-events-grid .column.first, .tribe-week-grid-hours {
width: 100px;
}
.tribe-grid-content-wrap {
width: 98%;
}

You will need to play around with the values here as the 2nd depends very much on the 1st.

I want to add background colors

Where do you want to add background colors?

If for events then I can recommend The Events Calendar Category Colors.

Cheers,
Andras

[alliances]

Hi Andras
Where do I put that snippet?

. . .

[Andras]

The snippet that is on GitHubGist goes into your theme’s functions.php file.

The css snippets go into the styles.css file or whereever you do css adjustments. (There is also an option to do that under Appearance > Customize > Custom CSS)

A.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts