Calendar Heading Changes

[ooom416354]

A buddy of mine had a request and we are wondering if there’s a way to do this

Currently, the calendar module has an entry in the config which displays a text heading (default “Calendar”) above the actual events and dates.

His mirror is set up to pull 5 different calendars but has color coding to indicate whos calendar is whos, an example being his wife is pink, his is blue etc.
He wanted to add somewhat of a “legend” under the heading of the calendar with each persons name and color of their calendar entries, that way you would know which color you are and which events belong to you.

Is that possible to do? I would assume it would require an entry in the config.js file but I don’t know if that would do anything as the calendar.js file doesn’t have anything to indicate colors of the value. I don’t think anything in the custom.css file would help either.

Any ideas?

[strawberry 3.141]

@ooom416354

{
  module: "calendar",
  position: "top_right",
  header: "Johns Stuff",
  config: {
    ...
  }
},
{
  module: "calendar",
  position: "top_right",
  header: "Janes Stuff",
  config: {
    ...
  }
},

[ooom416354]

@strawberry-3.141 this is what I initially proposed as well but wouldn’t that just list each calendar separately?

He wanted to combine all calendars into one list of dates but have a custom heading instead of just the default “Calendar”

Like in your example he wants to see
Janes_Stuff in pink
Johns_Stuff in blue,
Then both Jane and John’s calendar entries combined as one calendar below

[onetwankyfive]

This post is deleted!

[onetwankyfive]

couldn’t you use different font awesome symbols when you put the calendar in the config

[ooom416354]

@onetwankyfive I could but the idea is having some sort of legend as well. So you have the color coded symbols next to the events in the list but there is no way to tell who’s color is who’s (and with a bunch of really little kids, color is important)

[broberg]

@ooom416354 if all names will be listed over ONE combined calendar you could just add it as static text.

[ooom416354]

@broberg said in Calendar Heading Changes:

@ooom416354 if all names will be listed over ONE combined calendar you could just add it as static text.

Yep exactly, that would be the idea. Where would that static text be added, would it be in the config.js or would I have to create something for the custom.css?

[strawberry 3.141]

@ooom416354 you could use the helloworld module for it

[ooom416354]

@strawberry-3.141 so add the hello world module under the clock in the config.js and code it up to add the color coded “legend”, right?

[strawberry 3.141]

@ooom416354 put it right above the calendar module in the config with the same position

{
        module: 'helloworld',
        position: 'top_left',
        config: {
            text: '<div>John</div><div>Jane</div>'
        }
    }

EDIT it wont let me do adding styling add style=“color: blue;” for John example behind the open div tag

[ooom416354]

@strawberry-3.141 perfect, I will do that. thanks again!

[ooom416354]

@strawberry-3.141 I see that, is it possible to just add 5 separate helloworld modules each stacked on top of each other, each with a different color?

[strawberry 3.141]

@ooom416354 you could do that but each module has a margin around which takes up more space than adding all in one

[ooom416354]

@strawberry-3.141 Yea, I saw that, I guess I could modify the module itself to shrink the margin but that would cause a problem with pulling latest updates, right?

[billp100]

@strawberry-3.141 I am said friend that @ooom416354 is helping. I appreciate the help, I will be able to do some testing of my own tonight and tomorrow with the impending storm coming.

My ideal setup is to have the 5 members in my family share 1 calendar module, each using a separate icon. For my wife and I it’s fairly easy, because there is a male icon and female. For the kids, there is no way do differentiate them.

My other question would be, rather than using a font-awesome symbol, could I just use a letter or name in place of that?

[broberg]

@ooom416354

If you want it all in a row above the calender then use < span >, < div > usually stacks on top of each other.

< span style="color: blue">Dude, < /span>
< span style="color: pink">Dudette, < /span>
< span style="color: green">Tiny dude, < /span>
< span style="color: yellow">Tiny dudette, < /span>
< span style="color: purple">Tiniest thingymajigg< /span>

That should give you “Dude, Dudette, Tiny dude, Tiny dudette, Tiniest thingymajigg”

[ooom416354]

@broberg Yes, that makes sense but would that be added as part of the helloworld module which @strawberry-3-141 mentioned to use above?

[broberg]

@ooom416354 Yes, if you put that inside the text: ' ... ' it should work nicely,
But since the module doesn’t have any width constraints it could stretch the top_left area, but that depends on number of characters and font-size ofc.

[ooom416354]

@broberg perfect, got it, thanks.

@billp100 this should work but may need some formatting with the margins to get it to look good.