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

MMM-CalendarExt3Agenda

Scheduled Pinned Locked Moved Utilities
192 Posts 27 Posters 213.9k Views 29 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.
  • B Offline
    BKeyport Module Developer @sdetweil
    last edited by Sep 3, 2022, 9:17 PM

    @sdetweil really? I haven’t noticed. As you can see, I’ve got plenty of events…

    good to know, though.

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

    S 1 Reply Last reply Sep 3, 2022, 10:15 PM Reply Quote 0
    • S Offline
      sdetweil @BKeyport
      last edited by Sep 3, 2022, 10:15 PM

      @BKeyport really trouble with past events getting counted

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • H Offline
        hogedir
        last edited by hogedir Sep 3, 2022, 11:35 PM Sep 3, 2022, 11:00 PM

        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.

        B 1 Reply Last reply Sep 3, 2022, 11:48 PM Reply Quote 0
        • B Offline
          BKeyport Module Developer @hogedir
          last edited by BKeyport Sep 3, 2022, 11:52 PM Sep 3, 2022, 11:48 PM

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

          B H 2 Replies Last reply Sep 4, 2022, 12:29 AM Reply Quote 0
          • B Offline
            BKeyport Module Developer @BKeyport
            last edited by Sep 4, 2022, 12:29 AM

            @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 Sep 4, 2022, 1:14 PM Reply Quote 0
            • M Offline
              MMRIZE @BKeyport
              last edited by Sep 4, 2022, 1:14 PM

              @BKeyport already applied.

              1 Reply Last reply Reply Quote 0
              • H Offline
                hogedir @BKeyport
                last edited by hogedir Sep 4, 2022, 7:26 PM Sep 4, 2022, 7:25 PM

                @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 “…”

                B L 2 Replies Last reply Sep 4, 2022, 11:38 PM Reply Quote 0
                • B Offline
                  BKeyport Module Developer @hogedir
                  last edited by Sep 4, 2022, 11:38 PM

                  @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 Sep 5, 2022, 1:28 AM Reply Quote 0
                  • W Offline
                    Wenike @BKeyport
                    last edited by Sep 5, 2022, 1:28 AM

                    @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 Sep 5, 2022, 5:00 AM

                      Nobody like my default color settings? :(

                      B W 2 Replies Last reply Sep 5, 2022, 5:39 AM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 6
                      • 19
                      • 20
                      • 4 / 20
                      4 / 20
                      • First post
                        39/192
                        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