MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.24.0 is available! For more information about this release, check out this topic.

    Different calendars result in different layouts!?

    Custom CSS
    2
    6
    317
    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.
    • W
      wmx last edited by

      Hi there,
      I’m not shure if this is really a css topic, so feel free to move it to a better place if neccessary.
      Just running my first complete build up new MM as my wife wished. 🙂 (picture will follow)
      Now try some tests with the setup of selected modules. I included the default calendar module in different regions with different calendars. The problem is, their layouts differ and I don’t understand why.
      I build up an example setup to show the problem.

      MM_calendar_layouts.jpg
      You see the two upper calendars have different layouts, but I think, their config ist the same, isn’t it?

      Here the config for the scrennshot

      var config = {
      	timeFormat: 24,
      
      	modules: [
      
      /********************** 
       *	TOP_BAR
       **********************/
      		{
      			module: "calendar",
      			header: "Ferien Hessen",
      			position: "top_bar",
      			config: {
      				tableClass: "medium",
      				colored: true,
      				fetchInterval: 60000,
      				fullDayEventDateFormat: "dd DD. MMM",
      				timeFormat: "absolute",
      				urgency: 0,
      				getRelative: 0,
      				maximumEntries: 2,
      				maxTitleLength: 50,
      				showEnd: true,
      				dateEndFormat: "dd DD. MMM",
      				calendars: [
      					{
      						// Ferien Hessen 2020
      						symbol: "democrat",
      						color: "#ffaaaa",
      						url: "https://www.ferienwiki.de/exports/ferien/2020/de/hessen"
      					},
      				]
      			}
      		},
      		{
      			module: "calendar",
      			header: "Kalender Silke + Dirk",
      			position: "top_bar",
      			config: {
      				tableClass: "medium",
      				colored: true,
      				coloredSymbolOnly: true,
      				fetchInterval: 60000,
      				dateFormat: "dd DD. MMM HH:mm",
      				fullDayEventDateFormat: "dd DD. MMM",
      				timeFormat: "absolute",
      				urgency: 0,
      				getRelative: 0,
      				maximumNumberOfDays: 30,
      				maximumEntries: 2,
      				maxTitleLength: 50,
      				excludedEvents: [ 
      					"Geb.",
      					"Geburtstag ",
      					" Geburtstag"
      //					{filterBy: "Geb."},
      				],
      				calendars: [
      					{
      						// Dirk
      						symbol: "calendar",
      						color: "#006600",
      						url: "https://www.ferienwiki.de/exports/ferien/2020/de/hessen"
      					},
      				]
      			}
      		},
      
      /********************** 
       *	TOP_LEFT
       **********************/
      		{
      			module: "calendar",
      			header: "Geburtstage",
      			position: "top_left",
      			config: {
      				tableClass: "medium",
      				colored: true,
      				coloredSymbolOnly: true,
      				fetchInterval: 60000,
      				nextDaysRelative: false,
      				fullDayEventDateFormat: "ddd DD. MMM",
      				timeFormat: "absolute",
      				urgency: 0,
      				getRelative: 0,
      				maximumEntries: 2,
      				maximumNumberOfDays: 30,
      				calendars: [
      					{
      						// Geburtstage
      						symbol: "birthday-cake",
      						color: "#5522aa",
      						url: "https://www.ferienwiki.de/exports/ferien/2020/de/hessen",
      					},
      				]
      			}
      		},
      		{
      			module: "calendar",
      			header: "Müllabfuhr2",
      			position: "top_left",
      			config: {
      				tableClass: "medium",
      				colored: true,
      				fetchInterval: 60000,
      				nextDaysRelative: false,
      				fullDayEventDateFormat: "ddd DD. MMM",
      				timeFormat: "absolute",
      				urgency: 0,
      				getRelative: 0,
      				maximumNumberOfDays: 8,
      				maximumEntries: 2,
      				fadePoint: 0.3,
      				calendars: [
      					{
      						// Müllabfuhr
      						symbol: "trash-alt",
      						color: "#FF6A00",
      						url: "https://www.ferienwiki.de/exports/ferien/2020/de/hessen",
      					},
      				]
      			}
      		},
      
      /********************** 
       *	TOP_RIGHT
       **********************/
      		{
      			module: "calendar",
      			header: "Müllabfuhr",
      			position: "top_right",
      			config: {
      				tableClass: "medium",
      				colored: true,
      				fetchInterval: 60000,
      				nextDaysRelative: false,
      				fullDayEventDateFormat: "ddd DD. MMM",
      				timeFormat: "absolute",
      				urgency: 0,
      				getRelative: 0,
      				maximumNumberOfDays: 8,
      				maximumEntries: 2,
      				fadePoint: 0.3,
      				calendars: [
      					{
      						// Müllabfuhr
      						symbol: "trash-alt",
      						color: "#FF6A00",
      						url: "https://www.ferienwiki.de/exports/ferien/2020/de/hessen",
      					},
      				]
      			}
      		},
      		{
      			module: "calendar",
      			header: "Geburtstage2",
      			position: "top_right",
      			config: {
      				tableClass: "medium",
      				colored: true,
      				coloredSymbolOnly: true,
      				fetchInterval: 60000,
      				nextDaysRelative: false,
      				fullDayEventDateFormat: "ddd DD. MMM",
      				timeFormat: "absolute",
      				urgency: 0,
      				getRelative: 0,
      				maximumEntries: 2,
      				maximumNumberOfDays: 30,
      				calendars: [
      					{
      						// Geburtstage
      						symbol: "birthday-cake",
      						color: "#5522aa",
      						url: "https://www.ferienwiki.de/exports/ferien/2020/de/hessen",
      					},
      				]
      			}
      		},
      	]
      };
      

      Is the config responsible for this layout? Or the calendar connected?
      For all calendars I Wish the icon to be aligned left, followed by the text and the date (the third column) aligned right the same way.
      How do I get this done?
      Every help is welcome.

      Regards

      S 1 Reply Last reply Reply Quote 0
      • S
        sdetweil @wmx last edited by

        @wmx remember that top bar is all the way across the screen, while left and right are not

        Sam

        Create a working config
        How to add modules

        S 1 Reply Last reply Reply Quote 0
        • S
          sdetweil @sdetweil last edited by sdetweil

          @wmx so you have two stacked, all the way across, title centered, content left/right aligned (in area)

          .region.bar {
            width: 100%;
            text-align: center;
          }
          

          two stacked, title left text aligned , content left/right aligned (in area)

          top-center is not used

          and two stacked, title right text aligned, content left/right aligned (in area)

          each calendar creates an HTML table

          Sam

          Create a working config
          How to add modules

          W 1 Reply Last reply Reply Quote 0
          • W
            wmx @sdetweil last edited by wmx

            @sdetweil said in Different calendars result in different layouts!?:

            .region.bar {
            width: 100%;
            text-align: center;
            }

            If I add this css snippet to custom.css nothing changes!?

            Is there a way to format each column in each calendar (table) with css?
            How do I address one single calendar with css?

            S 2 Replies Last reply Reply Quote 0
            • S
              sdetweil @wmx last edited by

              @wmx I was showing that top bar goes all the way across 100%
              that is the existing css

              Sam

              Create a working config
              How to add modules

              1 Reply Last reply Reply Quote 0
              • S
                sdetweil @wmx last edited by sdetweil

                @wmx I do not know how to target one calendar.

                yes there are ways to target specific elements in specific spot in the dom tree. I have to search for it every time.

                Sam

                Create a working config
                How to add modules

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • First post
                  Last post
                Enjoying MagicMirror? Please consider a donation!
                MagicMirror created by Michael Teeuw.
                Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy