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