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.

    Config for a simple clean montly calendar

    Scheduled Pinned Locked Moved Development
    25 Posts 8 Posters 21.3k Views 9 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.
    • M Offline
      mlcampbe
      last edited by

      Re: MMM-CalendarExt2

      Is there a way to format the calendar so it looks like the attached image. This is from a dakboard example but is clean and simple. I’ve tried some configuration of the MMM-calendarext2 but not getting anywhere close. Basically looking to get plain white text, equal sized “day” boxes, and a color chip/button to designate what calendar an event is from.

      Some pointers would be great.

      Imgur

      P 1 Reply Last reply Reply Quote 0
      • P Offline
        Plainbroke 0 @mlcampbe
        last edited by

        @mlcampbe
        Did you ever get a reply? I have been looking for that exact calendar setup.

        M 1 Reply Last reply Reply Quote 0
        • M Offline
          mlcampbe @Plainbroke 0
          last edited by mlcampbe

          @Plainbroke-0
          Not exactly like it. I made one that looks like this post and I am pretty happy with it.

          https://forum.magicmirror.builders/topic/9601/some-magicmirror-modules-are-really-confusing/6#

          Actually I have changed my setup from the above screenshot. I switched from the “month” view to a “week” view so that I can show the next 7 weeks on my screen. The current week is always the top row and then 6 following weeks afterwards.

          1 Reply Last reply Reply Quote 0
          • C Offline
            Clubjack
            last edited by

            Hey.
            Is it possible to see your Design? I am searching for a clean Design too.

            M 1 Reply Last reply Reply Quote 0
            • M Offline
              mlcampbe @Clubjack
              last edited by mlcampbe

              @Clubjack
              Here is what I am currently using.

              Imgur

              C P 2 Replies Last reply Reply Quote 1
              • C Offline
                Clubjack @mlcampbe
                last edited by

                @mlcampbe
                Thank You. I Like it.
                Which Module did you use? CalendarExt or Ext2?
                Possible to get your config?

                M 1 Reply Last reply Reply Quote 0
                • M Offline
                  mlcampbe @Clubjack
                  last edited by mlcampbe

                  @Clubjack
                  On the right-hand side I am using the modules all in the top-right region:
                  default clock
                  MMM-DarkSkyForecast
                  default calendar
                  MMM-SimpleLogo (used to display a static image that is my calendar color legend)

                  The main calendar is using MMM-CalendarExt2 in the top-left region with 7 different google/icloud calendar URLs defined in the “calendars” section of the module. The rest of the MMM-CalendarExt2 config in the config.js is for the view/scene and I am using this:

                  views: [
                            { 
                              name: "view1",
                              mode: "week",
                              slotCount: "7",
                              maxItems: "1000",
                              hideOverflow: false,
                              slotMaxHeight: "95px",
                              monthFormat: "MMMM YYYY",
                              position: "top_left",
                              calendars: []
                            },
                          ],
                          scenes: [
                            {  
                              name: "DEFAULT",
                            },
                          ],
                  

                  All of the formatting is done within the custom.css file which is heavily customized like this:

                  body {
                          background-size: cover;
                          margin: 20px; 
                          height: calc(100% - 40px);
                          width: calc(100% - 40px);
                  }
                  
                  .xsmall {
                          font-size: 17px;
                  }
                  
                  .region.top.right {
                          width: 23%;
                  }
                  
                  .region.top.left {
                          width: 77%;
                  }
                  
                  .calendar .time {
                          padding-left: 20px;
                          color: #FFF;
                          font-weight: normal;
                  }
                  
                  .MMM-DarkSkyForecast .module-content {
                          width: unset;
                  }
                  
                  .CX2 {
                          --font-size: 14px;
                  }
                  
                  .CX2 .event {
                          padding: 0px;
                  }
                  
                  .CX2 .weekSlot .timelineSleeve {
                          height: calc(var(--font-size) + 5px);
                  }
                  
                  .CX2 .weeksmark {
                          display:none;
                  }
                  
                  .CX2 .event.passed::before {
                          background: none;
                  }
                  
                  .CX2 .cellSlot.weekday_6 .slotSubTitle {
                          color: #F66;
                  }
                  
                  .CX2 .cellSlot.weekday_7 .slotSubTitle {
                          color: #F66;
                  }
                  
                  .CX2 .cellSlot .slotTitle, .CX2 .cellSlot .slotSubTitle, .CX2 .cellSlot .slotAltTitle {
                          font-size: 20px;
                          color: #FFF;
                  }
                  
                  .CX2 .today .slotHeader {
                          background: rgba(64,64,64,0.8);
                          color: #000;
                  }
                  
                  .CX2 .today .slotHeader .slotTitle {
                          color: #FFF;
                  }
                  
                  .CX2 .today .slotContent {
                          background: #eeeeee69;
                          #border: 1px solid white;
                  }
                  
                  .CX2 .me, .me.event.fullday {
                          border-radius: 5px;
                          background-color: #83CCD5;
                          color: #000;
                  }
                  
                  .CX2 .wife, .wife.event.fullday {
                          border-radius: 5px;
                          background-color: #EB738B;
                          color: #000;
                  }
                  
                  .CX2 .social, .social.event.fullday {
                          border-radius: 5px;
                          background-color: #D59C73;
                          color: #000;
                  }
                  
                  .CX2 .piano, .piano.event.fullday {
                          border-radius: 5px;
                          background-color: #B4CC5A;
                          color: #000;
                  }
                  
                  .CX2 .birthday, .birthday.event.fullday {
                          border-radius: 5px;
                          background-color: #F0E68C;
                          color: #000;
                  }
                  
                  .CX2 .college, .college.event.fullday {
                          border-radius: 5px;
                          background-color: #A473AC;
                          color: #000;
                  }
                  
                  .CX2 .holiday, .holiday.event.fullday {
                          border-radius: 5px;
                          background-color: #7B9CCC;
                          color: #000;
                  
                  .CX2 .slot > .slotContent {
                          background-image: none;
                  }
                  
                  .CX2 .monthViewTitle {
                          text-align: left;
                  }
                  
                  .CX2 .eventTitle {
                          font-weight: normal;
                  }
                  
                  C C 3 Replies Last reply Reply Quote 3
                  • C Offline
                    Clubjack @mlcampbe
                    last edited by

                    @mlcampbe
                    Thank You for that.

                    I never worked with custom.css before.
                    Is there an tutorial for custom.css, to understand all whats inside?

                    S M 3 Replies Last reply Reply Quote 0
                    • S Away
                      sdetweil @Clubjack
                      last edited by

                      @Clubjack said in Config for a simple clean montly calendar:

                      Is there an tutorial for custom.css, to understand all whats inside?

                      nothing inside, until you add it…

                      it overrides (or adds to) the main.css so you can customize the styles of elements
                      never modify the main.css

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 1
                      • M Offline
                        mlcampbe @Clubjack
                        last edited by

                        @Clubjack
                        In my case it was mostly trial and error. I am not a css guru by any stretch of the imagination. You might want to take a look at https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works which has some tips.

                        1 Reply Last reply Reply Quote 2
                        • 1
                        • 2
                        • 3
                        • 1 / 3
                        • 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