MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Changing the icon for only one calendar

    Scheduled Pinned Locked Moved Custom CSS
    7 Posts 3 Posters 1.2k Views 3 Watching
    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.
    • VengeanceV Offline
      Vengeance
      last edited by

      Hello,
      I am using the default calendar module which comes with the Magic Mirror.
      Thus far I am pretty happy with how it works.

      I have manged to get several ics files sync’d in and colour coded.

      However, I would like to change the icon for on of the calendars to one not available on http://fontawesome.io/icons/

      Ideally, it would be a file I could store locally on the RaspberryPi
      This is what the config.js file looks like currently for the calendar:

      {
      			module: "calendar",
      			header: "Gavin's Calendars",
      			position: "top_left",
      			config: {
      				colored: true,
      				coloredSymbolOnly: true,
      				calendars: [
      					{
      						symbol: "calendar-check",
      						dateFormat: "Do MMM",
      						color: "#E51B00",
      						url: "calendarlink01.ics"},
      					{
      						symbol: "calendar-alt",
      						dateFormat: "Do MMM",
      						color: "#1073BC",
      						url: "calendarlink02.ics"},
      					{
      						symbol: "calendar-plus",
      						dateFormat: "Do MMM",
      						color: "#27A86C",
      						url: "calendarlink03.ics"}
      				]
      			}
      		},
      

      If I understand correctly, this will require some kind of custom CSS, would appreciate any guidance provided.

      S 1 Reply Last reply Reply Quote 0
      • S Away
        sdetweil @Vengeance
        last edited by

        @Vengeance u can specify the symbolClass in the calendar entry too
        symbolClass:“foobar”,

        then in the css

        .calendar .foobar {
        ????? whatever u need 
        }
        

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • VengeanceV Offline
          Vengeance
          last edited by Vengeance

          Thanks @sdetweil
          I actually managed to just store the icons in the root dir for the module and change the .js for the module to look for the new file name.

          Now the issue I have is that .mov doesnt seem to work for icons. ( I tested with other file types to confirm the “change” worked, do now I know its just a file type issue)

          1 Reply Last reply Reply Quote 0
          • VengeanceV Offline
            Vengeance
            last edited by

            New post here: https://forum.magicmirror.builders/topic/12876/getting-mov-to-work-as-icons

            1 Reply Last reply Reply Quote 0
            • G Offline
              gubastide
              last edited by

              Hi,

              I’m new on the forum and new on MM dev.
              I have a little question : could we have different colors in the calendar (I use default module, with a google calendar) like in the web version ?

              Because I made a custom CSS

               body {
               
               }
               
              /*
               * CALENDAR SPECIFIC
               */
               
              .fa.fa-calendar-check {
                color: #2B60DE; /* Dodger Blue */
              }
               
              div.CALEXT .tableStyle .eventTime {
                  display:block;
               
              }
              

              And all my pictures are blue but I would like to have this picture at the same color like my web version like this example example.PNG
              Is it possible ?

              Thank you and congrats for your work

              S 1 Reply Last reply Reply Quote 0
              • S Away
                sdetweil @gubastide
                last edited by

                @gubastide sure… did u read the config for the calendar in the link from the readme?

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • G Offline
                  gubastide
                  last edited by

                  @sdetweil Yes but I don’t understand how to make this …
                  And English is difficult to me (I’m French) …
                  Is there any solution for my problem ?
                  Thank you

                  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 Sam, technical setup by Karsten.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy