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 4.7k 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 Offline
      sdetweil @jakuk
      last edited by

      @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 Reply Quote 0
      • J Offline
        jakuk @sdetweil
        last edited by

        @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 Reply Quote 0
        • S Offline
          sdetweil @jakuk
          last edited by sdetweil

          @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

          brobergB 1 Reply Last reply Reply Quote 0
          • brobergB Offline
            broberg Project Sponsor @sdetweil
            last edited by

            @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

              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 Reply Quote 0
              • S Offline
                sdetweil @jakuk
                last edited by sdetweil

                @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 Offline
                  sdetweil
                  last edited by

                  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
                  • 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