month format

README.md

@@ -1,5 +1,5 @@
 # Calendar
-A calendar component, based on jQuery. [Demo](http://yscoder.github.io/Calendar/demo.html)
+A calendar component, based on jQuery. [Demo](//yscoder.github.io/Calendar/index.html)
 
 ---
 
@@ -33,74 +33,77 @@ $('#ca').calendar({
 
 ## Options
 
-* **width: 280**
+```js
+{
 
-    calendar width
-* **height: 280**
+    // width
+    width: 280,
 
-    calendar height
-* **zIndex: 1**
+    // height, 
+    height: 280,
 
-    calendar zIndex
-* **trigger: null**
+    // zIndex
+    zIndex: 1,
 
-    Set the trigger selector，
-* **offset: [0, 1]**
+    // set the trigger selector
+    trigger: null,
 
-    offset position
-* **customClass: ''**
+    // offset position
+    offset: [0, 1],
 
-    override class
-* **view: 'date'**
+    // override class
+    customClass: '',
 
-    set display view, optional date or month
-* **date: new Date()**
+    // set display view, optional date or month
+    view: 'date',
 
-    set today
-* **format: 'yyyy/mm/dd'**
+    // set current date
+    date: new Date(),
 
-    date format
-* **startWeek: 0**
+    // date format
+    format: 'yyyy/mm/dd',
 
-    default 0, first day of the week
-* **weekArray: ['日', '一', '二', '三', '四', '五', '六']**
+    // first day of the week
+    startWeek: 0,
 
-    can change to other
-* **selectedRang: null**
+    // week format
+    weekArray: ['日', '一', '二', '三', '四', '五', '六'],
 
-    The optional time range.
+    // month format
+    monthArray: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
 
-    format: [ start date, end date]
+    // optional date range
+    // value: `[ start date[, end date] ]`
+    // Fixed date range: [new Date(2016, 0, 1), new Date(2016, 11, 31)] or ['2016/1/1', '2016/12/1']
+    // Starting today: [new Date(), null] or [new Date()]
+    selectedRang: null,
 
-    set today do not choose before: [new Date(), null] or ['2015/11/27']
-* **data: null**
+    // display data when mouse enter 
+    // value: `[{ date: String || Date, value: object }, ... ]`
+    // example: [ { date: '2016/1/1', value: 'A new Year'} ] or [ { date: new Date(), value: 'What to do'} ]
+    data: null,
 
-    Date of linked data.
+    // data label format
+    // No display is set to `false`
+    label: '{d}\n{v}',
 
-    [{ date: string, value: object }, ... ]
+    // arrow characters
+    prev: '<',
+    next: '>',
 
-* **label: '{d}\n{v}'**
+    // callback function when view changed
+    // params: view, y, m
+    viewChange: $.noop,
 
-    data show format, set false don't show.
+    // callback function when selected
+    onSelected: function (view, date, value) {
+        // body...
+    },
 
-    parameters: {d} date, {m} view, {v}, data
-* **prev: '<'**
-* **next: '>'**
-
-    arrow characters
-* **viewChange: $.noop**
-
-    event callback for view change.
-
-    parameters: view
-* **onSelected: $.noop**
-
-    event callback for selected.
-
-    parameters: view, date, data
-* **onMouseenter: $.noop**
-* **onClose: $.noop**
-
-    event callback for selected.
-    parameters as above.
+    // callback function when mouseenter
+    onMouseenter: $.noop,
 
+    // callback function when closed
+    onClose: $.noop
+}
+```

gulpfile.js

@@ -26,9 +26,8 @@ gulp.task('dev', () => {
     browserSync.init({
         server: {
             baseDir: './'
-        },
-        startPath: 'demo.html'
+        }
     })
 
-    gulp.watch(['demo.html', src + '*.*'], browserSync.reload)
+    gulp.watch(['index.html', src + '*.*'], browserSync.reload)
 })

demo.html → index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
-    <title>Examples</title>
+    <title>Calendar demo</title>
     <link rel="stylesheet" href="src/calendar.css">
     <style type="text/css">
         html {
@@ -60,7 +60,7 @@ <h2>Trigger calendar</h2>
         <div id="two"></div>
         <p><button type="button" id="add">Add input</button></p>
     </div>
-    <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
+    <script src="//cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
     <script src="src/calendar.js"></script>
     <script>
         var now = new Date();
@@ -92,12 +92,12 @@ <h2>Trigger calendar</h2>
             // selectedRang: [new Date(), null],
             data: data,
             date: new Date(2016, 9, 31),
-            onSelected: function(view, date, data) {
+            onSelected: function (view, date, data) {
                 console.log('view:' + view)
                 console.log('date:' + date)
                 console.log('data:' + (data || '无'));
             },
-            viewChange: function(view, y, m) {
+            viewChange: function (view, y, m) {
                 console.log(view, y, m)
 
             }
@@ -109,10 +109,10 @@ <h2>Trigger calendar</h2>
             // offset: [0, 1],
             zIndex: 999,
             data: data,
-            onSelected: function(view, date, data) {
+            onSelected: function (view, date, data) {
                 console.log('event: onSelected')
             },
-            onClose: function(view, date, data) {
+            onClose: function (view, date, data) {
                 console.log('event: onClose')
                 console.log('view:' + view)
                 console.log('date:' + date)
@@ -123,10 +123,10 @@ <h2>Trigger calendar</h2>
         // Dynamic elements
         var $demo = $('#demo');
         var UID = 1;
-        $('#add').click(function() {
-            $demo.append('<input id="input-'+ UID +'"><div id="ca-'+ UID +'"></div>');
+        $('#add').click(function () {
+            $demo.append('<input id="input-' + UID + '"><div id="ca-' + UID + '"></div>');
             $('#ca-' + UID).calendar({
-                trigger: '#input-'+ UID++
+                trigger: '#input-' + UID++
             })
         })
     </script>

package.json

@@ -1,11 +1,8 @@
 {
   "name": "flip-calendar-picker",
-  "version": "1.1.0",
-  "description": "A calendar component, based on jQuery. ",
+  "version": "1.2.0",
+  "description": "A calendar component, based on jQuery.",
   "main": "./src/calendar.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/yscoder/Calendar.git"