WIP: Add theming and month abbreviation

README.md

@@ -21,6 +21,7 @@ Some features of the calendar:
 - I don't like having long bars that span across multiple days for multi-day events, so I chose to display only the start and end dates for those events, and adding small left/right arrows accordingly,
 - Given limited space (oh why are large E-Ink screens still so expensive!) and resolution on the display, I could only show 3 events per day and an indicator (e.g. 4 more) for those not displayed 
 - The calendar always starts from the current week, and displays the next four (total 35 days). If the dates cross over to the new month, it's displayed in grey instead of black.
+- There are two different styles of the calendar: Light and dark
 
 ![MagInkCal Basics](https://user-images.githubusercontent.com/5581989/134775456-d6bacaca-03c7-4357-af28-7c06aa19ed90.png)
 
@@ -82,6 +83,11 @@ crontab -e
 
 PS: I'm aware that the instructions above may not be complete, especially when it comes to the Python libraries to be installed, so feel free to ping me if you noticed anything missing and I'll add it to the steps above.
 
+## Themes ##
+
+There are two different styles of the calendar: Light and dark.
+Just copy the files (.css/.png) out of `render/stlye_light`-folder or `render/style_dark`-folder and replace the existing in `render`-folder to switch between a dark and a light style of the calendar.
+
 ## Acknowledgements
 - [Quattrocento Font](https://fonts.google.com/specimen/Quattrocento): Font used for the calendar display
 - [Bootstrap Calendar CSS](https://bootstrapious.com/p/bootstrap-calendar): Stylesheet that was adapted heavily for the calendar display

config.json

@@ -13,6 +13,7 @@
   "imageHeight": 1304,
   "rotateAngle": 270,
   "is24h": false,
+  "isMonthAbbr": false,
   "calendars": [
     "primary"
   ]

maginkcal.py

@@ -39,6 +39,7 @@ def main():
     rotateAngle = config['rotateAngle']  # If image is rendered in portrait orientation, angle to rotate to fit screen
     calendars = config['calendars']  # Google calendar ids
     is24hour = config['is24h']  # set 24 hour time
+    isMonthAbbr = config['isMonthAbbr'] # Use month abbreviation like 'JAN' instead of month number '1'
 
     # Create and configure logger
     logging.basicConfig(filename="logfile.log", format='%(asctime)s %(levelname)s - %(message)s', filemode='a')
@@ -75,7 +76,7 @@ def main():
         calDict = {'events': eventList, 'calStartDate': calStartDate, 'today': currDate, 'lastRefresh': currDatetime,
                    'batteryLevel': currBatteryLevel, 'batteryDisplayMode': batteryDisplayMode,
                    'dayOfWeekText': dayOfWeekText, 'weekStartDay': weekStartDay, 'maxEventsPerDay': maxEventsPerDay,
-                   'is24hour': is24hour}
+                   'is24hour': is24hour, 'isMonthAbbr': isMonthAbbr}
 
         renderService = RenderHelper(imageWidth, imageHeight, rotateAngle)
         calBlackImage, calRedImage = renderService.process_inputs(calDict)

render/render.py

@@ -116,6 +116,7 @@ def process_inputs(self, calDict):
         dayOfWeekText = calDict['dayOfWeekText']
         weekStartDay = calDict['weekStartDay']
         is24hour = calDict['is24hour']
+        isMonthAbbr = calDict['isMonthAbbr']
 
         # for each item in the eventList, add them to the relevant day in our calendar list
         for event in calDict['events']:
@@ -132,7 +133,10 @@ def process_inputs(self, calDict):
             calendar_template = file.read()
 
         # Insert month header
-        month_name = str(calDict['today'].month)
+        if isMonthAbbr:
+            month_name = calendar.month_abbr[calDict['today'].month]
+        else:
+            month_name = str(calDict['today'].month)
 
         # Insert battery icon
         # batteryDisplayMode - 0: do not show / 1: always show / 2: show when battery is low

render/style_dark/styles.css

@@ -0,0 +1,261 @@
+/*
+*
+* ==========================================
+* CUSTOM UTIL CLASSES
+* ==========================================
+*
+*/
+.clearfix::after,
+
+:root {
+    --red: #dc3545;
+    --white: #fff;
+    --gray: #6c757d;
+    --gray-dark: #343a40;
+}
+
+.text-uppercase {
+    text-transform: uppercase!important;
+}
+
+.mb-0, .my-0 {
+    margin-top: 0;
+    margin-bottom: 0!important;
+}
+
+.p-3 {
+    padding: 1rem!important;
+}
+
+.text-center {
+    text-align: center!important;
+}
+
+.list-unstyled {
+    padding-left: 0;
+    list-style: none;
+}
+
+.font-weight-bold {
+    font-weight: 700!important;
+}
+
+.text-muted {
+    color: #6c757d!important;
+}
+
+dl, ol, ul {
+    margin-top: 0;
+    margin-bottom: 1rem;
+}
+
+body {
+    margin: 0;
+    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #000;
+    text-align: left;
+    background-color: #fff;
+}
+
+@font-face {
+    font-family: "Quattrocento-Bold";
+    src: url('Quattrocento-Bold.ttf');
+}
+
+@font-face {
+    font-family: "Quattrocento-Regular";
+    src: url('Quattrocento-Regular.ttf');
+}
+
+.container {
+    width: 100%;
+    padding: 0!important;
+    margin: 0!important;
+	color: #fff;
+    max-width: 984px;
+    height: 1304px;
+}
+*, ::after, ::before {
+    box-sizing: border-box;
+}
+.calendar ol::after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+/* ================
+Calendar Styling */
+.calendar {
+  border-radius: 0px;
+}
+
+.month {
+  font-size: 13rem;
+  font-family: "Quattrocento-Regular";
+}
+
+@media (min-width: 992px) {
+  .month {
+    font-size: 13rem;
+    line-height: 13rem;
+    font-family: "Quattrocento-Regular";
+  }
+}
+
+.calendar ol li {
+  float: left;
+  width: 14.28571%;
+}
+
+.calendar .day-names {
+  font-size: 3.5rem;
+  line-height: 1.2;
+  font-family: "Quattrocento-Regular";
+}
+
+.calendar .day-names li {
+  text-transform: uppercase;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+
+.calendar .days li {
+  /* min-height: 12rem; */
+  min-height: 11.5rem;
+}
+
+.calendar .days li .date {
+  margin: 0.5rem 0;
+  line-height: 1.0;
+}
+
+.calendar .date {
+  text-align: center;
+  font-size: 3rem;
+  font-weight: bold;
+  font-family: "Quattrocento-Regular";
+}
+
+.datecirclebox {
+    position: relative;
+}
+
+.datecircle {
+    margin: 0rem auto;
+    width:4rem;
+    height:4rem;
+    border-radius:2rem;
+    font-family: "Quattrocento-Regular";
+    font-size:3rem;
+    color:white;
+    line-height: 4rem;
+    text-align:center;
+    vertical-align: middle;
+    background:#ff0000;
+}
+
+.calendar .days li .event {
+  font-size: 1rem;
+  /* font-weight: bold;*/
+  padding: 0.1rem;
+  color: white;
+  /* font-family: "Judson-Regular";*/
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: 0rem;
+  margin-bottom: 1px;
+}
+
+.calendar .days li .event.span-2 {
+  width: 200%;
+}
+
+.text-multiday {
+  text-overflow: '...」'!important;
+}
+
+.calendar .days li .event.begin {
+  border-radius: 1rem 0 0 1rem;
+}
+
+.calendar .days li .event.end {
+  border-radius: 0 1rem 1rem 0;
+}
+
+.calendar .days li .event.clear {
+  background: none;
+}
+
+.calendar .days li:nth-child(n+29) {
+  border-bottom: none;
+}
+
+.calendar .days li.outside .date {
+  color: #ddd;
+}
+
+div.batt_container {
+  width: 53px;
+  height: 27px;
+  position: absolute;
+  top: 5;
+  left: 925;
+  overflow: hidden;
+}
+
+div.batt_container  {
+  z-index: 10;
+}
+
+div.batt_container .battery80 {
+  position: relative;
+  left: 0px;
+  top: 0px;
+}
+
+div.batt_container .battery60 {
+  position: relative;
+  left: 0px;
+  top: -44px;
+}
+
+div.batt_container .battery40 {
+  position: relative;
+  left: 0px;
+  top: -89px;
+}
+
+div.batt_container .battery20 {
+  position: relative;
+  left: 0px;
+  top: -134px;
+}
+
+div.batt_container .battery0 {
+  position: relative;
+  left: 0px;
+  top: -178px;
+}
+
+div.batt_container .batteryHide {
+    display: none;
+}
+
+/*
+*
+* ==========================================
+* FOR DEMO PURPOSES
+* ==========================================
+*
+*/
+body {
+  min-height: 100vh;
+  background-color: #ffffff;
+}