Cleaned up demo page and javascript. Found a bug in the event trigger…

…ing function that wasn't calling prevMonth/nextMonth when the previous or next year hit.

.gitignore

@@ -1,5 +1,5 @@
 /node_modules
 /bower_components
 .DS_Store
-/example/test/
+/demo/test/
 commit_checklist.md

Gruntfile.js

@@ -1,57 +1,56 @@
-module.exports = function(grunt) {
-
-  grunt.initConfig({
-    pkg: grunt.file.readJSON('package.json'),
-    uglify: {
-      mini_src: {
-        options: {
-          banner: '/*! <%= pkg.name %>.min.js v<%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
+module.exports = function (grunt) {
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+        uglify: {
+            mini_src: {
+                options: {
+                    banner: '/*! <%= pkg.name %>.min.js v<%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
+                },
+                files: {
+                    './<%= pkg.name %>.min.js': 'src/<%= pkg.name %>.js'
+                }
+            }
         },
-        files: {
-          './<%= pkg.name %>.min.js': 'src/<%= pkg.name %>.js'
-        }
-      }
-    },
-    less: {
-      development: {
-       files: {
-          "example/styles/clndr.css": "example/styles/clndr.less"
-        }
-      },
-      production: {
-        options: {
-          compress: true,
-          report: "min",
-          sourceMap: true
+        less: {
+            development: {
+                files: {
+                    "demo/css/clndr.css": "demo/css/clndr.less"
+                }
+            },
+            production: {
+                options: {
+                    report: "min",
+                    compress: true,
+                    sourceMap: true
+                },
+                files: {
+                    "demo/css/clndr.css": "demo/css/clndr.less"
+                }
+            }
         },
-        files: {
-          "example/styles/clndr.css": "example/styles/clndr.less"
+        watch: {
+            options: {
+                livereload: true
+            },
+            uglify: {
+                files: ['src/*.js'],
+                tasks: ['uglify'],
+                options: {
+                    spawn: false,
+                    // Don't call uglify more than once per second
+                    debounceDelay: 1000
+                }
+            },
+            less: {
+                files: ['demo/css/*.less'],
+                tasks: ['less:development']
+            }
         }
-      }
-    },
-    watch: {
-      options: {
-        livereload: true
-      },
-      uglify: {
-        files: ['src/*.js'],
-        tasks: ['uglify'],
-        options: {
-          spawn: false,
-          debounceDelay: 1000 // Don't call uglify more than once per second
-        }
-      },
-      less: {
-        files: ['example/styles/*.less'],
-        tasks: ['less:development']
-      }
-    }
-  });
-
-  grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-contrib-less');
-  grunt.loadNpmTasks('grunt-contrib-watch');
+    });
 
-  grunt.registerTask('default', ['uglify', 'less:development']);
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-less');
+    grunt.loadNpmTasks('grunt-contrib-watch');
 
+    grunt.registerTask('default', ['uglify', 'less:development']);
 };

demo/demo.js

@@ -0,0 +1,155 @@
+// Call this from the developer console and you can control both instances
+var calendars = {};
+
+$(document).ready( function() {
+    console.info(
+        'Welcome to the CLNDR demo. Click around on the calendars and' +
+        'the console will log different events that fire.');
+
+    // Assuming you've got the appropriate language files,
+    // clndr will respect whatever moment's language is set to.
+    // moment.locale('ru');
+
+    // Here's some magic to make sure the dates are happening this month.
+    var thisMonth = moment().format('YYYY-MM');
+    // Events to load into calendar
+    var eventArray = [
+        {
+            title: 'Multi-Day Event',
+            endDate: thisMonth + '-14',
+            startDate: thisMonth + '-10'
+        }, {
+            endDate: thisMonth + '-23',
+            startDate: thisMonth + '-21',
+            title: 'Another Multi-Day Event'
+        }, {
+            date: thisMonth + '-27',
+            title: 'Single Day Event'
+        }
+    ];
+
+    // The order of the click handlers is predictable. Direct click action
+    // callbacks come first: click, nextMonth, previousMonth, nextYear,
+    // previousYear, nextInterval, previousInterval, or today. Then
+    // onMonthChange (if the month changed), inIntervalChange if the interval
+    // has changed, and finally onYearChange (if the year changed).
+    calendars.clndr1 = $('.cal1').clndr({
+        events: eventArray,
+        clickEvents: {
+            click: function (target) {
+                console.log('Cal-1 clicked: ', target);
+            },
+            today: function () {
+                console.log('Cal-1 today');
+            },
+            nextMonth: function () {
+                console.log('Cal-1 next month');
+            },
+            previousMonth: function () {
+                console.log('Cal-1 previous month');
+            },
+            onMonthChange: function () {
+                console.log('Cal-1 month changed');
+            },
+            nextYear: function () {
+                console.log('Cal-1 next year');
+            },
+            previousYear: function () {
+                console.log('Cal-1 previous year');
+            },
+            onYearChange: function () {
+                console.log('Cal-1 year changed');
+            },
+            nextInterval: function () {
+                console.log('Cal-1 next interval');
+            },
+            previousInterval: function () {
+                console.log('Cal-1 previous interval');
+            },
+            onIntervalChange: function () {
+                console.log('Cal-1 interval changed');
+            }
+        },
+        multiDayEvents: {
+            singleDay: 'date',
+            endDate: 'endDate',
+            startDate: 'startDate'
+        },
+        showAdjacentMonths: true,
+        adjacentDaysChangeMonth: false
+    });
+
+    // Calendar 2 uses a custom length of time: 2 weeks paging 7 days
+    calendars.clndr2 = $('.cal2').clndr({
+        lengthOfTime: {
+            days: 14,
+            interval: 7
+        },
+        events: eventArray,
+        multiDayEvents: {
+            singleDay: 'date',
+            endDate: 'endDate',
+            startDate: 'startDate'
+        },
+        template: $('#template-calendar').html(),
+        clickEvents: {
+            click: function (target) {
+                console.log('Cal-2 clicked: ', target);
+            },
+            nextInterval: function () {
+                console.log('Cal-2 next interval');
+            },
+            previousInterval: function () {
+                console.log('Cal-2 previous interval');
+            },
+            onIntervalChange: function () {
+                console.log('Cal-2 interval changed');
+            }
+        }
+    });
+
+    // Calendar 3 renders two months at a time, paging 1 month
+    calendars.clndr3 = $('.cal3').clndr({
+        lengthOfTime: {
+            months: 2,
+            interval: 1
+        },
+        events: eventArray,
+        multiDayEvents: {
+            endDate: 'endDate',
+            startDate: 'startDate'
+        },
+        clickEvents: {
+            click: function (target) {
+                console.log('Cal-3 clicked: ', target);
+            },
+            nextInterval: function () {
+                console.log('Cal-3 next interval');
+            },
+            previousInterval: function () {
+                console.log('Cal-3 previous interval');
+            },
+            onIntervalChange: function () {
+                console.log('Cal-3 interval changed');
+            }
+        },
+        template: $('#template-calendar-months').html()
+    });
+
+    // Bind all clndrs to the left and right arrow keys
+    $(document).keydown( function(e) {
+        // Left arrow
+        if (e.keyCode == 37) {
+            calendars.clndr1.back();
+            calendars.clndr2.back();
+            calendars.clndr3.back();
+        }
+
+        // Right arrow
+        if (e.keyCode == 39) {
+            calendars.clndr1.forward();
+            calendars.clndr2.forward();
+            calendars.clndr3.forward();
+        }
+    });
+});

demo/index.html

@@ -0,0 +1,71 @@
+<!doctype html>
+<html>
+<head>
+    <title>CLNDR Demo</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="css/clndr.css">
+</head>
+<body>
+    <div class="container">
+        <div class="cal1"></div>
+        <div class="cal2">
+        <script type="text/template" id="template-calendar">
+            <div class="clndr-controls">
+                <div class="clndr-previous-button">&lsaquo;</div>
+                <div class="month"><%= intervalStart.format('M/DD') + ' &mdash; ' + intervalEnd.format('M/DD') %></div>
+                <div class="clndr-next-button">&rsaquo;</div>
+            </div>
+            <div class="clndr-grid">
+                <div class="days-of-the-week">
+                <% _.each(daysOfTheWeek, function(day) { %>
+                    <div class="header-day"><%= day %></div>
+                <% }); %>
+                    <div class="days">
+                    <% _.each(days, function(day) { %>
+                        <div class="<%= day.classes %>"><%= day.day %></div>
+                    <% }); %>
+                    </div>
+                </div>
+            </div>
+            <div class="clndr-today-button">Today</div>
+        </script>
+        </div>
+        <div class="cal3">
+        <script type="text/template" id="template-calendar-months">
+            <div class="clndr-controls top">
+                <div class="clndr-previous-button">&lsaquo;</div>
+                <div class="clndr-next-button">&rsaquo;</div>
+            </div>
+            <div class="clearfix">
+            <% _.each(months, function(cal) { %>
+                <div class="cal">
+                    <div class="clndr-controls">
+                        <div class="month"><%= cal.month.format('MMMM') %></div>
+                    </div>
+                    <div class="clndr-grid">
+                        <div class="days-of-the-week">
+                        <% _.each(daysOfTheWeek, function(day) { %>
+                            <div class="header-day"><%= day %></div>
+                        <% }); %>
+                            <div class="days">
+                            <% _.each(cal.days, function(day) { %>
+                                <div class="<%= day.classes %>"><%= day.day %></div>
+                            <% }); %>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            <% }); %>
+            </div>
+            <div class="clndr-today-button">Today</div>
+        </script>
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
+    <script src="../src/clndr.js"></script>
+    <script src="demo.js"></script>
+</body>
+</html>