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.

    Calendar Font Size

    Scheduled Pinned Locked Moved Custom CSS
    13 Posts 2 Posters 10.7k Views 2 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.
    • justjim1220J Offline
      justjim1220 Module Developer @DerOptiker86
      last edited by

      @deroptiker86

      Like this…

      .calendar {
       width: 375px;
      font-size: 2em;
      line-height: 2.5em;
      }
      

      OR…

      .calendar {
       width: 375px;
      font-size: 35px;
      line-height: 40px;
      }
      

      And you are missing the ‘;’ after ‘width: 375px’

      "Life's Too Short To Dance With Ugly People"
      Jim Hallock - 1995

      1 Reply Last reply Reply Quote 0
      • D Offline
        DerOptiker86
        last edited by

        :/ hmmmm ok i add the lines…
        then change the px… and restart and it still looks like the same… thats crazy…0_1533059358493_mm screen.jpg

        justjim1220J 1 Reply Last reply Reply Quote 0
        • justjim1220J Offline
          justjim1220 Module Developer @DerOptiker86
          last edited by

          @deroptiker86

          Hmmm, let me play with it on my end.
          I’ll be right back in a few minutes.

          "Life's Too Short To Dance With Ugly People"
          Jim Hallock - 1995

          1 Reply Last reply Reply Quote 0
          • D Offline
            DerOptiker86
            last edited by

            nice thx!

            
            .calendar .time {
              padding-left: 30px;
              text-align: right;
              vertical-align: top;
            }
            
            .calendar {
             width: 375px;
             font-size: 200px;
             line-height: 40px;
            }
            
            
            

            i also drop my cofig.js here… maybe thats my fault:

              language: "de",
                    timeFormat: 24,
                    units: "metric",
            
                    modules: [
                            {
                                    module: "alert",
                            },
                            {
                                    module: "updatenotification",
                                    position: "top_bar"
                            },
                            {
                                    module: "clock",
                                    position: "top_left"
                            },
                            {
                                    module: "calendar",
                                    header: "Icloud Calender",
                                    position: "top_center",
                                    config: {
                                            calendars: [
                                                    {
                                                            symbol: "calendar-check-o ",
                                                            url:"webcal://pxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                                    }
                                            ]
                                    }
                            },
                            {
                                    module: 'MMM-NFL',
                                    position: 'left',
                                    config: {
                                            colored: true
                                    }
                            },
                            {
                                    module: 'MMM-NFL',
                                    position: 'right',
                                    config: {
                                            colored: true,
                                            focus_on: "NE"
                                    }
                            },
                            {
                                    module: "MMM-rain-forecast",
                                    position: "top_right",   // see mirror setting for options
                                    header: "Gibt es Regen",
                                    config: {
                                            lat: xxxx,
                                            lon: xxxxx,
                                            pleaseWait: "Bitte warten",
                                            noRainText: "Bis %s kein Regen",
                                            fillColour: '#0074d9'   // This is a blue color you can also use blue, cyan etc
                                    }
                            },
                            {
                                    module: 'mmm-moon-phases',
                                    header: 'Aktuelle Mondphase',   // optionally you can add a header to this block
                                    position: 'bottom_right',        // this can be any of the regions
                                    config: {
                                    }
                            },
                            {
                                    module: "weatherforecast",
            
            
            
            justjim1220J 2 Replies Last reply Reply Quote 0
            • justjim1220J Offline
              justjim1220 Module Developer @DerOptiker86
              last edited by justjim1220

              @DerOptiker86

              OK, add the following to your config.js…

              tableClass: "large",
              

              like this…

              {
                  module: "calendar",
                  header: "iCloud Calendar",
                  position: "top_center",
                  config: {
                      tableClass: "large",
              	calendars: [
              	    {
              	        symbol: "calendar-check-o ",
              		url: " "
              	    }
              	]
                  }
              },
              

              you can change a lot of the defaults in the config…

              defaults: {
              		maximumEntries: 10, // Total Maximum Entries
              		maximumNumberOfDays: 365,
              		displaySymbol: true,
              		defaultSymbol: "calendar-alt", // Fontawesome Symbol see http://fontawesome.io/cheatsheet/
              		displayRepeatingCountTitle: false,
              		defaultRepeatingCountTitle: "",
              		maxTitleLength: 50,
              		wrapEvents: false, // wrap events to multiple lines breaking at maxTitleLength
              		fetchInterval: 30 * 60 * 1000, // Update every 30 minutes.
              		animationSpeed: 2000,
              		fade: false,
              		urgency: 7,
              		timeFormat: "relative",
              		dateFormat: "MMM Do",
              		fullDayEventDateFormat: "MMM Do",
              		getRelative: 6,
              		fadePoint: 0.25, // Start on 1/4th of the list.
              		hidePrivate: false,
              		hideOngoing: false,
              		colored: true,
              		coloredSymbolOnly: true,
              		tableClass: "large",
              		calendars: [
              			{
              				symbol: "calendar",
              				url: "http://www.calendarlabs.com/templates/ical/US-Holidays.ics",
              			},
              		],
              		titleReplace: {
              			"De verjaardag van ": "",
              			"'s birthday": ""
              		},
              		broadcastEvents: true,
              		excludedEvents: []
              	},
              

              I hope this is what you’re looking for. :winking_face:

              "Life's Too Short To Dance With Ugly People"
              Jim Hallock - 1995

              1 Reply Last reply Reply Quote 0
              • D Offline
                DerOptiker86
                last edited by

                :rolling_on_the_floor_laughing: :rolling_on_the_floor_laughing: :rolling_on_the_floor_laughing:

                it works :face_with_tears_of_joy: :face_with_tears_of_joy:

                now i only must to fix the size :vulcan_salute_light_skin_tone:

                realy thank you for your fast help!!!

                :call_me_hand_medium-light_skin_tone:

                0_1533062604555_IMG_9845.JPG

                justjim1220J 1 Reply Last reply Reply Quote 1
                • justjim1220J Offline
                  justjim1220 Module Developer @DerOptiker86
                  last edited by

                  @DerOptiker86

                  And, you can remove this entry in your custom.css…

                  .calendar {
                   width: 375px;
                   font-size: 200px;
                   line-height: 40px;
                  }
                  

                  :upside-down_face:

                  "Life's Too Short To Dance With Ugly People"
                  Jim Hallock - 1995

                  1 Reply Last reply Reply Quote 0
                  • justjim1220J Offline
                    justjim1220 Module Developer @DerOptiker86
                    last edited by

                    @deroptiker86

                    Always glad to help out!

                    "Life's Too Short To Dance With Ugly People"
                    Jim Hallock - 1995

                    1 Reply Last reply Reply Quote 0
                    • 1
                    • 2
                    • 1 / 2
                    • 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