MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

Standard calendar Determine text alignment



  • Hey guys.

    Today I experimented a little with the standard calendar for a simple overview. So far I am satisfied. However, the text alignment bothers me a bit, as you can see in the picture. Is it possible to adjust this via the css?!
    Calendar 1 and 2 looks good
    The eventtitel and Symbol from calendar 3 is to much right
    Eventtitel From 4 and 5 ist right alignment, but would Look better if its left

    0_1577648082866_IMG_20191229_203356.jpg



  • @Clubjack so, how did you do 5 calendars?

    affects how to fix them
    left edge of 2 looks too far left compared to 1

    show the config.js



  • Hey.
    Here is the config from the first an second calendar. the others are created same way

    {
                            module: "calendar",
                            header: "Test1",
                            position: "top_left",
                            config: {
                                    maximumEntries: "7",
                                    timeFormat: "absolute",
                                    urgency: 1,
                                    getRelative: 12,
                                    fullDayEventDateFormat: "DD.MMM",
                                    dateFormat: "DD.MMM HH:mm",
                                    calendars: [
                                            {
                                                    symbol: "toolbox",
                                                    url: "https://calendar.google.com/calendar/ical/.../basic.ics"   }
                                    ]
                            }                                                                                                                                                                                            },
                    {
                            module: "calendar",
                            header: "Test2",
                            position: "top_left",
                            config: {
                                    maximumEntries: "7",
                                    timeFormat: "absolute",
                                    urgency: 1,
                                    getRelative: 12,
                                    fullDayEventDateFormat: "DD.MMM",
                                    dateFormat: "DD.MMM HH:mm",
                                    calendars: [
                                            {
                                                    symbol: "calendar-check",
                                                    url: "https://calendar.google.com/calendar/ical/.../basic.ics"   }
                                    ]
                            }
                    },
    ......
    


  • @Clubjack said in Standard calendar Determine text alignment:

                        position: "top_left",
    

    and the other positions?

    top_right?

    do you have any custom.css entries?



  • @sdetweil
    Oh yes.
    Calendar 4 an 5 are with the same settings, only Position is top_right.

    I have an entry in custom.css, but without the entry it is the same alignment.

     body {
    
     }
    
    .MMM-DarkSkyForecast .module-content {
            width: 550px;
    }
    .calendar .module-content {
            width: 550px;
    }
    


  • @Clubjack right, .module-content doesn’t mean anything

    U are lucky most modules don’t support multiple instances like that.

    My ‘guess’ is that there is some padding wrap in front of the tables for the calendar.

    I would use the developers window, elements tab, to explore the css tree for each.

    Note that because they are the same module name, one css entry will affect all of them



  • What Do You mean with “developers window, elements Tab”? Where can i find it?



  • @sdetweil
    Hey…
    I tried something.
    If one of the displayed event titles (calendar 3) gets longer, then the alignment fits.
    This means that the calendar symbol and the event title align together.
    It would be better if the calendar symbol were always aligned to the left and the event title follows it.



  • @Clubjack said in Standard calendar Determine text alignment:

    What Do You mean with “developers window,

    the developers window is opened with

    keyboard = ctrl-shift-i (its a toggle, once, its on… next time its off)
    at startup time = npm start dev

    note that if you use a windows machine for development and a pi to display, you can ALSO display on your windows box, by going to http://pi_address:port (the config.js has to allow any system to connect so whitelist=[], and address= “”)
    and then use the dev window THERE



  • @sdetweil
    Hey…
    In the meantime I managed to align everything. Via the custom.css.
    Now I installed the MMM-GoogleTasks module according to the instructions and inserted my API ID.
    Then I restarted the MM and since then I only have a black screen in a window called electron.
    I hope I don’t have to set everything up now. My brain is starting to smoke.


Log in to reply