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.

    MMM-CalendarExt3Agenda

    Scheduled Pinned Locked Moved Utilities
    222 Posts 29 Posters 286.4k Views 31 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.
    • H Offline
      hogedir
      last edited by hogedir

      I’ve change it from 100 to 100000 and now its works,
      my calendar is showed now. thanks a lot for your reactivity guys, perfect answer.

      two other questions : this parameter symbol: ‘camera’ maybe be other value than ‘camera’? I did not understood why camera was by default… is there a list of other symbol values?

      other question : I want to extend the text limit showing because it’s looks like limited for the events that not have a eaxct duration like 10:00-12:00

      like you have here in your screen :
      b9cedf0c-6c5e-4919-8ab6-99b8dc848664-image.png

      Thanks.

      BKeyportB 1 Reply Last reply Reply Quote 0
      • BKeyportB Offline
        BKeyport Module Developer @hogedir
        last edited by BKeyport

        @hogedir The event you point to is generated by the IRS, and is a full day event. the text is theirs.

        Here’s my CSS, fully commented for you to borrow:

        /* CalendarExt3Agenda */
        /* Set CX3a to size, etc. */
        .CX3A {
        	font-size: 18px;
        	min-width: 440px;
        	max-width: 440px;
        	max-height: 900px;
        	overflow-y: unset;
        	text-align: left;
        	position: relative;
        	color: var(--color-text);
        	--todayColor: DarkSlateGrey;
        	--saturdayColor : orange;
        	--sundayColor: darkGoldenRod; 
        }
        
        /* Hide useless descriptions, you wanna know, load your calendar */
        .CX3A .event .description {
        	display: none;
        }
        
        /* Hide useless locations, you wanna know, load your calendar */
        .CX3A .event .location {
        	display: none;
        }
        
        /* Set up custom full day look */ 
        .CX3A .cellBody .fullday .event {
        	color: var(--calendarColor);
        	background-color: var(--oppositeColor);
        	max-width: 100%;
        	padding: 0px 10px;
        	width: 100%;
        }
        
        /* make fullday events overflow onto next line */
        .CX3A .cellBody .fullday .event .title {
        	color: inherit;
        	overflow: unset;
        	white-space: unset;
        	text-overflow: unset;
        }
        
        /* Add the icon to full day events */
        .CX3A .cellBody .fullday .event .headline {
        	display: inline-block;
        }
        
        /* get rid of the icon for blanks	*/
        .CX3A .event .headline .symbol {
          display: none;
        }
        
        /* fullday keep the times hidden */
        .CX3A .cellBody .fullday .event .headline .time {
        	display: none;
        }
        
        /* Start Time Adjustments */
        .CX3A .event .time.startTime {
        	order: 2;
        	width: 90px;	
        	text-align: right;
        }
        
        /* Stretch title to left justify and organize */ 
        .CX3A .event .title { 
        	flex-grow: 1;
        	color: var(--calendarColor);
        }
        
        /* change date header to center & change color */
        .CX3A .agenda .cellHeader {
        	justify-content: center;
        	color: var(--text-color);
        }
        
        .CX3A .agenda .cellDay {
        	color: var(--text-color);
        }
        
        /* get rid of spare space & dash */
        .CX3A .event .startTime::after {
        	content: '';
        }
        
        /* Adjust time space */ 
        .CX3A .event .time {
        	font-size: unset;
         }
        
        /* Remove End time */
        .CX3A .event .endTime {
        	display: none;
        }
        
        /* Adjust how tall app is */
        .CX3A .agenda {
        	position: relative;
        	max-height: 900px;
        	overflow-y: hidden;
        }
        
        /* Fade adjustments */
        .CX3A .agenda::after {
        	position: absolute;
        	bottom: 0;
        	left: 0;
        	height: 6%;
        	width: 100%;
        	content: '';
        	background-image: unset;
        }
        

        8f5322a8-5dd8-4a48-83a6-fa1a62168e65-image.png
        (shading due to developer console)

        I decided to change it up, this is what it looks like now.

        color of events is set by the calendar functionality, thusly, background is via CSS:

        	url: "http://cal.events/VReW45.ics",
        	name: "Seahawks",
        	color: "#002244",
        

        The "E" in "Javascript" stands for "Easy"

        BKeyportB H 2 Replies Last reply Reply Quote 0
        • BKeyportB Offline
          BKeyport Module Developer @BKeyport
          last edited by

          @MMRIZE said in MMM-CalendarExt3:

          Small news.
          Now it could get the events from randomBrainstormer/MMM-GoogleCalendar module also.

          Are you planning on adding this to Agenda? I could use this.

          The "E" in "Javascript" stands for "Easy"

          M 1 Reply Last reply Reply Quote 0
          • M Offline
            MMRIZE @BKeyport
            last edited by

            @BKeyport already applied.

            1 Reply Last reply Reply Quote 0
            • H Offline
              hogedir @BKeyport
              last edited by hogedir

              @BKeyport I don’t understand how to extend the full day event like you. mine is limited and i have some space available like that

              aab9321c-e70e-4f08-8665-38cd5186dc28-image.png

              I want to extend totally the text for fullday event and not having these 3 points “…”

              BKeyportB luisestradaL 2 Replies Last reply Reply Quote 0
              • BKeyportB Offline
                BKeyport Module Developer @hogedir
                last edited by

                @hogedir It’s documented in my CSS above… Look closely you’ll find it. “fullday events overflow” is a clue.

                The "E" in "Javascript" stands for "Easy"

                W 1 Reply Last reply Reply Quote 0
                • W Offline
                  Wenike @BKeyport
                  last edited by

                  @BKeyport I appreciate you posting your CSS, it gave me a good base to tweak to make my layout work for me (especially getting each event in the calendar’s color but still dimming when that event is in the past.

                  1 Reply Last reply Reply Quote 0
                  • M Offline
                    MMRIZE
                    last edited by

                    Nobody like my default color settings? :(

                    BKeyportB W 2 Replies Last reply Reply Quote 0
                    • BKeyportB Offline
                      BKeyport Module Developer @MMRIZE
                      last edited by

                      @MMRIZE I did, when I was on a dark background. Then I decided I wanted to go with color to tell events apart, so css work it was.

                      The "E" in "Javascript" stands for "Easy"

                      1 Reply Last reply Reply Quote 0
                      • W Offline
                        Wenike @MMRIZE
                        last edited by

                        @MMRIZE I did! Except I have like 6 calendars defined and I’ve long been used to telling them apart by color on my Google calendar.

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 6
                        • 7
                        • 22
                        • 23
                        • 5 / 23
                        • 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