Using Event Calendar Widget For Company Timeline - Google Site

[Master_Web]

Hi @Max,

I think I can use the Event Calendar Widget to show a company timeline until an official Timeline Widget is developed: Widget for presenting events in progress or in chronological order (timeline) - #53 by Stormy . Below are some tweaks I’d like. Maybe there are a few codes to create my desired final effect?

• Issue description:

1. To show the year, for example, Aug-18-2018, or Aug-2018.
2. Change the color of the event type,“Our Story”, in the screenshots. It seems blue is the only option?
3. Hide the heading, “Past Events”, without using a full stop.
4. Hide “Sorry, no events right now. But really cool stuff is coming up soon”, with using a full-stop
5. Make the blocks much smaller so more can fit vertically and horizontally. Right now it’s fixed with 3 columns.

• Link to the page with the widget in question:

I prefer this format because it’s smaller and give a good horizontal look:

However, this format could be used as well:

Thank you again,
mw

[Max]

Hi there, @Master_Web

1. Right now, it’s impossible to display years, but we have a request for this on the Wishlist - Display also the year

2. You can change the color of the event type in the Event Types setting:

3-4. You can remove these phrases in the Edit Texts section on the Settings tab. It seems that you’ve already tried this option, but changes weren’t saved, that’s why you used dots instead. To save changes, remove all text from the field, press Space Bar on your keyboard and click Done:

5. You can do this using the CSS Code below:

.eapp-events-calendar-grid-item {
width: 200px!important;
}

Let me know if it helped or if you have any questions left

[Master_Web]

Thanks @Max.

I’ll try the code. I’ve upvoted the wishlist request for the year. Not only that, I think I have a workaround for the year.

Thanks again,
mw

[Max]

Great, you’re welcome!

Would it be an option to share your workaround with us? I guess it might be helpful for other users too

[Master_Web]

Sure @Max.

Basically, using the text field to include the full date:

Hope this helps,

Thanks again,
mw

[Max]

Got it, thank you for sharing

[Master_Web]

So @Max,

Is it possible to reduce the size vertically as well?

Thanks again,
mw

[Max]

Sure! Here is the code for changing the height:

.eapp-events-calendar-grid-item-component {
  padding-bottom: 0;
  padding-inline: 10px
}

[Master_Web]

Thanks Max.

I’ll add it to the code for possible future use.

I’m going with this version. It displays better on the site, improves readability, allows photo view, and ability to show buttons. Hope the community finds it useful.

Thanks again,
mw

[Max]

Looks great!

Thanks a bunch for your involvement and sharing your example - that’s exactly what helps our grow

[Master_Web]

Hey Max,

I’ve been trying to find where to turn off showing the day (e.g.m FRI, WED, THU …), and just can’t recall where I initially turned it on.

Can you point me in the right direction?

Thanks again,
mw

[Max]

Hi @Master_Web

You can do this in the Event Elements section on the Layout tab:

[Master_Web]

Thank you so much Max

[Max]

No sweat