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

Default calender change Header position



  • Hey guys,

    i’m completly new in this world, but the possibilities are great.
    The modul default calendar is set with “top-right”, now the header is also at the right side of the modul.

    I search the .css and the calendar.js, but i couldn’t find the possibility to set header “margin:left” oder “float:left” wthatever.

    is would be very nice, if somebody could help me 😉

    /* Magic Mirror Config Sample
     *
     * By Michael Teeuw http://michaelteeuw.nl
     * MIT Licensed.
     *
     * For more information how you can configurate this file
     * See https://github.com/MichMich/MagicMirror#configuration
     *
     */
    
    var config = {
    	address: "localhost", // Address to listen on, can be:
    	                      // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
    	                      // - another specific IPv4/6 to listen on a specific interface
    	                      // - "", "0.0.0.0", "::" to listen on any interface
    	                      // Default, when address config is left out, is "localhost"
    	port: 8080,
    	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
    	                                                       // or add a specific IPv4 of 192.168.1.5 :
    	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
    	                                                       // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
    	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
    
    	language: "en",
    	timeFormat: 24,
    	units: "metric",
    
    	modules: [
    		{
    			module: "MMM-DigClock",
    			position: "top_right",	// This can be any of the regions.
    			config: {
    				showDate: true,
    				showWeek: false,
    				showSeconds: false,
    				dateFormat: "ddd, ll",
    				timezone: "Europe/Berlin"
    			}
    		},
    		{
    			module: "weatherforecast",
    			position: "top_right",
    			header: "WIE WIRD DAS WETTER?",
    			config: {
    				location: "yyyyyyyyy",
    				locationID: "yyyyyyy",  //ID from http://bulk.openweathermap.org/sample/; unzip the gz file and find your city
    				appid: "xxxxxxxx"
    			}
    		},
    		{
    			module: "calendar",
    			header: "Termine xxxxxxxx",
    			position: "top_right",
    			config: {
    				timeFormat: "absolute",
    				maximumEntries: "5",
    				maximumNumberOfDays: "365",
    				getRelative: 48,
    				calendars: [
    					{
    						symbol: "calendar-check",
    						url: "webcal://xxxxxxxxxxxxx"
    					}
    				]
    			}
    		},
    		{
    			module: "MMM-EasyPix",
    				position: "top_left",
    				config: {
    					picName: "vp_2.png", // Enter the picture file name.
    					maxWidth: "33%",        // Size picture precisely. Retains aspect ratio.
    					sounds: ["1.mp3", "me2.mp3"],  // mp3 sound file names in quotes seperated by commas for Hello-Lucy
    					updateInterval: 30 * 60 * 1000,     // updates display
    					animationSpeed: 3000,
    			}	
    		},
    		{
    			module: "MMM-EasyPix",
    				position: "top_center",
    				config: {
    					picName: "vp_2.png", // Enter the picture file name.
    					maxWidth: "66%",        // Size picture precisely. Retains aspect ratio.
    					sounds: ["1.mp3", "me2.mp3"],  // mp3 sound file names in quotes seperated by commas for Hello-Lucy
    					updateInterval: 30 * 60 * 1000,     // updates display
    					animationSpeed: 3000,
    			}	
    		},
    		{
    			module: "MMM-EARTH",
    			position: "bottom_right",
    			config: {
    				mode: "Natural",
    				rotateInterval: 15000,
    				MaxWidth: "35%",
    				MaxHeight: "35%",
    			}
    		},
    		{
    			module: "newsfeed",
    			position: "bottom_bar",
    			config: {
    				feeds: [
    					{
    						title: "Tagesschau",
    						url: "http://www.tagesschau.de/xml/rss2"
    					},
    					{
    						title: "Der Spiegel",
    						url: "http://www.spiegel.de/schlagzeilen/tops/index.rss"
    					},
    				],
    				showSourceTitle: true,
    				showPublishDate: true
    			}
    		},
    	]
    
    };
    
    /*************** DO NOT EDIT THE LINE BELOW ***************/
    if (typeof module !== "undefined") {module.exports = config;}
    
    


  • Try

    div.module.calendar header {
        
    }
    

    if that doesnt work, give me a few hours to get home and actually look at my custom.css file



  • where should i write this code?
    custom.css??

    actually she look like this (with your Command):

    
     body {
     	
    }
    
     div.module.calendar header {
        
    }	
    


  • ill get you the full code in a few hours…yes in custome css but you will also need to alight the text properly too.



  • sorry here was s the css code

    .calendar header {
     	text-align: center // Change this to whatever you want....right,center or left
    }
    


  • Thank you!

    i’ll try and give you feedback!