Merge pull request #32 from year-calendar/feature_startdate_numbermon…

…thsdisplayed

Allow usage of the calendar for specific periods

README.md

@@ -132,6 +132,27 @@ document.querySelector('.calendar').addEventListener('clickDay', function(e) {
 
 You can find the exhaustive list of events in the [documentation](https://year-calendar.github.io/js-year-calendar/documentation).
 
+## Migrating v1.x to v2.x
+
+If you are using the dataSource option as a function (callback or promise), the first parameter has changed:
+```
+new Calendar('#calendar', {
+  dataSource: (year) => {
+    console.log(year);
+  }
+}
+```
+becomes
+```
+new Calendar('#calendar', {
+  dataSource: (period) => {
+    console.log(period.year);
+  }
+}
+```
+
+For more details, check [this PR](https://github.com/year-calendar/js-year-calendar/pull/32)
+
 ## Migrating from bootstrap-year-calendar
 
 This widget is based on the [bootstrap-year-calendar](https://github.com/Paul-DS/bootstrap-year-calendar) widget.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-year-calendar",
-  "version": "1.0.2",
+  "version": "2.0.0-alpha.2",
   "description": "A fully customizable year calendar widget",
   "main": "./dist/js-year-calendar.js",
   "scripts": {

src/ts/interfaces/CalendarOptions.ts

@@ -4,6 +4,7 @@ import CalendarDayEventObject from './CalendarDayEventObject'
 import CalendarRenderEndEventObject from './CalendarRenderEndEventObject'
 import CalendarRangeEventObject from './CalendarRangeEventObject'
 import CalendarYearChangedEventObject from './CalendarYearChangedEventObject'
+import CalendarPeriodChangedEventObject from './CalendarPeriodChangedEventObject'
 
 /**
  * Options used for calendar customization.
@@ -113,14 +114,26 @@ export default interface CalendarOptions<T extends CalendarDataSourceElement> {
      * The date from which days are enabled.
      */
     minDate?: Date;
+
+    /**
+     * The number of months displayed by the calendar.
+     */
+    numberMonthsDisplayed?: number;
 
 	/**
      * Specifies whether the beginning and the end of each range should be displayed as rounded cells.
      */
     roundRangeLimits?: boolean;
 
+    /**
+     * The date on which the calendar should be opened.
+     * The day is not considered (only the month and the year).
+     */
+    startDate?: Date;
+
     /**
      * The year on which the calendar should be opened.
+     * If `startDate` is provided, this option will be ignored.
      */
     startYear?: number;
 
@@ -163,9 +176,15 @@ export default interface CalendarOptions<T extends CalendarDataSourceElement> {
      * Function fired when a date range is selected.
      */
     selectRange?: (e: CalendarRangeEventObject) => void;
-	
-	/**
+    
+    /**
      * Function fired when the visible year of the calendar is changed.
+     * This function will be fired only if the calendar is used in a full year mode. Otherwise, use `periodChanged` event.
      */
     yearChanged?: (e: CalendarYearChangedEventObject) => void;
+
+	/**
+     * Function fired when the visible period of the calendar is changed.
+     */
+    periodChanged?: (e: CalendarPeriodChangedEventObject) => void;
 }

src/ts/interfaces/CalendarPeriodChangedEventObject.ts

@@ -0,0 +1,16 @@
+export default interface CalendarPeriodChangedEventObject {
+    /**
+     * The beginning of the new period.
+     */
+    startDate: Date;
+
+    /**
+     * The end of the new period.
+     */
+    endDate: Date;
+
+	/**
+     * Indicates whether the automatic render after period changing must be prevented.
+     */
+    preventRendering: boolean;
+}