• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

Finding module classes

Scheduled Pinned Locked Moved Unsolved Troubleshooting
11 Posts 3 Posters 3.9k Views 2 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.
  • S Away
    sdetweil @jakuk
    last edited by May 26, 2019, 1:22 PM

    @jakuk looking at the code, there are config options for each calendar url

    the title is

    	titleClassForUrl: function (url) {
    		return this.getCalendarProperty(url, "titleClass", "");
    

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    J 1 Reply Last reply May 26, 2019, 1:26 PM Reply Quote 0
    • J Offline
      jakuk @sdetweil
      last edited by May 26, 2019, 1:26 PM

      @sdetweil yes I found that too but putting this code in my custom.css file won’t change the follow of the name of the calendar? Am I doing it wrong?
      Thanks again

      .calendar .titleClass {
      Color: yellow

      }

      S 1 Reply Last reply May 26, 2019, 1:48 PM Reply Quote 0
      • S Away
        sdetweil @jakuk
        last edited by sdetweil May 26, 2019, 1:49 PM May 26, 2019, 1:48 PM

        @jakuk AND in addition, it goes in the config file where u defined your calendar entry

        calendars: [
                  {
                    symbol: "family ",
                   url: "webcal://c....",
                   titleClass:   class_name
                   ... and there are other classes for each part... 
                  },
        

        and color is lowercase

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        B 1 Reply Last reply May 26, 2019, 1:55 PM Reply Quote 0
        • B Offline
          broberg Project Sponsor @sdetweil
          last edited by May 26, 2019, 1:55 PM

          @sdetweil said in Finding module classes:

          and color is lowercase

          It’s good practice, but css doesn’t care about upper/lowercase

          1 Reply Last reply Reply Quote 0
          • J Offline
            jakuk
            last edited by May 26, 2019, 1:56 PM

            Sorry i’m really confused now, in my config file i have this. I don’t have a titleClass, i have named the calendar under the header?
            Do i just need to put color under the config ?

            },
                {
                  module: 'calendar',
                  header: 'Family Calendar',
                  position: 'top_left',
                  fetchInterval: '30000',
                  config: {
                    calendars: [
                      {
                        symbol: 'calendar-check-o',
                        url: ********
                      }
                    ],
                    titleReplace: {
                      'De verjaardag van ': '',
                      '\'s birthday': ''
                    },
                    excludedEvents: []
                  }
                },
                {
            
            S 1 Reply Last reply May 26, 2019, 2:12 PM Reply Quote 0
            • S Away
              sdetweil @jakuk
              last edited by sdetweil May 26, 2019, 2:13 PM May 26, 2019, 2:12 PM

              @jakuk you need to do two things, for each change

              1. add a css entry to specifically identify the behavior
              2. tell the calendar module to use your class
                so, inside the calendar entry add the titleClass: class_name (step 1)
                to the config (with appropriate commas etc)

              you do NOT have to change the original class (if one is used, in case of title, none is specified)

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • S Away
                sdetweil
                last edited by May 26, 2019, 2:16 PM

                see the calendar module readme

                https://github.com/MichMich/MagicMirror/blob/master/modules/default/calendar/README.md#calendar-configuration-options

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • 1
                • 2
                • 1 / 2
                1 / 2
                • First post
                  9/11
                  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