MagicMirror Forum

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

    Different Calendars in different colors

    Feature Requests
    4
    7
    4229
    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.
    • A
      amanzimdwini last edited by

      I looked through the dox but could not find any hints… we have 8 different calendars (spouse / children / carpools / etc). Can they be color coded individually? Would be a great feature…

      broberg 1 Reply Last reply Reply Quote 0
      • broberg
        broberg Project Sponsor @amanzimdwini last edited by

        @amanzimdwini

        You can alter the styling of each calendar yes if you are running multiple instances of the calendars. By using the custom.css file.

        depending on which order you put them in the config they are configured like this :

        #module_7_calendar {
        color: red}
        #module_8_calendar {
        color: blue}
        #module_9_calendar {
        color: pink}
        #module_10_calendar {
        color: green}
        
        

        The number of the modules starts with 0 which in most cases are the alert module in the config. ( #module_0_alert )

        A 1 Reply Last reply Reply Quote 1
        • A
          amanzimdwini @broberg last edited by

          @broberg COOL!!! (Was I supposed to have been able to figure that out from the documentation?) Working on it now. Close topic

          yawns 1 Reply Last reply Reply Quote 0
          • yawns
            yawns Moderator @amanzimdwini last edited by

            @amanzimdwini
            No, this is not mentioned in the readme. The css styles are a bit “hackish” 😉

            As broberg said you have to add multiple calendar instances. So instead of

            {
            	module: 'calendar',
            	position: 'top_left',   // This can be any of the regions. Best results in left or right regions.
            	config: {
            		calendars: [
            		{
            			url: 'http://www.calendarlabs.com/templates/ical/US-Holidays.ics',
            			symbol: 'calendar',
                    },
            		{
            			url: 'whatever',
            			symbol: 'calendar',
                    }
                ]
            	}
            }
            

            you go for

            {
            	module: 'calendar',
            	position: 'top_left',   // This can be any of the regions. Best results in left or right regions.
            	config: {
            		calendars: [
            		{
            			url: 'http://www.calendarlabs.com/templates/ical/US-Holidays.ics',
            			symbol: 'calendar',
                    }
                ]
            	}
            },
            {
            	module: 'calendar',
            	position: 'top_left',   // This can be any of the regions. Best results in left or right regions.
            	config: {
            		calendars: [
            		{
            			url: 'whatever',
            			symbol: 'calendar',
                    }
                ]
            	}
            }
            

            Downside is, that you don’t see recent entries of all calendars next to each other, because every calendar instance is sorting on its own

            A 1 Reply Last reply Reply Quote 0
            • A
              amanzimdwini @yawns last edited by

              @yawns Argh. THAT is a downside, explains the results I got) - and brings back the original request.

              But it did give me other good ideas Re: custom.css (which is, indeed, and bit “hackish”)

              Thanks,

              strawberry 3.141 1 Reply Last reply Reply Quote 0
              • strawberry 3.141
                strawberry 3.141 Project Sponsor Module Developer @amanzimdwini last edited by

                @amanzimdwini in the upcoming version there will be color support https://github.com/MichMich/MagicMirror/tree/develop/modules/default/calendar#calendar-configuration

                Please create a github issue if you need help, so I can keep track

                A 1 Reply Last reply Reply Quote 3
                • A
                  amanzimdwini @strawberry 3.141 last edited by

                  @strawberry-3.141
                  I’m going beta later today 🙂 This is great.

                  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