• 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 21.1k 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.
  • 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
                    • 3 / 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