change from long can* method names and implement additional events as…

… per feedback comments

Readme.md

@@ -22,7 +22,9 @@ cal.el.appendTo('body');
 
   - `prev` when the prev link is clicked
   - `next` when the next link is clicked
-  - `view change` (date) when the month/year dropdowns are changed
+  - `month change` (number) when the month dropdown is changed
+  - `year change` (number) when the year dropdown is changed
+  - `view change` (date) when the viewed month/year is changed, either by next/prev or dropdown menu
   - `change` (date) when the selected date is modified
 
 ## API
@@ -41,13 +43,13 @@ cal.el.appendTo('body');
   Show the given `date`. This does _not_ select the given date,
   it simply ensures that it is visible in the current view.
 
-### Calendar#canSelectMonth()
+### Calendar#monthMenu()
 
-  Adds a month dropdown to allow jumping to selected month.
+  Adds a month dropdown menu to allow jumping to selected month.
 
-### Calendar#selectYear([from], [to])
+### Calendar#yearMenu([from], [to])
 
-  Adds a year dropdown to allow jumping to selected year. `From` specifies the first year shown in the dropdown and `to` the last year. This means that if `to` is less than `from`, the years will be listed in descending order.
+  Adds a year dropdown menu to allow jumping to selected year. `From` specifies the first year shown in the dropdown and `to` the last year. This means that if `to` is less than `from`, the years will be listed in descending order.
 
   If `from`/`to` are both not specified the dropdown defaults to -/+ 10 years from the calendar's date.
 

lib/calendar.js

@@ -39,7 +39,8 @@ function Calendar(date) {
   this.on('change', this.show.bind(this));
   this.days.on('prev', this.prev.bind(this));
   this.days.on('next', this.next.bind(this));
-  this.days.on('view change', this.viewChange.bind(this));
+  this.days.on('year change', this.yearChange.bind(this));
+  this.days.on('month change', this.monthChange.bind(this));
   this.show(date || new Date);
   this.days.on('change', function(date){
     self.emit('change', date);
@@ -105,13 +106,13 @@ Calendar.prototype.show = function(date){
  * @api public
  */
 
-Calendar.prototype.canSelectYear = function(from, to){
+Calendar.prototype.yearMenu = function(from, to){
   if (!from) {
     from = this._date.getFullYear() - 10;
     to = this._date.getFullYear() + 10;
   };
   to = to || from + 20;
-  this.days.canSelectYear(from, to);
+  this.days.yearMenu(from, to);
   this.show(this._date);
   return this;
 };
@@ -123,8 +124,8 @@ Calendar.prototype.canSelectYear = function(from, to){
  * @api public
  */
 
-Calendar.prototype.canSelectMonth = function(){
-  this.days.canSelectMonth();
+Calendar.prototype.monthMenu = function(){
+  this.days.monthMenu();
   this.show(this._date);
   return this;
 };
@@ -138,6 +139,7 @@ Calendar.prototype.canSelectMonth = function(){
 
 Calendar.prototype.prevMonth = function(){
   var date = new Date(this._date);
+  date.setDate(1);
   date.setMonth(date.getMonth() - 1);
   return date;
 };
@@ -151,6 +153,7 @@ Calendar.prototype.prevMonth = function(){
 
 Calendar.prototype.nextMonth = function(){
   var date = new Date(this._date);
+  date.setDate(1);
   date.setMonth(date.getMonth() + 1);
   return date;
 };
@@ -163,8 +166,10 @@ Calendar.prototype.nextMonth = function(){
  */
 
 Calendar.prototype.prev = function(){
-  this.show(this.prevMonth());
+  var prevMonthDate = this.prevMonth();
+  this.show(prevMonthDate);
   this.emit('prev');
+  this.emit('view change', prevMonthDate);
   return this;
 };
 
@@ -176,20 +181,41 @@ Calendar.prototype.prev = function(){
  */
 
 Calendar.prototype.next = function(){
-  this.show(this.nextMonth());
+  var nextMonthDate = this.nextMonth();
+  this.show(nextMonthDate);
   this.emit('next');
+  this.emit('view change', nextMonthDate);
   return this;
 };
 
 /**
- * Jump to a date/month (using dropdowns).
+ * Switch to the year selected by dropdown menu.
  *
  * @return {Calendar}
  * @api public
  */
 
-Calendar.prototype.viewChange = function(date){
+Calendar.prototype.yearChange = function(year){
+  var date = new Date(this._date);
+  date.setYear(year);
+  this.show(date);
+  this.emit('year change', year);
+  this.emit('view change', date);
+  return this;
+};
+
+/**
+ * Switch to the month selected by dropdown menu.
+ *
+ * @return {Calendar}
+ * @api public
+ */
+
+Calendar.prototype.monthChange = function(month){
+  var date = new Date(this._date);
+  date.setMonth(month);
   this.show(date);
+  this.emit('month change', month);
   this.emit('view change', date);
   return this;
 };

lib/days.js

@@ -147,12 +147,12 @@ Days.prototype.show = function(date){
  * @api public
  */
 
-Days.prototype.canSelectYear = function(from, to){
+Days.prototype.yearMenu = function(from, to){
   this.selectYear = true;
   this.title.find('.year').html(yearDropdown(from, to));
   var self = this;
   this.title.find('.year .calendar-select').change(function() {
-    self.emit('view change', new Date(self.titleYear(), self.titleMonth(), 1));
+    self.emit('year change', self.titleYear());
     return false;
   });
 
@@ -164,12 +164,12 @@ Days.prototype.canSelectYear = function(from, to){
  * @api public
  */
 
-Days.prototype.canSelectMonth = function(){
+Days.prototype.monthMenu = function(){
   this.selectMonth = true;
   this.title.find('.month').html(monthDropdown());
   var self = this;
   this.title.find('.month .calendar-select').change(function() {
-    self.emit('view change', new Date(self.titleYear(), self.titleMonth(), 1));
+    self.emit('month change', self.titleMonth());
     return false;
   });
 

test/index.html

@@ -23,15 +23,15 @@ <h1>Calendar</h1>
     <script src="../build/build.js"></script>
     <script>
       var Calendar = require('calendar');
-      var one = (new Calendar).canSelectMonth().canSelectYear();
+      var one = (new Calendar).monthMenu().yearMenu();
 
-      one.on('next', function(){
-        two.next();
-      });
+      // one.on('next', function(){
+      //   two.next();
+      // });
 
-      one.on('prev', function(){
-        two.prev();
-      });
+      // one.on('prev', function(){
+      //   two.prev();
+      // });
 
       one.on('view change', function(date){
         var twoDate = new Date(date);