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

Calendar

Scheduled Pinned Locked Moved Custom CSS
5 Posts 2 Posters 762 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.
  • P Offline
    plainbroke
    last edited by plainbroke Jul 30, 2024, 1:02 AM Jul 30, 2024, 12:58 AM

    I have 4 calendars setup in the default calendar, the symbols where all different in color and symbol I have cake (blue), car(green), briefcase (red), and a calendar (yellow). BUT all of them are showing up blue instead of the individual colors assigned in the config.js

    calendar.jpg

    Slow learner. But trying anyways.

    S 1 Reply Last reply Jul 30, 2024, 2:53 AM Reply Quote 0
    • S Offline
      sdetweil @plainbroke
      last edited by sdetweil Jul 30, 2024, 2:54 AM Jul 30, 2024, 2:53 AM

      @plainbroke what is in custom.css for these? it will override config.js

      now you have 4 instances so you need 4 different selectors… css ALWAYS SELECTS ALL ELEMENTS THAT MATCH

      use the moduke id, or add a classes:“…” after module:“calendar” so you can tell them apart

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      P 1 Reply Last reply Aug 4, 2024, 12:51 AM Reply Quote 0
      • P Offline
        plainbroke @sdetweil
        last edited by Aug 4, 2024, 12:51 AM

        @sdetweil

        This is what I have for my css and my js . I think I need to somehow put the colors in the css, but I can not figure it out again. I probably have the config somewhere just have not had the “want to” to find it again. Having a bunch of issues since having Covid last month… Hopefully it will clear up soon…

        CUSTOM CSS:
        .calendar .symbol {
                Margin-left: 10px;
                Text-align: left;
                Color: #15b1fd;
                Font-size: 34px;
                Line-Height: 35px;
        
        CONFIG JS
                        {
                                module: "calendar",
                                header: "Birthdays/Dr.Appt",
                                position: "top_left",
                                config: {
                                        fade: false,
                                        maximumEntries: 16,
                                        timeFormat: "absolute",
                                        urgency: 3,
                                        getRelative: 24,
                                calendars: [
                                {
                                        symbol: "birthday-cake",
                                        name: "Birthdays",
                                        url: "https://calendar.google.com/calendar/ical$
                                        color: "#09a6f3"
                                },
                                        {
                                        symbol: "briefcase-medical",
                                        name: "DrAppt",
                                        url: "https://calendar.google.com/calendar/ical$
                                        color: "#f30819"
                                },
                                        ]
                                }
                        },
        
        

        Slow learner. But trying anyways.

        S 1 Reply Last reply Aug 4, 2024, 1:13 AM Reply Quote 0
        • S Offline
          sdetweil @plainbroke
          last edited by sdetweil Aug 4, 2024, 4:49 PM Aug 4, 2024, 1:13 AM

          @plainbroke I hear that on Covid. Spent 8 weeks in hospital myself in 21, quite a scare, a little over a year til I was 100% recovered

          Anyhow,

          You also need

          colored:true, 
          

          in the module config, before the calendars list

          But the css will override that
          So take the color out of the css, then the color in the cal entry should work. I think

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          P 1 Reply Last reply Aug 4, 2024, 4:35 PM Reply Quote 0
          • P Offline
            plainbroke @sdetweil
            last edited by Aug 4, 2024, 4:35 PM

            @sdetweil

            Thank you for the help Sam.
            You are the man…

            Slow learner. But trying anyways.

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