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
    224 Posts 30 Posters 362.0k Views 32 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.
    • S Offline
      sdetweil @MMRIZE
      last edited by

      @MMRIZE the quotation marks will get mangled if not wrapped in a code block. the forum code treats it as document text

      if u edit it, it’s correct but copy paste from here produces wird type quotes…

      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 @hogedir
        last edited by sdetweil

        @MMRIZE thank you very much !

        Now i have an issue. I try to connect a FRAMAGENDA calendar to your super module.

        Framagenda is a nextcloud like agenda. So, it needs an authentification (it’s not a direct .ics).

        Here is the config.js with the calendar and MMM-calendarextAgenda module config :

        {	
        			module: "calendar",
        			position: "top_left",
        		config: {
        		broadcastPastEvents: true, // <= IMPORTANT to see past events
        		calendars: [
        			{
        			url: "https://framagenda.org/remote.php/dav/calendars/calendar_1/test",
        			auth: {
        			    user: 'myuser28632HG4',
        			    pass: 'HDDBG5nSvdjgBVFBVDFFV',
        			    method: 'basic',
        			      },
        			name: "test", // <-- 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:[],
        			},
        			
        		]
        			}
        	},
        
        	{
          module: "MMM-CalendarExt3Agenda",
          position: "top_left",
          title: "My Agenda",
          config: {
            instanceId: "basicCalendar",
            locale: 'FR',
            firstDayOfWeek: 1,
            startDayIndex: -1,
        		endDayIndex: 10,
            calendarSet: [''],
          }
          },
        

        Result : the module works now but there is not Appointment showed, nothing is get from my framagenda calendar.

        Where can i see why it doesn’t dump my calendar ? a log file ?

        S 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @hogedir
          last edited by

          @hogedir please put your config info in a code block

          paste
          select the text you just pasted
          and pish the button on the top , looks like this
          </>

          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

            I have the connection now after multiple tests to understand the issue.

            but i think I found a bug in your module @MMRIZE.

            If I connect to a very simple calendar with 5 appoinments => result : it shows the calendar in the MM without any problem.

            If i connect to the same calendar but imported with much more information in it (i dumped my other calendar to it which doesn’t work with your module) => it shows NO APPOINTMENT AVAILABLE.

            It’s possible the french accent we use in france could be the source of the problem, Or too much info in the ics broke the connection?

            The special caracter like , : ! are ok ? or long sentence ? in the title of the appointment ?

            other question : what are the others symbols than camera ?
            How it works to affect the correct symbol to the right appointment? I don’t understand this feature.

            ==>>Where can i see the log file about your module especially please?

            thanks a lot

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

              @hogedir Try setting the max entries for your calendar higher than the default of 100.

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

                @Wenike My max is set to 20, so I doubt that’s the issue. Here’s mine that works great - with events for weeks (because I follow sports)

                module: "calendar", // Built in
                //position: "top_right",
                config: {
                	broadcastEvents: true,
                	broadcastPastEvents: false,
                	fetchInterval: 30000,
                	maximumEntries: 20,
                (Calendars follow) 
                
                (cut)
                
                module: "MMM-CalendarExt3Agenda", // https://github.com/MMRIZE/MMM-CalendarExt3Agenda
                position: "top_center",
                config: {
                	showMiniMonthCalendar: false,
                	instanceId: "basicCalendar",
                	firstDayOfWeek: 0,
                	startDayIndex: 0,
                	endDayIndex: 99,
                	minimalDaysOfNewYear: 1,
                	animationSpeed: 0,
                	useSymbol: false,
                	useWeather: false,
                	waitFetch: 0,
                	eventTransformer: (ev) => {
                		if (ev.title.search("⚾") > -1)
                		ev.title = ev.title.replace("⚾️ ","");
                		return ev
                	},
                },
                

                62172bd1-9a9c-4621-8e66-bae7c1055180-image.png

                @hogedir - please post your configuration and screenshots like this. You can blur if needed. Alternatively, if you want a daily repeating event for testing, feel free to use my test calendar - I’ll give you the iCal address in private.

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

                S 1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @BKeyport
                  last edited by

                  @BKeyport I introduced a bug in 2.20.

                  maximumentries includes those in the past incorrectly

                  you can set it differently for each cal, but if u don’t then the module level value will be used.

                  the bug is fixed in 2.21 coming oct 1.

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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

                    @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 Reply Quote 0
                    • S Offline
                      sdetweil @BKeyport
                      last edited by

                      @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

                        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
                                          • luisestradaL Offline
                                            luisestrada @hogedir
                                            last edited by

                                            @hogedir

                                            I edited the max-width value (50% to 100%) in .CX3A .cellBody .fullday .event and solved the issue

                                            1 Reply Last reply Reply Quote 0

                                            Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                            Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                            With your input, this post could be even better 💗

                                            Register Login
                                            • 1
                                            • 2
                                            • 8
                                            • 9
                                            • 10
                                            • 11
                                            • 12
                                            • 11 / 12
                                            • 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