WARNING!

NOTE: This module is still actively being developed!
What to expect: Things can suddenly break!
What not to expect: Things not to break!

Module: Calendar [Monthly]

The calendar_monthly module is (currently) a simple month view calendar.

Installing the module

Clone this repository in your ~MagicMirror/modules/ folder:

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

Using the module

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

Configuration options

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

Option	Description	Default
More options may get added later.
`showHeader`	This allows you to turn on or off the header on the calendar. The header consists of the month and year.	`true` - Other option is `false`.
`cssStyle`	Calendar_monthly allows you to use a custom CSS to style your calendar, or you can use one of the built-in ones. Please read the 'CSS Styling' section for more information.	`block` - Other options are `clean`, `slate`, and `custom`. Others may be added in the future. Please note that the `slate` style is designed for mirror-less displays.

Custom CSS Styling

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>
	  <td> </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.