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 726 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.
    • plainbrokeP Offline
      plainbroke
      last edited by plainbroke

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

        @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

        plainbrokeP 1 Reply Last reply Reply Quote 0
        • plainbrokeP Offline
          plainbroke @sdetweil
          last edited by

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

            @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

            plainbrokeP 1 Reply Last reply Reply Quote 0
            • plainbrokeP Offline
              plainbroke @sdetweil
              last edited by

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