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

Scheduled Pinned Locked Moved Utilities
486 Posts 83 Posters 678.6k 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 Nov 12, 2019, 3:26 PM

    @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 Nov 12, 2019, 3:31 PM Reply Quote 0
    • F Offline
      feverlabs @Guest
      last edited by Nov 12, 2019, 3:31 PM

      @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 Nov 12, 2019, 3:46 PM Reply Quote 0
      • F Offline
        feverlabs @feverlabs
        last edited by Nov 12, 2019, 3:46 PM

        @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 Nov 12, 2019, 4:11 PM Nov 12, 2019, 3:51 PM

          @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 Nov 12, 2019, 3:57 PM Reply Quote 0
          • F Offline
            feverlabs @Guest
            last edited by Nov 12, 2019, 3:57 PM

            @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 Nov 12, 2019, 3:58 PM Reply Quote 0
            • ? Offline
              A Former User @feverlabs
              last edited by Nov 12, 2019, 3:58 PM

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

              F 1 Reply Last reply Nov 12, 2019, 4:14 PM Reply Quote 0
              • F Offline
                feverlabs @Guest
                last edited by Nov 12, 2019, 4:14 PM

                @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 Nov 12, 2019, 4:41 PM Reply Quote 0
                • ? Offline
                  A Former User @feverlabs
                  last edited by Nov 12, 2019, 4:41 PM

                  @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 Nov 12, 2019, 4:51 PM Reply Quote 0
                  • F Offline
                    feverlabs @Guest
                    last edited by Nov 12, 2019, 4:51 PM

                    @Sean Beautiful! Thank you very much!

                    1 Reply Last reply Reply Quote 0
                    • J Offline
                      jani.karna
                      last edited by Nov 13, 2019, 10:43 AM

                      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 Nov 13, 2019, 11:55 AM Reply Quote 0
                      • 1
                      • 2
                      • 9
                      • 10
                      • 11
                      • 12
                      • 13
                      • 48
                      • 49
                      • 11 / 49
                      11 / 49
                      • First post
                        105/486
                        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