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 827.7k 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

      @feverlabs

      The icons now show, so that’s great. Do you have a link to a list of the names of icons available in the set?

      https://iconify.design/icon-sets/

      After making those changes, the event details show again.

      add this into your css/custom.css

      .CX2 .agenda .eventSub {
        display:none;
      }
      
      F 1 Reply Last reply Reply Quote 0
      • F Offline
        feverlabs @Guest
        last edited by

        @Sean Sorry, I should have been more clear. I added that code into the custom css, but I just found an errant closing brace. Thanks.

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

        Thank you!

        F ? 2 Replies Last reply Reply Quote 0
        • F Offline
          feverlabs @feverlabs
          last edited by

          @feverlabs I think it would be this in custom css:

          .CX2 .agenda .event {
            max-width:var(--column-max-width);
          }
          
          1 Reply Last reply Reply Quote 0
          • ? 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
                        • 1
                        • 2
                        • 9
                        • 10
                        • 11
                        • 12
                        • 13
                        • 48
                        • 49
                        • 11 / 49
                        • 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