{"id":3257,"date":"2014-02-26T11:23:39","date_gmt":"2014-02-26T17:23:39","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=3257"},"modified":"2015-02-25T12:21:11","modified_gmt":"2015-02-25T18:21:11","slug":"flexcal-with-today-button","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2014\/02\/26\/flexcal-with-today-button\/","title":{"rendered":"<code>flexcal<\/code> with &#8220;Today&#8221; button"},"content":{"rendered":"<p>Someone asked about adding a \"today\" button\/link to <a href=\"http:\/\/bililite.com\/blog\/2009\/04\/03\/new-jquery-widget-flexcal\/\" title=\"New jQuery Widget: flexcal\"><code>flexcal<\/code><\/a>. It's actually pretty simple:<\/p>\r\n<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 src=\"\/inc\/jquery.scrollintoview.js\"><\/script>\r\n<script>\r\n  $('<link rel=stylesheet href=\"\/inc\/flexcal.css\" \/>').appendTo('head');\r\n<\/script>\r\n<pre><code class=\"language-html demo\">&lt;input id=&quot;date1&quot;\/&gt;<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">\r\n$('#date1').flexcal({'class': 'multicalendar', calendars: ['en','he-jewish']});\r\nvar todaylink = $('&lt;a&gt;Today&lt;\/a&gt;').attr({\r\n  'class': 'commit',\r\n  rel: $.bililite.flexcal.date2string(new Date),\r\n  title: $('#date1').flexcal('format', new Date),\r\n  style: 'text-decoration: underline; cursor: pointer'\r\n});\r\n$('#date1').flexcal('box').find('.ui-flexcal').append(todaylink);\r\n<\/code><\/pre>\r\n<p>The key is the <code class=\"language-javascript\" >todaylink<\/code> which I append to the calendar (the <code class=\"language-javascript\" >$('#date1').flexcal('box').find('.ui-flexcal')<\/code> line). The underlying code uses the <code class=\"language-html\" >rel<\/code> attribute to determine what day a given <code class=\"language-html\" >&lt;a&gt;<\/code> in the calendar should go to; use <code class=\"language-javascript\" >$.bililite.flexcal.date2string(d)<\/code> to get the right format for a given <code class=\"language-javascript\" >Date<\/code> object. The <code class=\"language-javascript\" >$('#date1').flexcal('format', d)<\/code> is the <em>displayed<\/em> format for a given date; you can override that (say to use a European day-month-year format).<\/p>\r\n<p>The class of the link determines what do to: <code class=\"language-javascript\" >'class': 'commit'<\/code> sets the date in the input box and hides the datepicker; <code class=\"language-javascript\" >'class': 'go'<\/code> would just have the datepicker display that date.<\/p>","protected":false},"excerpt":{"rendered":"Someone asked about adding a \"today\" button\/link to flexcal. It's actually pretty simple: &lt;input id=&quot;date1&quot;\/&gt; $('#date1').flexcal({'class': 'multicalendar', calendars: ['en','he-jewish']}); var todaylink = $('&lt;a&gt;Today&lt;\/a&gt;').attr({ 'class': 'commit', rel: $.bililite.flexcal.date2string(new Date), title: $('#date1').flexcal('format', new Date), style: 'text-decoration: underline; cursor: pointer' }); $('#date1').flexcal('box').find('.ui-flexcal').append(todaylink); The key is the todaylink which I append to the calendar (the $('#date1').flexcal('box').find('.ui-flexcal') line). The underlying [&hellip;]","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\/3257"}],"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=3257"}],"version-history":[{"count":32,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3257\/revisions"}],"predecessor-version":[{"id":3517,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3257\/revisions\/3517"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=3257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=3257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=3257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}