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

Config for a simple clean montly calendar

Scheduled Pinned Locked Moved Development
25 Posts 8 Posters 20.0k 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 @Plainbroke 0
    last edited by Jun 19, 2020, 1:20 PM

    @Plainbroke-0

    Take a look at https://forum.magicmirror.builders/topic/11001/config-for-a-simple-clean-montly-calendar/8 as it has the css and necessary config needed.

    1 Reply Last reply Reply Quote 0
    • P Offline
      Piranha1605
      last edited by Jun 19, 2020, 7:43 PM

      Here is a sample for you.

      Calendar.png

      
      /**
       * module.width_height
       */
      
       .module.MMM-CalendarExt2 {
        height: 600px;
      }
      
      
      /**
       * module.color_border_shadow
       */
      
       .module.MMM-CalendarExt2 {
        background-color:#2a313b;
        border-radius:8px;
        padding:8px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
      }
      
      /**
       * MMM-CalendarExt2.
       */
      
      .CX2 .slot .event{
      	background: #1f242c;
      }
      .CX2 .agenda .eventSub {
      	display:none;
      }
      .CX2 .slot .slotHeader{
        background: #1f242c;
        border: 1px solid black;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
      }
      .CX2 .today .slotHeader * {
      	color: white;
      }
       .CX2 .event.fullday {
        background: #1f242c;
        border-radius:0px;
      }
      
      .CX2 .event[data-calendar-name="Google"] {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
        min-height:80px;
      }
      .CX2 .event[data-calendar-name="Karate"] {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
        min-height:80px;
      }
      .CX2 .event[data-calendar-name="Abfall"] {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
        min-height:80px;
      }
      .CX2 .event[data-calendar-name="Arbeit"] {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
        min-height:80px;
      }
      .CX2 .event[data-calendar-name="Feiertage"] {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
        min-height:80px;
      }
      
      /**
       * Iconsize.
       */
      
      .CX2 .event .eventIcon {
        min-width: calc(var(--font-size) * 2,5);
        min-height: calc(var(--font-size) * 2,5);
        margin-right:5px;
        float:left;
      }
      .CX2 .period .eventIcon {
        min-width: calc(var(--font-size) * 2,5);
        min-height: calc(var(--font-size) * 2,5);
        margin-right:5px;
        float:left;
      }
      .CX2 .weekSlot .eventIcon {
        min-width: var(--font-size);
        min-height: var(--font-size);
        margin-right:3px;
        display:block;
        padding-bottom:3px;
      }
      
      T 1 Reply Last reply Dec 16, 2023, 8:07 PM Reply Quote 0
      • P Offline
        Piranha1605
        last edited by Jun 19, 2020, 7:45 PM

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

        .CX2 .event[data-calendar-name=“Google”]

        Enter the name of your calendar here

        1 Reply Last reply Reply Quote 0
        • C Offline
          Clubjack @mlcampbe
          last edited by Oct 11, 2020, 5:07 PM

          @mlcampbe
          Hey. Last days i created my calendar with your helpfull custom.css.

          Do You know the Code for changing the height of the Event-Bar?
          I need it a little bit smaller.

          Thank You.

          M 1 Reply Last reply Oct 12, 2020, 1:24 PM Reply Quote 0
          • M Offline
            mlcampbe @Clubjack
            last edited by Oct 12, 2020, 1:24 PM

            @Clubjack
            I am not quite sure what you mean by the Event-Bar. Is that the height of a row or title size or what exactly are you talking about? I no longer use the calendar as my needs were only for about 1 years time but might be able to help if you can tell me exactly what part you need to modify.

            C 1 Reply Last reply Oct 12, 2020, 5:25 PM Reply Quote 0
            • C Offline
              Clubjack @mlcampbe
              last edited by Oct 12, 2020, 5:25 PM

              @mlcampbe
              Thank You. But i found it myself. 👍🏼

              But i have another queetion.

              I use the calendar in week-View.
              The Today-Header has an other Color. Thats good.
              But is it possible to change the background-Color of the Today Slot too?
              So it is easier to see the actual day.

              1 Reply Last reply Reply Quote 0
              • M Offline
                mlcampbe
                last edited by Oct 12, 2020, 5:45 PM

                I believe one of these should probably work:

                .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;
                }

                C 1 Reply Last reply Oct 13, 2020, 7:09 AM Reply Quote 1
                • C Offline
                  Clubjack @mlcampbe
                  last edited by Oct 13, 2020, 7:09 AM

                  @mlcampbe
                  Thanks a lot.
                  The last Code was the right. 👍🏼👍🏼👍🏼👍🏼

                  1 Reply Last reply Reply Quote 0
                  • T Offline
                    TJSartain @Piranha1605
                    last edited by Dec 16, 2023, 8:07 PM

                    @Piranha1605 Very nice. What does the config look like?

                    1 Reply Last reply Reply Quote 0
                    • H Offline
                      HansDampf
                      last edited by Jan 2, 2024, 9:20 PM

                      is there any suggestion fpr CalendarExt3?
                      https://github.com/MMRIZE/MMM-CalendarExt3

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