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;
}