A MagicMirror module that renders calendars using the fullcalendar.io javascript libraries.

There are a 2 things you will need to do in your overall configuration so you can then render these webview(s).

1. Electron Options Referring to the MagicMirror Configuration, you will need to add the nodeIntegration: true to electronOptions. I am uncertain why this is needed (I have plenty of educated guesses), but if this value is false, things don't render.

	electronOptions: {
	/*  Note: MagicMirror uses Object.assign() to 'override' its defaults. In order to ensure
	    you get the defaults for webPreferences along with your 'override' you must fully define 
	    webPreferences to have all the MagicMirror defaults along with your override (nodeIntegration).
	    Thankfully, MagicMirror's default for webPreferences is zoomFactor: 1
	    and we are overriding the other default nodeIntegration
	*/
		webPreferences: {
			zoomFactor: 1, // default is actually zoomFactor: config.zoom, and zoom's default is 1.
			nodeIntegration: true, // the default for this is false. we are overriding this.
	},

2. Custom CSS This is a kinda optional. Things do render without it, but the sizing is all crap. Basically what I am saying here is use CSS to style your webview; do not use the webview inline style. There are PLENTY of references/complaints online about how the webview isn't rendering fully as specified in the inline style. I wanted my entire screen to render as the webview. I finally came across a reference that presented a solution that actually worked (I hate css). This CSS did the trick; put this in your MagicMirror custom css css/custom.css.

.MMMFullCalendarIO {
  position: absolute;
  top: 30;
  left: 20;
  width: 90%;
  height: 100%;
  margin: 0 0 0 2em;
  display: inline-flex;
}

I did some adjustments based on the page I was loading as in my application the rendered webview was 'too wide' and then shifted too much to the left.

3. Install and Build This module uses angular to render the calendar. After pulling down the module to your modules directory as MMM-FullCalendarIO, you will need to:

   • cd modules/MMM-FullCalendarIO
   • npm install
   • npm run build

Add or Change 1 or more MMM-FullCalendarIO module configurations in ~/MagicMirror/config/config.js file:

```javascript
{
    module: "MMM-FullCalendarIO",
    position: "fullscreen_above",	
    config: {
        identifier: 'OurCalendar',
        cssClassname: 'MMMFullCalendarIO',
        fullcalendar: {
            // see https://fullcalendar.io/docs/initialization
            // document read function javascript
            //  see '// put your options and callbacks here'
        }
    }
}
```

```javascript
{
    themeSystem: 'bootstrap4',
    views: {
        listDay: { buttonText: 'day' },
        listWeek: { buttonText: 'week'},
        threeMonths: { type: 'multimonth', duration: { weeks: 12 }, buttonText: '3-mos' },
    },
    defaultView: 'threeMonths',
    height: 'parent',
    contentHeight: 'auto',
    header: {
        left: '',
        center: 'title',
        right: ''
    },
    footer: {
        left: 'listDay,listWeek,month,threeMonths,  prev,today,next',
        center: '',
        right: '',
    },
}
```