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-CalendarExt2

    Scheduled Pinned Locked Moved Utilities
    486 Posts 83 Posters 942.3k Views 83 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 @feverlabs
      last edited by A Former User

      @feverlabs

      Final part: how can I set the width on this?
      Also, should I use a custom class for it?

      You can globally control the basic size metric with this; (Hmmm. I think you’d better first read the GitHub wiki about this topic)
      https://github.com/eouia/MMM-CalendarExt2/wiki/4.-Styling

      .CX2 { /* default values which are used frequently or dependently */
        --row-min-width: 100px;
        --row-max-width: 1000px;
        --column-min-width: 300px;
        --column-max-width: 400px;
        --font-size: 16px;
      }
      

      For the specific view, you can set className to a specific view, then can control it in css.
      0_1573573667107_12.png
      then, in your css/custom.css
      0_1573575057068_dbf8902e-7cd4-4b39-8fd3-0b1fe765413b-image.png
      Will show like this; Only specific view has different width;
      0_1573573814352_4c73a78d-1ff5-4d27-b976-d1c649c102c3-image.png

      But CSS is not so simple how it looks like, so when you modify something, you might need much experience and knowledge.

      F 1 Reply Last reply Reply Quote 0
      • F Offline
        feverlabs @Guest
        last edited by

        @Sean Yes, thank you. I made the following change in custom css:

        .CX2 .agenda .event {
            max-width:290px;
        }
        

        This mad ether changes I was looking for. I’ll modify and try your solution as well as implement a class for it.

        Is there a bottom padding that is specified? I don’t see much for padding in there, but I can experiment.

        Thank you for your help.

        ? 1 Reply Last reply Reply Quote 0
        • ? Offline
          A Former User @feverlabs
          last edited by

          @feverlabs
          exactly, what kind of bottom? Image will be a help to understand.

          F 1 Reply Last reply Reply Quote 0
          • F Offline
            feverlabs @Guest
            last edited by

            @Sean 0_1573575221896_IMG_0815.jpg

            I am just looking to reduce that space on the bottom. Not entirely eliminate it, but reduce it.

            You’ll also notice that the start time is in 24h format, the end time is in 12h?

            ? 1 Reply Last reply Reply Quote 0
            • ? Offline
              A Former User @feverlabs
              last edited by

              @feverlabs

              1. Some footer is reserved for displaying counter of hidden events. (e.g: +1)

              0_1573575715716_0f8edb0d-1b98-4922-8a86-07ff268d01a9-image.png
              The red area is slotFooter, so you can control it like this;

              .CX2 .mySpecificView .slot .slotFooter {
                display:none;
              }
              
              1. For the time format;
                Read this first;
                https://github.com/eouia/MMM-CalendarExt2/wiki/Event-Time

              With your previous config, you’ve set timeFormat: h:mm A, but there be more. :D
              Upcoming view is somewhat different with other views(e.g: daily view), so the events need date and time together.

              Usual format in upcoming view is something like this;

              • If the event starts on a specific day and ends on the same day, it would be good to show like this;
                start date/time - end time
              • If the event starts on a specific day and ends on the other day, it would be;
                start date/time - end date/time
              • If the event is a fullday event and starts/ends in a day;
                start date
              • If the event is a fullday event and ends in another day;
                start date - end date
                And those could be combined with relative format, humanized calendar format, … :) Looks so complex!

              Anyway, so, you need to set dateFormat and dateTimeFormat also with timeFormat

              Set like this;

              dateTimeFormat: {
                sameDay: "[Today] h:mm A",
                nextDay: "[Tomorrow] h:mm A",
                nextWeek: "dddd h:mm A",
                lastDay: "[Yesterday] h:mm A",
                lastWeek: "[Last] ddd h:mm A",
                sameElse: "M/D h:mm A"
              },
              

              Or simply like this;

              dateTimeFormat:"M/D h:mm A",
              

              It will show like this;

              0_1573576793472_8cc3d7d7-0c34-45fd-b351-9517ef4c8e44-image.png

              Or
              0_1573576855898_3347e690-afae-42de-b709-306d8ab893e0-image.png

              F 1 Reply Last reply Reply Quote 0
              • F Offline
                feverlabs @Guest
                last edited by

                @Sean Beautiful! Thank you very much!

                1 Reply Last reply Reply Quote 0
                • J Offline
                  jani.karna
                  last edited by

                  I’m trying to use local .ics file for two of my calendars. They are holiday calendars that stay the same throughout the year so they don’t need to be fetched from the web. I just can’t get them to work.
                  I get the same error message on both of them:

                  [CALEXT2] calendar: Suomen juhlapyhät >> write EPROTO 1936543760:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:../../vendor/node/deps/openssl/openssl/ssl/record/ssl3:record.c:252:
                  

                  My url looks like this:

                  url: "https://192.168.1.187:8080/Pyhat.ics",
                  

                  I tried using

                  localhost:8080
                  

                  but it tried to force 127.0.0.1 which don’t work.

                  ? 1 Reply Last reply Reply Quote 0
                  • ? Offline
                    A Former User @jani.karna
                    last edited by A Former User

                    @jani-karna
                    Well, it’s not the issue of my module, anyway…
                    It seems, your RPI is not available to handle SSL of itself.
                    Can you open “https://192.168.1.187:8080/Pyhat.ics” or “https://localhost:8080/Pyhat.ics” on the browser of your RPI when MM is running?
                    Try “http” instead of “https”

                    1 Reply Last reply Reply Quote 0
                    • J Offline
                      jani.karna
                      last edited by

                      Have to see if the problem comes back after RPI reinstall. It seems my SD-card just came to the end of its life.

                      1 Reply Last reply Reply Quote 0
                      • J Offline
                        jani.karna
                        last edited by

                        I finally had a chance trying this. By trying “https://192.168.1.187:8080/Pyhat.ics” with browser while MM is running I get “ERR_SSL_PROTOCOL_ERROR”. I have no idea how to solve this. “Localhost” gives a little different error, but so does MM. But neither of them work. I know it is not about your module, but if you have any suggestions I’d be glad to hear.

                        ? 2 Replies Last reply Reply Quote 0
                        • ? Offline
                          A Former User @jani.karna
                          last edited by

                          @jani-karna
                          try http instead of https

                          1 Reply Last reply Reply Quote 0
                          • ? Offline
                            A Former User @jani.karna
                            last edited by

                            @jani-karna
                            put your ical file into ~/MagicMirror/modules/MMM-CalendarExt2 then, try to use this URL;
                            http://localhost:8080/modules/MMM-CalendarExt2/Pyhat.ics

                            1 Reply Last reply Reply Quote 0
                            • J Offline
                              jani.karna
                              last edited by

                              @Sean said in MMM-CalendarExt2:

                              http://localhost:8080/modules/MMM-CalendarExt2/Pyhat.ics

                              For some reason “localhost” tries to use 127.0.0.1 which gives error, but I tried “http://192.168.1.187:8080/modules/MMM-CalendarExt2/Pyhat.ics” and that worked! Thank you!

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

                                Hey, Just started using this module, and today’s update blew up everything… It and MMM-CalendarExtMinimonth fails now.

                                Am I doing something wrong?

                                		{
                                			module: 'MMM-CalendarExt2',
                                				config: {
                                					calendars : [
                                						{
                                							url: "https://calendar.google.com/calendar/ical/mycalendar/info/basic.ics",
                                							name: "Main Calendar", // Optional, Recommended
                                							maxItems: 100,
                                							scanInterval: 1000*60*1, // 1000*Seconds*minutes
                                							beforeDays: 0,
                                							afterDays: 999,
                                							maxIterations: 100,
                                							forceLocalTZ: false,
                                						},
                                					],
                                					views: [
                                						{
                                							mode: "daily",
                                							position: "top_center",
                                							slotCount: 20,
                                						},
                                					],
                                					scenes: [
                                						{
                                							name: "DEFAULT",
                                						},
                                					],
                                				},
                                		},
                                		{
                                			module: "MMM-CalendarExtMinimonth",
                                			position: "bottom_right",
                                			refreshInterval: 60*2.5*1000,
                                		},
                                

                                Thanks!

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

                                ? 1 Reply Last reply Reply Quote 0
                                • ? Offline
                                  A Former User @BKeyport
                                  last edited by

                                  @BKeyport
                                  Sorry, Yesterday I fixed something but it made another bug. I fixed it now.

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

                                    Thanks, that fixed it.

                                    The only thing I can’t figure out then is massive space between the end of the previous day’s activities, and the next day.

                                    0_1573905177911_Capture.PNG

                                    Is there a way to solve this? Loving it otherwise.

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

                                    ? 1 Reply Last reply Reply Quote 0
                                    • ? Offline
                                      A Former User @BKeyport
                                      last edited by

                                      @BKeyport
                                      Controll that margin with hideOverflow and slotMaxHeight .
                                      https://github.com/eouia/MMM-CalendarExt2/wiki/2c.-Configuration:View

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

                                        Hello,
                                        I’m really satisfied with this module. Thank you.
                                        Although, I’m facing an issue. I want to display two calendars in the same view and same scene. The calendars just won’t show. It works individually but not together.

                                        Replace My URL with the original url. Sorry for the indentations.

                                        My config:

                                        {
                                        module: 'MMM-CalendarExt2',
                                        config: {
                                        calendars: [
                                        {
                                        name: "Regular",
                                        url: "My URL",
                                        },
                                        {
                                        name: "University",
                                        url: "my URL",
                                        },
                                        ],
                                        views: [
                                        {
                                        title: "Calendar",
                                        mode: "daily", fromNow:2, slotCount:2,
                                        type: "row",
                                        position: "upper_third",
                                        calendars: ["Regular", "University"],
                                        },
                                        ],
                                        scenes: [
                                        {
                                        name: "DEFAULT",
                                        },
                                        ],
                                        },
                                        },
                                        

                                        My CSS:

                                        body {
                                         
                                         }
                                         
                                        /* .CX2 .slot .event {
                                        background: inherit;
                                         }*/
                                         
                                         .CX2 .slot .slotHeader {
                                        background-color: inherit;
                                        text-transform: uppercase;
                                        font-size: 12px;
                                        font-family: "Roboto Condensed", Arial, helvetica, sans-serif;
                                        font-weight: 400;
                                        color: #999;
                                         }
                                        
                                        .CX2 .event[data-calendar-name="Regular"] {
                                        border-left: #0098e9 solid;
                                        }
                                        
                                        .CX2 .event[data-calendar-name="University"] {
                                        border-left: #60bb41 solid;
                                        }
                                        
                                        ? 1 Reply Last reply Reply Quote 0
                                        • M Offline
                                          mrmagoo_83
                                          last edited by

                                          Don’t you need to call out the view name the scene?

                                          1 Reply Last reply Reply Quote 0
                                          • ? Offline
                                            A Former User @Mariba
                                            last edited by

                                            @Mariba
                                            Well, I haven’t inspected your code yet, but most of the cases, it would be maxItems issue of view. For the performance, default maxItems of view is set to 100. If your calendars might have many events, set that option to a bigger value. You can estimate the number needed with your serverside log.

                                            M 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
                                            • 3
                                            • 4
                                            • 5
                                            • 6
                                            • 7
                                            • 8
                                            • 24
                                            • 25
                                            • 6 / 25
                                            • 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