Calendar and News Feed Tiles

Thanks for the swift update Josh, I now have the calendar working with locale.

1 Like

Nice dashboard! How did you change the font-type for the clock?

Hey @Wet.Blanket Thanks :slightly_smiling_face:

It’s quite simple, first just go to https://fonts.google.com/ and choose a font you like, remember to check on variations of the same font family, then after choosing a font you have a panel in the right with examples ( if you don’t see the panel click on the last icon in the header (*1)) on how to use them, choose the “import” option has this will give you the URL you will need in the next step (*2).

Take the url from the @import() statement and open that in your browser. It should be a series of @font-face declarations that tell your browser where to get the font from. You can then paste that declaration directly into your CSS. You can even trim out the declarations for cyrillic and other formats if all you need is your standard latin characters.

Now, assuming you already have a Theme for your dashboard configured in your account ( if not, just go to your dashboard, click on the 3 dots in the right bottom corner and choose “Configuration” and then you have the option to “Copy Theme”) head over to your resources → Themes and edit the theme you use, go to the “Custom CSS” section and paste this code ( Please note that this is my example ):

/* latin */
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bungee/v11/N0bU2SZBIuF2PU_0DXR1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.time{font-size:9vw!important; font-family: 'Bungee', cursive;}

In my case I used the “Bungee” font with a size of 9vw, remember to adjust size with your needs.

In the CSS selector ( .time{font-size:9vw!important; font-family: ‘Bungee’, cursive;} ) place the name of the font, in this case, replace the ‘Bungee’ for the font you choose.

Edit: Hope you understood and I did not make a mess trying to explain :man_shrugging:

2 Likes

Thanks, @Bruno_Cerqueira! This was my first time adding CSS to a theme. Your instructions worked perfectly. Thanks again!

2 Likes

Hello, my calendar tile always shows me only “nothing in the agenda”, even though some appointments are saved in the calendar. It’s worked well so far. Can anyone help me?

Does your calendar have entries available within the next 7 days?

Yes i have two entries

If they were added just recently (eg. for testing), they might not show up until the next refresh interval.

If they weren’t recently added and they are scheduled within the next 7 days (and they are actually direct entries in that calendar and not ‘shared’ entries), feel free to send a note to support@sharptools.io with more details and I would be happy to take a closer look.

Ok, now i can see it. Thank you @josh sh

1 Like

hi still no option to only display upcoming events, right now most of the tile/space is taken up by todays events, not tomorrow.

Hi @Erlend_Oyen - thanks for posting.

If you’re looking to make a feature request or suggest an enhancement, I would encourage you to check the Feature Requests category if an existing feature request already exists (and cast a vote) or feel free to create a new request. Community feedback and the level of interest from the community is a key part of how we prioritize what to work on.

It looks like you’ve created a feature request here, but it hasn’t picked up many votes yet:

Perhaps adding some more details to your request or sharing some screenshots within your feature request thread demonstrating the issue might help other community members better understand what’s being requested so they would be interested in casting a vote. :slight_smile:

1 Like

Hi Josh. I am thoroughly enjoying creating my own dashboards and have come across an issue with the calendar tile. While all other tiles appear responsive with dimensions and/or tile width in configuration, unfortunately the calendar tile doesn’t. The event size and font remains the same. If I use the Label, it can be increased however the events then overlap the label (shown is 500% increase on a 22 tile wide dashboard with dimensions 4 tiles wide)

The calendar tile needs to be responsive/scalable based dimensions and configuration. I’m also inclined to say the tile may need a setting for number of events (or max events) to be displayed.

ps I also noted my events are centre aligned while your screenshots are left aligned. I did not see an alignment for the dates (I did for the time but that doesn’t change the date alignment)

Cheers

Bump - re incident/issue described previous post

Hi @Darren_Jones thanks for the bump. Check out the following post for the explanation and a workaround.

The Calendar and News Feed tiles intentionally scale with the base tile size dimension – in other words, they use the scaled font-size of a 1x1 tile.

The intention of this was that some people wanted calendar tiles that were extra wide or extra tall as they wanted to show more events and it didn’t make sense to scale the font-size along with that extended dimension.

That being said, the concept of having the Calendar and News Feed tiles aligned with the font size of a 1x1 tile probably made more sense with the non-scalable dashboards as it was more of a fixed font-size.

I’m open to revisiting this, but I think it’s more likely that we might ‘clamp’ a minimum font-size by default… or perhaps expose a setting for the content font size, but that’s something more unique to calendars/news feeds compared to most other tile types so might make more sense as a tile-setting rather than Theme Style setting.

Hm, I’m not sure that was an intentional change, so I’ve noted the feedback.

1 Like

woohoo! That worked! Thanks Josh - much better. This information would be handy at the top of this page. Many thanks