{"id":1876,"date":"2011-10-26T15:08:04","date_gmt":"2011-10-26T21:08:04","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=1876"},"modified":"2015-02-25T12:06:11","modified_gmt":"2015-02-25T18:06:11","slug":"the-flexcal-api-and-an-inline-flexcal","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2011\/10\/26\/the-flexcal-api-and-an-inline-flexcal\/","title":{"rendered":"The <code>flexcal<\/code> API and an inline <code>flexcal<\/code>"},"content":{"rendered":"<script src=\"\/inc\/jquery.ui.subclass.js\"><\/script>\r\n<script src=\"\/inc\/jquery.textpopup.js\"><\/script>\r\n<script src=\"\/inc\/jquery.flexcal.js\"><\/script>\r\n<script>$('head').append('<link rel=\"stylesheet\" href=\"\/inc\/flexcal.css\" \/>');<\/script>\r\n<p>My <a href=\"\/blog\/2009\/04\/03\/new-jquery-widget-flexcal\/\"><code>flexcal<\/code><\/a> plugin exposes a few useful methods, which I have not documented elsewhere. They are called, like all jQuery UI widget methods, by creating the widget: <code class=\"language-javascript\">cal = $('input.date').flexcal()<\/code> then invoking the method:  <code class=\"language-javascript\">cal.flexcal('setDate', '10\/25\/2011')<\/code>.<\/p>\r\n<!--more-->\r\n<h3>Getters<\/h3>\r\n<div class=\"prelike\"><dl>\r\n<dt><code>box<\/code><\/dt>\r\n<dd>Returns the &lt;div&gt; element that contains the calendar. Also useful for forcing the creation of the calendar; it is only created when it is shown (<a href=\"http:\/\/en.wikipedia.org\/wiki\/Lazy_initialization\">lazy instantiation<\/a>). Therefore, trying to manipulate the calendar before it is shown can cause errors. Use <code class=\"language-javascript\">$('input.date').flexcal().flexcal('box')<\/code> to force instantiation.<\/dd>\r\n<dt><code>format<\/code><\/dt>\r\n<dd>Takes a <code>Date<\/code> object and returns the string representation of it; <code class=\"language-javascript\">$('input.date').flexcal('format', new Date)<\/code> returns <code>'10\/25\/2011'<\/code> for the day I wrote this. One the methods that are useful to override; the default function is available as <code>$.bililite.flexcal.date2string<\/code>.<\/dd>\r\n<\/dl><\/div>\r\n<h3>Setters<\/h3>\r\n<div class=\"prelike\"><dl>\r\n<dt>commit<\/dt>\r\n<dd>\"Commits\" the currently highlighted date&mdash;sets the value of the input element to <code>format(getDate())<\/code>, hides the calendar, and triggers the <code>commit<\/code> event.<\/dd>\r\n<dt>hide<\/dt>\r\n<dd>Hides the calendar.<\/dd>\r\n<dt>position<\/dt>\r\n<dd>Move the calendar to the position represented by <code class=\"language-javascript\">flexcal('option', 'position')<\/code>. Note that <code class=\"language-javascript\">flexcal('option', 'position', 'tl')<\/code> changes the option value but <em>does not move the calendar<\/em>. You have to call <code class=\"language-javascript\">flexcal('position')<\/code> to actually move it. This may be bad design and I may change this in the future.<\/dd>\r\n<dt>show<\/dt>\r\n<dd>Shows the calendar.<\/dd>\r\n<\/dl><\/div>\r\n<p>Plus, setting the options with <code>option<\/code> changes the calendar on the fly (except for <code>url<\/code>, which is evaluated only at creation; if you need to reset the HTML of the calendar, destroy it and instantiate a new one). Thus, <code class=\"language-javascript\">$('input.date').flexcal('option', 'current', '1\/1\/2011')<\/code> sets the highlighted date (displaying the appropriate month).<\/p>\r\n<h3>An inline <code>flexcal<\/code><\/h3>\r\n<p>A quick inline datepicker, subclassed from <code>flexcal<\/code>, for use with the examples. It requires that the associated &lt;div&gt; be absolutely sized in height, which is not ideal.<\/p>\r\n<pre><code class=\"language-javascript demo\">$.widget('bililite.inlineflexcal', $.bililite.flexcal, {\r\n  _init: function(){\r\n    this.options.box = this.options.box || this.element;\r\n    this.show();\r\n  },\r\n  options: {\r\n    position: {at: 'bottom', my: 'bottom'},\r\n    speed: 0,\r\n    hideOnOutsideClick: false\r\n  }, \r\n  commit: function(d){\r\n    this.element.val(this.format(d));\r\n    this._setDate(d, true);\r\n    this._trigger('commit', 0, d);\r\n  }\r\n});<\/code><\/pre>\r\n<pre><code class=\"language-html demo\">&lt;div&gt;&lt;input id=&quot;example1&quot;\/&gt;&lt;br\/&gt;&lt;\/div&gt;<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">$('#example1').inlineflexcal({box: $('#example1').parent()});<\/code><\/pre>\r\n\r\n<h3>Examples<\/h3>\r\n<h4>filter, current<\/h4>\r\n<pre><code class=\"language-html demo\">&lt;span&gt;Start Date:&lt;\/span&gt;\r\n&lt;div id=&quot;date1&quot; style=\"display: inline-block\"&gt;&lt;\/div&gt;\r\n&lt;span&gt;End Date:&lt;\/span&gt;\r\n&lt;div id=&quot;date2&quot; style=\"display: inline-block\"&gt;&lt;\/div&gt;<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">$('#date1').inlineflexcal({\r\n\tcommit: function(event, data){\r\n\t\tvar startdate = data;\r\n\t\tvar enddate = $('#date2').inlineflexcal('option', 'current');\r\n\t\t$('#date2').inlineflexcal('option', 'current', Math.max(startdate, enddate));\r\n\t}\r\n});\r\n$('#date2').inlineflexcal({\r\n\tfilter: function (d){\r\n\t\treturn d &gt;= $('#date1').inlineflexcal('option','current');\r\n\t}\r\n});\r\n<\/code><\/pre>\r\n\r\n<h4>box, position<\/h4>\r\n<pre><code class=\"language-html demo\">&lt;span&gt;Drag the calendar!&lt;\/span&gt; &lt;input type=&quot;button&quot; id=&quot;button2&quot; value=&quot;Restore Position&quot;\/&gt;\r\n&lt;div id=&quot;example2&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">$('#example2').inlineflexcal({reposition: false});\r\n$('#example2').inlineflexcal('box').draggable().css('border', '10px inset purple');\r\n$('#button2').click(function(){\r\n  $('#example2').inlineflexcal('position'); \/\/ restore the correct position\r\n});<\/code><\/pre>\r\n\r\n<h4>Show\/Hide<\/h4>\r\n<pre><code class=\"language-html demo\">&lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;radio3&quot;\/&gt; Hide&lt;\/label&gt;\r\n&lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;radio3&quot; checked=&quot;checked&quot;\/&gt; Show&lt;\/label&gt;\r\n&lt;div id=&quot;example3&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">$('#example3').inlineflexcal();\r\n$('[name=radio3]').first().change(function() {\r\n  if ($(this).is(':checked')) $('#example3').inlineflexcal('hide');\r\n});\r\n$('[name=radio3]').last().change(function() {\r\n  if ($(this).is(':checked')) $('#example3').inlineflexcal('show');\r\n});<\/code><\/pre>\r\n\r\n<h4>l10n<\/h4>\r\n<pre><code class=\"language-html demo\">&lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;radio4&quot; checked=&quot;checked&quot;\/&gt; Decimal&lt;\/label&gt;\r\n&lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;radio4&quot;\/&gt; Hex&lt;\/label&gt;\r\n&lt;div id=&quot;example4&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">$('#example4').inlineflexcal();\r\n$('[name=radio4]').first().change(function() {\r\n  if ($(this).is(':checked')) $('#example4').inlineflexcal('option', 'l10n', 'en');\r\n});\r\n$('[name=radio4]').last().change(function() {\r\n  if ($(this).is(':checked')) $('#example4').inlineflexcal('option', 'l10n', {\r\n\tdayNamesMin: ['s','m','t','w', 't', 'f','s'],\r\n\tdates: function(n){\r\n\t\treturn n.toString(16);\r\n\t},\r\n\tyears: function(n){\r\n\t\treturn n.toString(16);\r\n\t}\r\n  });\r\n});<\/code><\/pre>\r\n\r\n<h4>tab, hidetabs<\/h4>\r\n<pre><code class=\"language-html demo\">&lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;check5&quot;\/&gt; Hide Tabs&lt;\/label&gt;&lt;br\/&gt;\r\n&lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;radio5&quot; checked=&quot;checked&quot;\/&gt; English&lt;\/label&gt;\r\n&lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;radio5&quot;\/&gt; Jewish&lt;\/label&gt;\r\n&lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;radio5&quot;\/&gt; &amp;#1506;&amp;#1489;&amp;#1512;&amp;#1497;&amp;#1514;&lt;\/label&gt;\r\n&lt;div id=&quot;example5&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">$('#example5').inlineflexcal({\r\n  calendars: ['en', 'jewish', 'he-jewish'],\r\n  'class': 'multicalendar'\r\n});\r\n$('#example5').on('inlineflexcalset', function() {\r\n    $('[name=radio5]').eq($('#example5').inlineflexcal('option', 'tab')).prop(\"checked\", true);\r\n});\r\n$('[name=check5]').change(function(){\r\n\t$('#example5').inlineflexcal('option', 'hidetabs', $(this).prop('checked'));\r\n});\r\n$('[name=radio5]').change(function() {\r\n  $('#example5').inlineflexcal('option', 'tab', $('[name=radio5]').index(this));\r\n});<\/code><\/pre>\r\n\r\n","protected":false},"excerpt":{"rendered":"My flexcal plugin exposes a few useful methods, which I have not documented elsewhere. They are called, like all jQuery UI widget methods, by creating the widget: cal = $('input.date').flexcal() then invoking the method: cal.flexcal('setDate', '10\/25\/2011').","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1876"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=1876"}],"version-history":[{"count":107,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1876\/revisions"}],"predecessor-version":[{"id":3513,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1876\/revisions\/3513"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=1876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=1876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=1876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}