MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.20.0 is available! For more information about this release, check out this topic.

    Another way of identifying which event is associated with which Calendar

    Custom CSS
    2
    4
    259
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      ruff.hi last edited by

      I know that I can use icons (https://fontawesome.com/v4.7/icons/) but, to be honest, I don’t want to have to remember that my calendar is associated with a ‘bar-chart’ and my wife’s is associated with a ‘battery-full’.

      I would prefer to put in M for me and W for wife. Can I do that … or do I have to wait for Mr Icon Creator to create letter based icons?

      Thorn2910 1 Reply Last reply Reply Quote 0
      • Thorn2910
        Thorn2910 @ruff.hi last edited by

        @ruff-hi
        Why don’t you work with different colors

        {
        			module: "calendar",
        			header: "Events",
        			position: "top_left",
        			maximumEntries: "3",
        			config: {
        				colored: true,
        				tableClass: "small",
        				calendars: [
        					{
        						symbol: "fas fa-trash",
        						color: "rgb(185, 62, 38)",
        						maximumEntries: "2",
        						url: "https://calendar.google.com/calendar/ical/xxxxx/public/basic.ics"
        					},
        					{
                                                        symbol: "far fa-calendar-alt",
                                                        color: "rgb(250, 253, 140)",
                                                        maximumEntries: "2",
                                                        url: "webcal://p102-caldav.icloud.com/published/2/xxxx"
                                                },
        					{
                                                        symbol: "fas fa-house-user",
                                                        maximumEntries: "2",
                                                        color: "rgb(121, 0, 86)",
                                                        url: "https://calendar.google.com/calendar/ical/xxx/basic.ics"
                                                }
        			                    ]
        				}
        		},
        

        This way you know excatly which calendar you are looking at.

        Alternatively you cloud add two different instances of the calendar module

        {
        			module: "calendar",
        			header: "Wife",
        			position: "top_left",
        			maximumEntries: "3",
        			config: {
        				colored: true,
        				tableClass: "small",
        				calendars: [
        					{
        						symbol: "fas fa-trash",
        						color: "rgb(185, 62, 38)",
        						maximumEntries: "2",
        						url: "https://calendar.google.com/calendar/ical/xxxx/basic.ics"
        					}
        
        		},
        
        {
        			module: "calendar",
        			header: "You",
        			position: "top_left",
        			maximumEntries: "3",
        			config: {
        				colored: true,
        				tableClass: "small",
        				calendars: [
        					{
        					                                                symbol: "fas fa-house-user",
        					                                                maximumEntries: "2",
        					                                                color: "rgb(121, 0, 86)",
        					                                                url: "https://calendar.google.com/calendar/ical/xxx/basic.ics"
        					                                        }
        
        		},
        
        R 1 Reply Last reply Reply Quote 0
        • R
          ruff.hi @Thorn2910 last edited by

          @thorn2910 - excellent suggestion … but …

          I added various colors to my calendar option a week or two ago. I also like the ability to add some text because then I don’t have to remember what icon mean which calendar … or which color meant which calendar. I can see the different entries … then check the text to know the calendar.

          Thorn2910 1 Reply Last reply Reply Quote 0
          • Thorn2910
            Thorn2910 @ruff.hi last edited by

            @ruff-hi

            That is exactly the alternative which I showed

            {
            			module: "calendar",
            			header: "House",
            			position: "top_left",
            			maximumEntries: "3",
            			config: {
            				colored: true,
            				tableClass: "small",
            				calendars: [
            					{
                                                            symbol: "fas fa-house-user",
                                                            maximumEntries: "2",
                                                            color: "rgb(121, 0, 86)",
                                                            url: "https://calendar.google.com/calendar/ical/xxx/basic.ics"
                                                    }
            			                    ]
            				}
            		},
            		{
                                    module: "calendar",
                                    header: "Trash",
                                    position: "top_left",
                                    maximumEntries: "3",
                                    config: {
                                            colored: true,
                                            tableClass: "small",
                                            calendars: [
                                                    {
                                                            symbol: "fas fa-trash",
                                                            color: "rgb(185, 62, 38)",
                                                            maximumEntries: "2",
                                                            url: "https://calendar.google.com/calendar/ical/xxxxx/basic.ics"                                        
                                                    }        
                                                        ]
                                            }
                            },
            

            Which will look like this

            5ddd9a13-36aa-47ad-a265-e6e9b94e367a-grafik.png

            1 Reply Last reply Reply Quote 0
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy