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.4k 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.
    • M Offline
      mrdenmark @Guest
      last edited by

      @Sean
      thanks for that,
      i changed a few things in the screenshot below and another thing i can’t figure how to change is the current and upcoming views
      the first calender-dishwasher duty- only ever shows one name per day but it seems to have several slots reeserved for it, i tried changing maxslots and maxheight but it resulted in a +1 showing for the entry,its also a larger block size in height than the ones in the upcoming view below it,how can i reduce the size of both the slot and the black area below it?
      0_1573550715844_2019-11-12-221628_1080x1920_scrot.png
      here’s my config for the views-

       views: [
        {
          name: "Dishwasher Duty",
          mode: "current",
          slotTitle: "Dishwasher Duty",
          position: "top_left",
          maxitems: 1,
          hideOveflow: true,
          useEventTimeRelative: false,
          calendars: ["Dishwasher Duty"],
        },
      {
          name: "Todays Events",
          mode: "current",
          slotTitle: "Todays Events",
          position: "top_left",
          useEventTimeRelative: false,
          maxitems: 500,
          calendars: ["family", "Rubbish Collection", "Public Holiday"],
        },
      {
          name: "Upcoming Events",
          mode: "upcoming",
          slotTitle: "Upcoming Events",
          position: "top_left",
          maxitems: 500,
          useEventTimeRelative: false,
          calendars: ["family", "Rubbish Collection", "Public Holiday"],
        },
        {
          name: "My family affairs",
          mode: "week",
          position: "bottom_bar",
          maxitems: 500,
          calendars: ["family", "Rubbish Collection", "Public Holiday"],
        },
          ],
      
      ? 1 Reply Last reply Reply Quote 0
      • ? Offline
        A Former User @mrdenmark
        last edited by

        @mrdenmark
        0_1573551684210_0ac90f89-5d49-473d-b41c-204ecc041f14-image.png

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

          If I have same event in two calendars, can I use filter to filter out one of them? And if so, how is that done?

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

            @jani-karna
            It could not be easy if the events are totally random. But if there is a rule, it could be easier.

            For example, you have 2 calendars, “Tom” and “Jane” and there be duplicated events on both calendars and they have the same title - “coworking”.
            In that case, you can filter them from one calendar like this;

            calendars : [
              {
                name: "Tom",
                url: "...",
              },
              {
                name : "Jane",
                url: "...",
                filter: (event) => {
                  if (event.title.search("coworking") !== -1) {
                    return false
                  } else {
                    return true
                  }
                }
              },
            ],
            

            This code would remove the events which have title “coworking” from calendar “Jane”

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

              I am working my way through two issues. Icons are not showing up, and I cannot figure out how to set the maximum width. I have left the default icon from your example, as I can’t even get that to show.

              Additionally, there is some blank space underneath the calendar, I suspect I need to set a maximum height to allow for only two events to show. Am I on the right track?

              I am also stripping out the details of events so they will not be shown. Real Estate is at a premium, and I am trying to limit this to a specific width (I don’t know that number yet, but I like the default width chosen before any events with long titles extends it), and only the next two events on the calendar.

              {
              				name: "All Sports",
              				title: " ",
              				mode: "upcoming",
              				position: "bottom_right",
              				locale: "en",
              				maxItems: 2,
              				filterPassedEvent: false,
              				timeFormat: "h:mm A",
              				calendars: ["Sports"],
              				useEventTimeRelative: false,
              				transform: (event)=>
              				{
                					if (event.title.search("UConn Men") > -1) 
              					{ // If the event might include "Birthday" in its title,
                  						event.icon = "fxemoji-birthdaycake" // Set icon of that event to "fxemoji-birthdaycake"
                					}
                					return event // Return that event.
              				},
              				transform: (event)=>
              				{
              					event.description = ""
              					return event
              				}
              			},
              			],
              			calendars: [
              			{	
              				name: "Sports",
              				url: "http://p25-caldav.icloud.com/published/2/MTkzMDY3NDkxMTkzMDY3NGCona3XQzhU1KfnWRGk8hK-bMw1Mvd4dCQ3Yp9tNU5USCACQcqmSFeSa3bQfVEyYrzVqH2TVzgLBXzPKzs1MtM",
              			},
              
              ? 1 Reply Last reply Reply Quote 0
              • ? Offline
                A Former User @feverlabs
                last edited by

                @feverlabs
                You made some wrongs.

                1. you’ve defined transform twice, so only the last will be executed. (That’s why your birthday cake icon is not shown)
                2. The better way to remove details of agenda(upcoming/current) view is using CSS. add this into your css/custom.css
                .CX2 .agenda .eventSub {
                  display:none;
                }
                
                1. To remove beneath area, use hideOverflow:false. Sorry for confusing. slotMaxHeight is somehow confusing naming. It really set the fixed height. It has only a sense onhideOverflow:true.

                0_1573570244672_1.png

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

                  @Sean I think the blank space at the bottom is better.
                  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?

                  After making those changes, the event details show again.

                  ? 1 Reply Last reply Reply Quote 0
                  • ? 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
                        • 1
                        • 2
                        • 8
                        • 9
                        • 10
                        • 11
                        • 12
                        • 48
                        • 49
                        • 10 / 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