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

MMM-CalendarExt2



  • So I’ve taken the custom.css and config.js from the module and changed settings on it to fit my needs.

    I am trying to make it so the mode: “month”, view is smaller size. Like maybe I can put it somewhere on the top left and have it take a quarter of the screen. When I make it into month instead of daily it takes over the whole screen.

    How do I resize it?

    Here is my config.js

    	{
    		module: 'MMM-CalendarExt2',
    		config: {
    			rotateInterval: 90*1000,
    			scenes:[
    				{
    					name: "DEFAULT",
    					views: ["upcoming","Overview Private"],
    				},
    				{
    					name: "WorkMode",
    					views: ["upcoming","Overview Work"],
    				},
    			],
    			views:[
    				{
    					name: "upcoming",
    					mode: "upcoming",
    					position: "top_center",
    					maxItems: 5,
    					maxDays: 1,
    					locale: "en",
    					hideOverflow: false,
    					filterPassedEvent: true,
    					calendars: ["CUSTOMNAME"],
    				},
    				{
    					name: "Overview Private",
    					title: "Private Calendars",
    					mode: "daily",
    					type: "row",
    					position: "bottom_bar",
    					slotCount: 7,
    					weeks: 2,
    					locale: "en",
    					hideOverflow: false,
    					filterPassedEvent: false,
    					calendars: ["CUSTOMNAME"],
    				},
    				{
    					name: "Overview Work",
    					title: "Work Calendars",
    					mode: "daily",
    					type: "row",
    					position: "bottom_bar",
    					slotCount: 7,
    					locale: "en",
    					hideOverflow: false,
    					filterPassedEvent: false,
    					calendars: ["CUSTOMNAME"],
    				},
    			],
    			calendars: [
    				{
    					name: "CUSTOMNAME",
    					url: "#############",
    				},
    			],
    		},
    	},
    

    Here is the custom.css

    body {
    	margin: 10px;
    	height: calc(100% - 20px);
    	width: calc(100% - 30px);
    }
    .CX2 .agenda .eventSub {
    	display:none;
    }
    .CX2 .daily .fullday .eventTime {
    	display:none;
    }
    .CX2 .slot .event{
    	background: inherit;
    }
    .CX2 .slot .slotHeader{
    	background-color: inherit;
    	text-transform: uppercase;
    	font-size: 15px;
    	font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
    	font-weight: 400;
    	border-bottom: 1px solid #666;
    	line-height: 15px;
    	padding-bottom: 5px;
    	margin-bottom: 10px;
    	color: #999;
    }
    .CX2 .today .slotHeader * {
    	color: inherit;
    }
    .CX2 .event.fullday {
    	color: inherit;
    }
    .CX2 .slot .slotFooter {
    	display: none;
    }
    .CX2 .event[data-calendar-name="CUSTOMNAME"],
    .CX2 .event[data-calendar-name="CUSTOMNAME"] {
    	border-left: #ce4138 solid;
    }
    
    

  • Module Developer

    @k4z137
    What is your exact intent? If there be some sample image, it will help to guess.


Log in to reply