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

Scheduled Pinned Locked Moved Productivity
198 Posts 45 Posters 179.5k Views 45 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.
  • ? Offline
    A Former User @Vauxdvihl
    last edited by Oct 13, 2017, 1:15 PM

    @Vauxdvihl
    You can use like this;

    1. put your ical file (test.ics) to MMM-CalendarExt directory
    2. Use this url. http://localhost:8080/modules/MMM-CalendarExt/test.ics

    It works.

    1 Reply Last reply Reply Quote 1
    • V Offline
      Vauxdvihl
      last edited by Vauxdvihl Oct 13, 2017, 9:03 PM Oct 13, 2017, 9:03 PM

      Thanks a lot
      Both works

      I have a few more questions

      3.)
      Having the month view, it displays me 6 weeks (2 old ones)
      Is there a “screw” where i can change it
      Display “only” 4 weeks and no “old” one

      4.)
      Can i overrite dates and make them to “complete day meetings” (like in your example “Hausmüll”)
      Here in me ical is it a entry from 10 to 11 and in the view “upcoming” there is an entry in the calendar which is viewn as [object Object] ==> Also i want to save some space with a complete date entry

      5.)
      Is there a possibility instead of using symbols to use names?
      Like “Mama” or “Papa”…

      Thanks a lot

      ? 1 Reply Last reply Oct 13, 2017, 11:55 PM Reply Quote 0
      • ? Offline
        A Former User @Vauxdvihl
        last edited by Oct 13, 2017, 11:55 PM

        @Vauxdvihl

        3.)
        Having the month view, it displays me 6 weeks (2 old ones)
        Is there a “screw” where i can change it
        Display “only” 4 weeks and no “old” one

        What did you mean ‘screw’?
        Anyway month view cannot be done for that.
        But you can use ‘daily’ view for that purpose.(with ‘counts:28’) However some css adjusting might be needed for your mirror’s look.

        4.)
        Can i overrite dates and make them to “complete day meetings” (like in your example “Hausmüll”)
        Here in me ical is it a entry from 10 to 11 and in the view “upcoming” there is an entry in the calendar which is viewn as [object Object] ==> Also i want to save some space with a complete date entry

        Can you send me your ical file? I need to inspect.
        For fulldayevents, you should have created that events as fullday. Or you could modify event time from 00:00-24:00
        For saving space, see the wiki page. And some css technics would be help.

        5.)
        Is there a possibility instead of using symbols to use names?
        Like “Mama” or “Papa”…

        Well, I think you can prepend or append some text in specific style with css virtual selector(‘:before’).

        Sorry for my non-pragmatic answers.
        I’m not in front of device now, so I cannot make any real solution with real code. During weekends, I have no time for console works. I’ll check your questions again on Monday.

        1 Reply Last reply Reply Quote 0
        • V Offline
          Vauxdvihl
          last edited by Vauxdvihl Oct 14, 2017, 6:44 PM Oct 14, 2017, 6:42 PM

          3.)
          With a “screw” i mean something to adjust…no problem ok

          4.)
          Here u are…
          Seems to me i do not have the right to upload here something
          Here is some extract…
          STATUS:CONFIRMED
          END:VEVENT
          BEGIN:VEVENT
          DTSTART:20170201T080000Z
          DTEND:20170201T090000Z
          LOCATION;LANGUAGE=de:, 82343 POECKING
          TRANSP:OPAQUE
          SEQUENCE:0
          UID: 2171943
          DTSTAMP:20171014T081346Z
          DESCRIPTION;LANGUAGE=de:
          SUMMARY;LANGUAGE=de:Restmuelltonne
          PRIORITY:9
          CLASS:PUBLIC
          URL:
          STATUS:CONFIRMED
          END:VEVENT
          BEGIN:VEVENT
          DTSTART:20170215T080000Z
          DTEND:20170215T090000Z
          LOCATION;LANGUAGE=de:, 82343 POECKING
          TRANSP:OPAQUE
          SEQUENCE:0
          UID: 2171944
          DTSTAMP:20171014T081346Z
          DESCRIPTION;LANGUAGE=de:
          SUMMARY;LANGUAGE=de:Restmuelltonne
          PRIORITY:9
          CLASS:PUBLIC
          URL:

          5.)
          Ok,
          i will play a little bit

          Thanks

          ? 1 Reply Last reply Oct 16, 2017, 1:11 PM Reply Quote 0
          • Z Offline
            Zooooooom
            last edited by Oct 15, 2017, 5:21 AM

            Thank you for a great module! I second @Vauxdvihl about only wanting see the the current week, plus the next 3. Google calendar has that feature. Basically, a clone of the month view, but not starting from the 1st of the month, but from the first day of the current week.

            I tried doing what you suggested with using daily and 28 and it’s close to what I want. But I am only seeing 6 per row. What do I need to modify to make sure I am seeing 7 days?

            Also, is there a way to completely remove the icon and the space for it? I don’t see it in any on the defined styles. I would prefer to have a little more extra breathing room on my fairly narrow monitor.

            Again, thanks for a great module!

            ? 1 Reply Last reply Oct 15, 2017, 6:14 PM Reply Quote 0
            • ? Offline
              A Former User @Zooooooom
              last edited by Oct 15, 2017, 6:14 PM

              @Zooooooom I’ll provide some tricks for ‘next 28 days(7 per week) view’ on Monday. It needs some css tricks.
              Your other question also could be considered at that time.
              Thanks for using.

              1 Reply Last reply Reply Quote 1
              • ? Offline
                A Former User
                last edited by A Former User Oct 16, 2017, 7:59 AM Oct 16, 2017, 7:50 AM

                @Zooooooom @Vauxdvihl
                Here is some ‘next 28 days view’ sample.
                0_1508140047256_Magic_Mirror.jpg

                1. Open your css/custom.css and append these code;
                /* CSS adjusting for 28days view */
                
                /* hide unnecessary components */
                #CALEXT_daily .eventTime,
                #CALEXT_daily .eventLocation,
                #CALEXT_daily .symbol {
                  display:none;
                }
                
                /* smaller size for events */
                #CALEXT_daily .eventContent {
                  font-size:0.8em;
                  font-weight:normal;
                }
                
                /* makes "slot" 1/7 of 100% */
                #CALEXT_daily .slot {
                  max-width:13%;
                  flex-basis:13%;
                }
                
                /* smaller size for events */
                #CALEXT_daily .slot .header {
                  font-size:0.5em;
                  border-radius:0;
                  font-weight:normal;
                }
                
                /* add some style sample */
                #CALEXT_daily .style_custom2 {
                  background-color:rgba(255, 127, 255, 1.0);
                }
                
                /* add some additional content sample */
                #CALEXT_daily .style_custom2 .eventContent::before{
                  content: "[@]";
                }
                
                1. open your config.js, put these codes.
                {
                      module: 'MMM-CalendarExt',
                      position: "top_center", // ignore this.
                      config: {
                        system: {
                          show: ['daily'],
                          locale: 'en',
                        },
                        views: {
                          daily: {
                            position:'bottom_bar',
                            counts:28,
                            //overflowRolling:1,
                            //overflowHeight:50,
                          },
                        },
                        calendars :[
                          {
                            name: "bundesliga",
                            styleName: "style_custom1",
                            oneLineEvent: 1,
                            url: "webcal://www.google.com/calendar/ical/en5624jps9pfbtgsd7op2him0k%40group.calendar.google.com/public/basic.ics",
                          },
                          {
                            name: "DFB POKAL",
                            styleName: "style_custom2",
                            //oneLineEvent: 1,
                            url: "webcal://www.google.com/calendar/ical/0efdnrqt4c9qruabf7u33742ps%40group.calendar.google.com/public/basic.ics",
                          },
                          {
                            name: "Theater GRIPS",
                            styleName: "style_custom3",
                            oneLineEvent: 1,
                            url: "http://ical.grips-theater.de/grips.ics",
                          }
                        ],
                      }
                    },
                
                1. You can refer also https://github.com/eouia/MMM-CalendarExt/wiki/Manipulation-of-looks

                2. Main trick is

                /* makes "slot" 1/7 of 100% */
                #CALEXT_daily .slot {
                  max-width:13%;
                  flex-basis:13%;
                }
                

                You might need to adjust the value 13% to your circumstances. Because of margin and padding, 14% might not work.

                1. You can also consider overflow and oneLineEvent and titleReplace for saving spaces.

                Anyway, under 700px width, this could not work. That is too narrow to display 7 slots.

                N 1 Reply Last reply Feb 14, 2021, 4:02 AM Reply Quote 1
                • ? Offline
                  A Former User @Vauxdvihl
                  last edited by Oct 16, 2017, 1:11 PM

                  @Vauxdvihl said in MMM-CalendarExt:

                  BEGIN:VEVENT
                  DTSTART:20170201T080000Z
                  DTEND:20170201T090000Z
                  LOCATION;LANGUAGE=de:, 82343 POECKING
                  TRANSP:OPAQUE
                  SEQUENCE:0
                  UID: 2171943
                  DTSTAMP:20171014T081346Z
                  DESCRIPTION;LANGUAGE=de:
                  SUMMARY;LANGUAGE=de:Restmuelltonne
                  PRIORITY:9
                  CLASS:PUBLIC
                  URL:
                  STATUS:CONFIRMED
                  END:VEVENT

                  I found what’s wrong. you ical location format is slightly different with others.
                  I’ve committed hotfix for that. git pull again and re-run your mirror.

                  1 Reply Last reply Reply Quote 1
                  • ? Offline
                    A Former User
                    last edited by A Former User Oct 16, 2017, 6:20 PM Oct 16, 2017, 6:15 PM

                    @Zooooooom @Vauxdvihl

                    And I also added weeks view for your exact wish. pull new source and see the wiki.

                    So, you have two options.

                    28days view
                    vs
                    4weeks view.

                    both are slightly different. 28days always starts from today. 4weeks always starts from weekday(0) - Monday or Sunday - of this week.
                    Use anything you want.

                    Z 1 Reply Last reply Oct 17, 2017, 12:42 AM Reply Quote 1
                    • Z Offline
                      Zooooooom @Guest
                      last edited by Oct 17, 2017, 12:42 AM

                      @Sean Beautiful! Exactly what I wanted.

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 19
                      • 20
                      • 1 / 20
                      1 / 20
                      • First post
                        8/198
                        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