Permalink
Browse files

Allow setting of options when using auto-kal(via data-kal attribute)

  • Loading branch information...
1 parent fb28c65 commit c15ced2c93731cfd65ed7dfc7473762f3c68ea00 @SoapSeller SoapSeller committed Jun 12, 2012
Showing with 27 additions and 7 deletions.
  1. +9 −1 index.html
  2. +10 −3 readme.md
  3. +8 −3 src/auto.js
View
@@ -148,5 +148,13 @@
So is the one on this input.
<input type="text" class="auto-kal">
+ <hr>
+ This calendar is auto-created with months: 3 and direction: 'future'.
+ <div class="auto-kal" data-kal="months: 3, direction: 'future'"></div>
+
+ <hr>
+ This calander on this input is auto-created with direction: 'future'.
+ <input type="text" class="auto-kal" data-kal="direction: 'future'">
+
</body>
-</html>
+</html>
View
@@ -32,17 +32,24 @@ Two month, range selection, future dates only, with weekends blacked out:
Copy the contents of the `build/` folder into wherever your website scripts are kept. Include the JS and CSS files in the head of your document like so:
<link rel="stylesheet" href="build/kalendae.css" type="text/css" charset="utf-8">
- <script src="build/kalendae.js" type="text/javascript" charset="utf-8"></script>
+ <script src="build/kalendae.js" type="text/javascript" charset="utf-8"></script>
Once this is done you can initialize kalendae a number of ways. The easiest method is to simply add the "auto-kal" class onto the element you want to calendar attached to. The calendar will be created using the default settings.
<div class="auto-kal"></div>
This works for input elements as well, providing a popup calendar.
- <input type="text" class="auto-kal">
+ <input type="text" class="auto-kal">
-If you want to override the default settings, however, you must initialize Kalendae manually via JavaScript code. This should be done either at the end of the page, or in the DOMReady/Load event. To do this you must instantiate one of two objects, the widget class `Kalendae`, or the input element popup class `Kalendae.Input`. Both objects take two arguments:
+
+If you want to override the default settings, you can use the data-kal attribute.
+
+ <div class="auto-kal" data-kal="months: 3, direction: 'future'"></div>
+
+Again, this will work for input elements as well.
+
+You can also setup Kalendae manually via JavaScript code. This should be done either at the end of the page, or in the DOMReady/Load event. To do this you must instantiate one of two objects, the widget class `Kalendae`, or the input element popup class `Kalendae.Input`. Both objects take two arguments:
1. targetElement - This is either an Element object, or the element's ID as a string.
2. options - An object containing the new options. Any option omitted will revert to the default setting.
View
@@ -3,16 +3,21 @@
Kalendae.util.domReady(function () {
var els = util.$$('.auto-kal'),
i = els.length,
- e;
+ e,
+ options,
+ optionsRaw;
while (i--) {
e = els[i];
+ optionsRaw = e.getAttribute('data-kal');
+ options = (optionsRaw == null || optionsRaw == "") ? {} : (new Function('return {' + optionsRaw + '};'))();
+
if (e.tagName === 'INPUT') {
//if element is an input, bind a popup calendar to the input.
- new Kalendae.Input(e);
+ new Kalendae.Input(e, options);
} else {
//otherwise, insert a flat calendar into the element.
- new Kalendae({attachTo:e});
+ new Kalendae(util.merge(options, {attachTo:e}));
}
}

0 comments on commit c15ced2

Please sign in to comment.