The calendar_monthly module is a simple month-view calendar created for the MagicMirror project by Michael Teeuw (https://github.com/MichMich/MagicMirror). The modules refreshes its timer every hour however it will only update the calendar display once a day, at midnight.

Clone this repository in your ~/MagicMirror/modules/ folder ( $ cd ~MagicMirror/modules/ ):

git clone https://github.com/KirAsh4/calendar_monthly

To use this module, add it to the modules array in the config/config.js file:

modules: [
			{
				module: 'calendar_monthly',
				position: 'top_left',
				config: {
						// The config property is optional
						// Without a config, a default month view is shown
						// Please see the 'Configuration Options' section for more information
				}
			}
]

The calendar_monthly module has several optional properties that can be used to change its behaviour:

The calendar_monthly module creates a table that contains the various elements of the calendar. Most of the relevant elements are tagges with either a class or id making it possible for anyone to make changes to the default styling.

The full element tree is as follows:

<table id="calendar-table">
  <thead>
    <tr>
	  <th id="calendar-th">
	    <span id="monthName">[month name]</span>
		<span id="yearDigits">[4 digit year]</span>
	  </th>
	</tr>
  </thead>
  
  <tfoot>
    <tr id="calender-tf">
	  <td class="footer"> </td>
	</tr>
  </tfoot>
  
  <tbody>
    <tr id="calendar-header">
	  <td class="calendar-header-day">[day name]</td>
	  /* Repeat above line 7 times for each day of the week, Sun/Mon/Tue/etc. */
	  /* ... */
	</tr>
	<tr class="weekRow">
	  <td class="calendar-day">
	    <div class="square-box">
		  <div class="square-content">
		    <div>
			  <span [class="... read Note #1 below ..."]>[date number]</span>
			</div>
		  </div>
		</div>
	  </td>
	  /* Repeat above block 7 days, once for each day */
	  /* ... */
	 </tr>
	 /* Repeat above block as many times as there are weeks in the month */
	 /* ... */
  </tbody>
</table>

Note #1: If the date being displayed is:

• from the previous month, the class name will be monthPrev
• from the next month, the class name will be monthNext
• the current day, the class name will be today
• any other day of the month, the class name will be daily

To create your own styling, navigate to the modules/calendar_monthly/ folder and open the file called styleCustom.css. Take a look at the various elements already defined and start playing with them.

Hint: It's useful to set your cssStyle to custom and see what that looks like before you start making changes. This will serve as a reference when you're looking at the CSS file.