• 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 214.0k 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.
  • M Offline
    MMRIZE @Studio472
    last edited by May 8, 2023, 4:00 PM

    @Studio472
    Append this to your custom.css

    .CX3A .agenda::after {
      display: none;
    }
    
    B 1 Reply Last reply May 8, 2023, 8:18 PM Reply Quote 0
    • B Online
      BKeyport Module Developer @MMRIZE
      last edited by May 8, 2023, 8:18 PM

      @MMRIZE Boy, we did things the hard way…

      /* Fade adjustments */
      .CX3A .agenda::after {
      	position: absolute;
      	bottom: 0;
      	left: 0;
      	height: 6%;
      	width: 100%;
      	content: '';
      	background-image: unset;
      } 
      

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

      1 Reply Last reply Reply Quote 1
      • M Offline
        MM19198
        last edited by Jun 15, 2023, 11:55 PM

        I was able to get MMM-CalendarExt3 working, but I’m struggling with MMM-CalendarExt3Agenda. I cannot figure out what I’m doing wrong. None of the events appear in the MMM-CalendarExt3Agenda module but they do appear in the MMM-CalendarExt3 module. Any help is appreciated.

        Google Calendar Config

        {
        	module: "MMM-GoogleCalendar",
        	header: "Family Calendar",
        	classes: "calendar-agenda",
        	config: {
        		calendars: [
        			{
        				symbol: "calendar-week",
        				calendarID: "myemail@gmail.com",
        				name: "mycalendar"
        			},
        		],
        		broadcastEvents: true,
        		broadcastPstEvents: true,
        		maximumEntries: 100
        	}
        },
        

        MMM-CalendarExt3 Config

        {
        	module: "MMM-CalendarExt3",
        	position: "top_center",
        	title: "Family Calendar EXT3",
        	config: {
        		mode: "month",
        		instanceID: "Ext-Calendar-Month",
        		calendarSet: ['mycalendar'],
        		weeksInView: 3,
        		preProcessor: (e) => {
        			if (e.start?.dateTime) {
        				  e.startDate = new Date(e.start.dateTime).valueOf()
        			} else if (e.start?.date) {
        				  e.startDate = new Date('${e.start.date}T00:00:00').valueOf()
        			}
        
        			if (e.end?.dateTime) {
        				  e.endDate = new Date(e.end.dateTime).valueOf()
        			} else if (e.end?.date) {
        				  e.endDate = new Date('${e.end.date}T00:00:00').valueOf()
        			}
        
        			e.title = e.summary
        			e.fullDayEvent = (e.start?.date) ? true : false
        			return e
        		}
        	}
        },
        

        MMM-CalendarExt3Agenda Config

        {
        	module: "MMM-CalendarExt3Agenda",
        	position: "top_left",
        	title: "Something",
        	config: {
        		instanceId: "Ext3-Calendar-Agenda",
        		calendarSet: ['mycalendar'],
        		firstDayOfWeek: 1,
        		startDayIndex: -1,
        		endDayIndex: 10,
        		showMiniMonthCalendar: false,
        		preProcessor: (e) => {
        			if (e.start?.dateTime) {
        				  e.startDate = new Date(e.start.dateTime).valueOf()
        			} else if (e.start?.date) {
        				  e.startDate = new Date('${e.start.date}T00:00:00').valueOf()
        			}
        
        			if (e.end?.dateTime) {
        				  e.endDate = new Date(e.end.dateTime).valueOf()
        			} else if (e.end?.date) {
        				  e.endDate = new Date('${e.end.date}T00:00:00').valueOf()
        			}
        
        			e.title = e.summary
        			e.fullDayEvent = (e.start?.date) ? true : false
        			return e
        		}
        	}
        },
        
        M 1 Reply Last reply Jun 16, 2023, 3:07 AM Reply Quote 0
        • M Offline
          MM19198 @MM19198
          last edited by Jun 16, 2023, 3:07 AM

          I was able to get it working. For those that may need to resolve this in the future, the answer was at this link:

          https://github.com/MMRIZE/MMM-CalendarExt3Agenda#update-to-120

          When some submodule is not updated, try this.

          cd ~/MagicMirror/modules/MMM-CalendarExt3Agenda
          git submodule update --init --recursive
          
          1 Reply Last reply Reply Quote 0
          • D Offline
            danidanial
            last edited by Jun 16, 2023, 5:59 AM

            I was able to get it working. For those that may need to resolve this in the future, the answer was at this link: :backhand_index_pointing_right_light_skin_tone:

            https://github.com/MMRIZE/MMM-CalendarExt3Agenda#update-to-120

            When some submodule is not updated, try this.

            cd ~/MagicMirror/modules/MMM-CalendarExt3Agenda
            git submodule update --init --recursive

            1 Reply Last reply Reply Quote 0
            • M Offline
              MarNog @MMRIZE
              last edited by Jul 30, 2023, 7:24 PM

              @MMRIZE Thanks for the module! I see your first screenshot and looks like you have multiple calendars using the original MMM-Calendar and MMM-CalendarExt3Agenda modules. What setting do you use to get it working like this? I setup mine, but I cant figure out what do do on the original MMM-Calendar module to display only one specific calendar and another calendar to be displayed using Ext3Agenda module. Also, what is the best way to get hyphens in the column to be between the times when using 2 digits for hours?

              Screenshot 2023-07-30 121447.jpg

              {
              	module: "calendar",
              	header: "Cabrillo's Dates and Deadlines",
              	position: "bottom_right", //When you want to hide default calendar module, just remove position of calendar module.
              	config: {
              		maxTitleLength: 50,
              		wrapEvents: true,
              		tableClass: "small",
              		maximumEntries: 13,
              		//sliceMultiDayEvents: true,
              		calendars: [
              			{
              			symbol: "calendar-check",
              			name: "Cabrillo_Dates_Deadlines", // <-- specify calendar name
              			url: "https://calendar.google.com/calendar/ical/c_5a2463022055508fcb5a604f131895484562edb98904940f4efb3fa1c1362e47%40group.calendar.google.com/public/basic.ics",
              			},
              			{
              			// HOW to REMOVE this one from the Calendar Module??
              			url: "https://calendar.google.com/calendar/ical/c_jvq8rotabh0rrru2qeo2oec9gc%40group.calendar.google.com/public/basic.ics",
              			name: "CTC_Schedule", // <-- specify calendar name
              			color: "skyblue", // <-- if you don't want to get color, just remove this line.
              			broadcastPastEvents: true, // <-- need to broadcast past events
              			maximalNumberOfDays: 30, // <-- how old events would be broadcasted
              			maximumEntries: 100, // <-- assign enough number to prevent truncating new events by old events.
              			symbol: 'calendar-check', // <-- when you want to display symbol. If you don't want, just set as `symbol:[],`
              			}
              		]
              	}
              },
              
              
              
              {
                module: "MMM-CalendarExt3Agenda",
                position: "top_left",
                title: "CTC TA Schedule",
                config: {
                  instanceId: "CTCCalendar",
                  firstDayOfWeek: 1,
                  startDayIndex: 0,
                  endDayIndex: 2,
                  showMiniMonthCalendar: false,
                  calendarSet: ['CTC_Schedule'],
                  eventFilter: (ev) => {
                           if (ev.title.startsWith("OUT")) {
                           	return false
                           	}
              	     return true
              	},
                }
              },
              

              Thank you

              B M 2 Replies Last reply Jul 31, 2023, 5:11 AM Reply Quote 0
              • B Online
                BKeyport Module Developer @MarNog
                last edited by Jul 31, 2023, 5:11 AM

                @MarNog Multiple instances of the calendar module. One with position in place for the ones you want to show with the default module, one without a position for the ones you want to display with CX3A.

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

                M 1 Reply Last reply Aug 2, 2023, 5:08 AM Reply Quote 0
                • M Offline
                  MMRIZE @MarNog
                  last edited by MMRIZE Jul 31, 2023, 7:20 AM Jul 31, 2023, 7:18 AM

                  @MarNog
                  Interesting. You might have added some custom CSS, so hard to guess what happened at the moment.
                  I think the area for time displaying is not so wide enough. Give them more space.

                  Currently, the hyphen and startTime/endTime condition is defined like this.

                  /* MMM-CalendarExt3Agenda.css line 187 */
                  .CX3A .event .time {
                    font-size: 75%;
                    vertical-align: text-bottom;
                  }
                  
                  .CX3A .event .time.notInDay {
                    display: none;
                  }
                  
                  .CX3A .event .startTime::after {
                    content: ' -';
                  }
                  
                  .CX3A .event .startTime.notInDay + .endTime.inDay::before {
                    content: '- ';
                  }
                  
                  M 1 Reply Last reply Aug 2, 2023, 5:15 AM Reply Quote 0
                  • M Offline
                    MarNog @BKeyport
                    last edited by Aug 2, 2023, 5:08 AM

                    @BKeyport I added another instance of the Calendar module and it worked like charm. Thank you.

                    1 Reply Last reply Reply Quote 0
                    • M Offline
                      MarNog @MMRIZE
                      last edited by Aug 2, 2023, 5:15 AM

                      @MMRIZE I had used a custom.css from someone’s post and I modified the font size. After your suggestion I changed the width on the custom.css and the time is showing correctly now. Thank you

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 10
                      • 11
                      • 12
                      • 13
                      • 14
                      • 19
                      • 20
                      • 12 / 20
                      • 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