twipped / kalendae

A javascript date picker that just works.

Kalendae - A framework agnostic javascript date picker

Kalendae is an attempt to do something that nobody has yet been able to do: make a date picker that doesn't suck. Kalendae provides the following features:

1. Fully portable, no external dependencies. No jQuery, no Prototype, no MooTools; just add the script and the stylesheet and you're good to go.
2. Fully and easily skinable. The default theme uses only one image file (a mask for the previous and next buttons), everything else is styled using CSS.
3. Supports all modern browsers and IE8.
4. Support single day, multiple day, or day range selection.
5. Configurable number of months to be displayed at once.
6. Can be displayed on the page as an inline widget, or attached to one or more input fields as a popup control.
7. Can be attached to any page element, not just named elements.
8. Configurable blackouts, defined either as an array of dates or via a callback function
9. Output selected dates in a variety of formats
10. Leverages moment.js for smart and easy date parsing.

Screenshots

Default calendar, no options defined.

Two month calendar attached to an input element.

Two month, range selection, future dates only, with weekends blacked out:

View The Demo Page

Usage

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.standalone.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">

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.

See the included index.html file for usage examples.

jQuery

Kalendae does not require jQuery, but does provide a jQuery plugin when jQuery is available. jQuery users may create a Kalendae widget or popup by calling $(selector).kalendae(options). If selector is an HTML input element, an instance of Kalendae.Input is created, otherwise the instance will be Kalendae. This instance is stored via jQuery's data method and can be accessed via $(selector).data('kalendae').

moment.js

To ease date handling processes, Kalendae bundles the moment.js date handling library. This bundled library has been altered to prevent it from being added to the global context, but is still available if you wish to use it in your own code. Add the following directly after the <script> tag to make moment available for your application.

<script type="text/javascript" charset="utf-8">
    window.moment = Kalendae.moment;
</script>

Options

The following options are available for configuration.

• attachTo: The element that the calendar div will be appended to.

  • In Kalendae this defaults to the first argument on the constructor.
  • In Kalendae.Input this defaults to the document body.
  • Can be an Element or an element's string ID.

• format: The format mask used when parsing date strings.

  • Uses moment.js notation (see http://momentjs.com/docs/#/display/format )
  • If left undefined, will attempt to parse the date automatically.
  • Default is null.

• mode: Selection mode.

  • "single": Allows selection of only one day. Clicks change the selected day. This is the default.
  • "multiple": Allows selection of multiple, non-sequential days. Clicks toggle a day's selection.
  • "range": Selects multiple days in sequence. First click defines start of the range, second defines the end of the range.

• selected: The date selected when the calendar is created.    - Values may be a string, JavaScript Date object, Moment object, or an array containing any of the three.

  • In "multiple" mode, strings may contain multiple dates separated by commas. ex: 2/3/2012, 3/15/2012, 4/2/2012
  • In "range" mode, strings may contain two dates separated by a hyphen. ex: 2/3/2012 - 3/15/2012

• closeOnSelection: Close the calendar popup when a date is selected.

  • Only works in Kalendae.Input and in single mode.
  • Default is false.

• months: The total number of months to display side by side on the calendar.

  • Default is 1.

• weekStart: The day to use for the start of the week.

  • 0 = Sunday, 1 = Monday, etc.
  • Default is 0.

• direction: Restricts date selectability to past or future.

  • Accepted values: past, today-past, any, today-future, future
  • Stacks with blackout
  • Default is "any"

• directionScrolling: If true and a direction other than any is defined, Kalendae will not allow scrolling the view outside the direction.

  • Default is true.

• blackout: Dates to be disallowed from selection.

  • Can be an array of dates formatted according to format, or a function taking a moment date object as the first argument and returning true to prevent selection.
  • Stacks with direction
  • Default is null

• viewStartDate: Date defining the first month to display when created.

  • Uses the format definition.
  • Default is null (this month or month of first selected day).

• endDate: Date defining the last day and month which will be selectable.

  • Uses the format definition.
  • Default is null (this month or month of first selected day).

• dateClassMap: A key/value collection of css classes organized by date. String date keys found in this collection will have their value attached to the SPAN tag for the date. This allows for custom coloring for specific days. See the first example in index.html for usage.

  • Note that this property uses the dayAttributeFormat option, NOT the format option, for date strings.
  • Default is null.

• dayOutOfMonthClickable: Allow clicks on days that fall outside of the currently focused month. Default is false.

• dayHeaderClickable: Allow click on header days to select all instances of the selected day name. It only works in "multiple" mode. Default is false.

• useYearNav: Include the double-arrow year navigation. Default is true.

• side: Chooses the side on which to display the picker. Default is bottom.

Advanced Behavior Options

The following settings alter the internal behavior of Kalendae and should only be changed by advanced users.

• columnHeaderFormat: The format of moment data of the week day name to display in column headers.

  • Default is dd

• titleMonthFormat: Format string used for the month in the calendar title.

  • Default is "MMMM,"

• titleYearFormat: Format string used for the year in the calendar title.

  • Default is "YYYY"

• dayNumberFormat: Format string for individual day numbers.

  • Default is "D"

• dayAttributeFormat: Format string for the data-date attribute set on every span

  • Default is "YYYY-MM-DD"

• parseSplitDelimiter: RegExp used when splitting multiple dates from a passed string

  • Default is /,\s*|\s*-\s*/

• rangeDelimiter: String used to delimit the start and end dates when outputting in range mode

  • Default is ' - '

• multipleDelimiter: String used to delimit dates when outputting in multiple mode

  • Default is ', '

Example Blackout Functions

• Blackout weekends: function (date) {return [1,0,0,0,0,0,1][Kalendae.moment(date).day()];}
• Blackout every other day: function (date) {return Kalendae.moment(date).date() % 2;}
• Blackout every other week function (date) {return Kalendae.moment(date).format('w') % 2;}

Member Functions

The following functions are available on the instantiated Kalendae and Kalendae.Input objects.

• getSelected(): Returns the selected dates as a formatted string.

• getSelectedAsText(): Returns the selected dates as an array of formatted strings.

• getSelectedAsDates(): Returns the selected dates as an array of JavaScript Date objects.

• getSelectedRaw(): Returns the selected dates as an array of moment objects.

• isSelected(string|Date|moment): Returns a true or false indicating if the passed date is selected.

• setSelected(string|Date|moment|Array): Sets the currently selected dates. See the selected option for accepted input.

• addSelected(string|Date|moment): Adds the passed value to the selection. Behavior varies according to the mode option, but matches behavior of clicking on a day in the calendar.

• removeSelected(string|Date|moment): Removes the passed value from the selection.

• removeAllSelected(): Clears all selected values.

• draw(): Forces a redraw of the calendar contents.

Member Properties

The following properties are exposed on the instantiated Kalendae and Kalendae.Input objects.

• settings: The unified options object.

• container: The calendar container div that is inserted into the page.

• calendars: The individual month divs (see the months option).

Kalendae Events

Kalendae uses a publish/subscribe event system. To receive events from a Kalendae instance you can call the subscribe() function on the Kalendae instance, passing the event name and a callback function. Example:

var k = new Kalendae('myDiv');
k.subscribe('change', function (date) {
   console.log(date, this.getSelected());
});

Callbacks can also be passed in the options object:

new Kalendae('myDiv', {
   subscribe: {
       'change': function (date) {
           console.log(date, this.getSelected());
       }
   }
});

Kalendae offers the following events:

• change - Fires whenever the selected date changes, either from a user clicking or a call to setSelected(). Receives the last clicked on date as the only argument, and the Kalendae instance as this.

• date-clicked - Fires when a date has been clicked, but before the selection is changed. Receives the date clicked as a moment object in the first parameter. Returning false will prevent selection change.

• view-changed - Fires when the user has clicked the next or previous month button, but before the calendar is redrawn. Returning false will prevent the change.

• draw-end - Fires when the draw function has finished.

Additionally, Kalendae.Input provides the following events:

• show - Fires when the calendar appears due to the input gaining focus

• hide - Fires when the calendar hides due to the input blurring

Skinning Kalendae

Coming Soon.

Building Kalendae

The Kalendae source code is assembled from multiple individual files. A standard GNU makefile is included to compile the files together into the finished product.

To build Kalendae, navigate to the directory containing this readme file in the system terminal and run the make command.

To create a minified version, run make minified. If the minified file is blank, run make minified-test to see what errors Google Closure Compiler is throwing.

Contributing to Kalendae

1. Please submit all pull requests to the dev branch from your own named branch.
2. Please only include the changes within the src/ directory, do not include new builds.
3. New code should match the existing code style, with hard tabs for indentation, spaces for alignment, and BSD/KNF style bracketing.
4. Please be aware that I have family and work obligations and may take some time to respond to your Pull Request.

License

Kalendae is released under an MIT license and is freely distributable.

kalendae's Issues

Where is the close/cancel button?

Need an Apply and/or cancel button. Forcing users to click outside calendar to close button is impractical.

daysInMonth() gives different value than vanilla moment.js

Today is the 31st of October yet I get this:

// Moment.js packaged with Kalendae (1.5)
Kalendae.moment().daysInMonth() // => 30

// Moment.js 1.7.2
moment().daysInMonth() // => 31

Unable to set January as viewStartDate?

Hello,

I can't seem to set January as the viewStartDate.

When I initialize Kalendae with viewStartDate:[2013,1] the calendar starts correctly at February 2013.

When I initialize Kalendae with viewStartDate:[2013,0] the calendar starts incorrectly at July 2012.

Any ideas?

Does not play well with KnockoutJS (possible fix included)

I'm using Kalendae.Input, and using KnockoutJS to bind the text field to which my kalendae object is attached to a view model. However, sadly Kalendae does not fire the 'change' event on the text field, so KnockoutJS does not update the view model attached to it.

To solve the issue without breaking Kalendae's dependency free nature, I took event.simulate from here: http://code.google.com/p/protolicious/source/browse/trunk/src/event.simulate.js?r=30, modified it, and inserted it into util.js

    simulateEvent: function (element, eventName, eventOptions) {
        var eventMatchers = {
            'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
            'MouseEvents': /^(?:click|mouse(?:down|up|over|move|out))$/
        }
        var defaultOptions = {
            pointerX: 0,
            pointerY: 0,
            button: 0,
            ctrlKey: false,
            altKey: false,
            shiftKey: false,
            metaKey: false,
            bubbles: true,
            cancelable: true
        }

        var options = util.merge(defaultOptions, eventOptions || { });
        var oEvent, eventType = null;

        for (var name in eventMatchers) {
            if (eventMatchers[name].test(eventName)) { eventType = name; break; }
        }

        if (!eventType)
            throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');

        if (document.createEvent) {
            oEvent = document.createEvent(eventType);
            if (eventType == 'HTMLEvents') {
                oEvent.initEvent(eventName, options.bubbles, options.cancelable);
            }
            else {
                oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView, 
                    options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
                    options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
            }
            element.dispatchEvent(oEvent);
        }
        else {
            options.clientX = options.pointerX;
            options.clientY = options.pointerY;
            oEvent = util.merge(document.createEventObject(), options);
            element.fireEvent('on' + eventName, oEvent);
        }
    }

Then I just modity this line:

    self.subscribe('change', function () {
        $input.value = self.getSelected();
    });

To this:

    self.subscribe('change', function () {
        $input.value = self.getSelected();
        util.simulateEvent($input, 'change');
    });

Hope this helps someone, even though it may be overkill for what needs to be done. Sorry for not providing a patch, but I don't know how to use Git, and don't have time to learn yet.

IE8 blur handling doesn't always play nice

Hi,

I get a

"htmlfile: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus."

on $input.focus() in the onblur handler for IE8;

https://github.com/ChiperSoft/Kalendae/blob/master/src/input.js#L53

That's because I have another blur handler on the same input that causes display:none on the input and its surrounding HTML. Apparently my blur handler has been called before Kalendae, and IE8 doesn't like calling focus() on a hidden input element. And it shouldn't, because the blur is rightly called on the input and I'm done with the calendar editing at this point.

As far as I can tell, I have no way to manipulate the noclose variable. I would think that the hide() should set this variable as well. I don't even understand why noclose was set to true anyhow.

The $input is not a jquery object, by the way. It's the native HTMLDOMElement. I'm not sure if that's what you were expecting, given the variable name prefix...

kind regards,
Jeroen

Use Kalendae w/ moment.js and it's i18n

I'm struggling to make Kalendae work properly with moment.js and it's language packages.
At this time, here's how things are working for me:

<script type='text/javascript' src='http://local.fr/wp-content/themes/library/js/libs/kalendae/build/kalendae.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://local.fr/wp-content/themes/library/js/libs/moment/min/moment.min.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://local.fr/wp-content/themes/library/js/libs/moment/lang/fr.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://local.fr/wp-content/themes/library/js/eval.js?ver=3.4.1'></script>

And in the latest javascript file, eval.js :

jQuery(document).ready(function($)
{
    window.moment = Kalendae.moment;

    var datePicker = new Kalendae.Input('kalendar', {
        months:1,
        direction: 'future'
    });
    datePicker.subscribe('change', function () {
        this.close();
    });

I can't really seem to figure out where I'm doing wrong, but the calendar keeps being in english, while the console.log shows 'fr".

Thanks for the help.

Input does not update

On the demo page the "Click this input element" box does not update when a different date is selected in the popup calendar.

Using Chrome 17 on Windows 7.

directions - today-past etc.

1. The directions options are doing what I think they should. 'past' and 'today-past' give the same results ('past'). Same for the future.
2. Also 'today' seems to be the same as 'any'.

I'm reasonably sure you're comparing seconds (epochs) rather than days which explains (1)
There doesn't seem to be a check for 'today' which explains (2)

Nice work though.

Default parseSplitDelimeter breaks up iso formatted dates

The default parseSplitDelimeter breaks upon every - character. Lots of ISO date formats such as YYYY-MM-DD have their constituent parts split by dashes, so anyone wanting to use these formats will encounter confusing results unless the parseSplitDelimeter is also changed. Perhaps the default parseSplitDelimeter could require space around the dash: /,\s*|\s+-\s+/?

"after-drawn" event?

Hi,

I've got this scenario: we need to mark which days has task on Kalendae widget.
So the first time we can do it after Kalendae initialized and drawn, that is very easy, but the point is we can't do that if people "change" the date, also tried "date-clicked" and "view-changed" events didn't work either.

So I guess that we need a "after-drawn" event?

var datesHasTask = [];

function highlightDatesWhichHasTask() {
   _.each($( ".k-days span" ), function(dateElement) {
     if (_.indexOf(datesHasTask, $(dateElement).attr("data-date")) != -1) {
       $(dateElement).addClass("k-task");
     }
   });
 };

new Kalendae( document.getElementById("datepicker"), {
   months:1,
   mode:'single',
   subscribe: {
     'change': highlightDatesWhichHasTask, // Doesn't work
     'view-changed': highlightDatesWhichHasTask, // Doesn't work
     'date-clicked': highlightDatesWhichHasTask // Doesn't work
   } 
 });

$.get(API_URL + "/dates/settled", function(data) {
   datesHasTask = data;
   highlightDatesWhichHasTask();  // This works!
 });

Thanks for the hard work you are putting into Kalendae, I love it!
It's much better that DatePicker of jQueryUI ;)

How can I have the picker hide after it is clicked

My goal is that the datepicker will hide as soon as a date is picked in a single selection configuration. It would be a nice configuration option.

I can't get the subscribe code to do anything in the following code. I don't know if this has to do with there being two input fields with the .report_date class.

Example code (coffeescript)

$ -> 
  startdate = $('.report_date').data('startdate')
  enddate = $('.report_date').data('enddate')
  range = startdate + " - " + enddate
  $('input.report_date').kalendae({    
    format: 'YYYY-MM-DD',
    mode: 'range'
    selected: range
    months: 2
    subscribe: {'date-clicked' : () -> $('h1').toggle}
  })

JS compiled

(function() {

  $(function() {
    var enddate, range, startdate;
    startdate = $('.report_date').data('startdate');
    enddate = $('.report_date').data('enddate');
    range = startdate + " - " + enddate;
    return $('input.report_date').kalendae({
      format: 'YYYY-MM-DD',
      mode: 'range',
      selected: range,
      months: 2,
      subscribe: {
        'date-clicked': function() {
          return $('h1').toggle;
        }
      }
    });
  });

}).call(this);

IE7 Javascript Errors

I understand that IE7 isn't supported, however I don't believe it is right that Kalendae throws Javascript errors (hence breaking any other Javascript on the page) when run on IE7. I think some sort of detection should be done to check whether the plugin is being run on an old version of IE (or other unsupported browser) and bail out if needs be.

Obviously with jQuery this is trivial with $.browser (I've done this in my own code that dynamically adds Kalendae to elements), however as the library has no deps I'm not quite sure of the best way in pure Javascript. To deal with old versions of IE this seems to do the trick at the top of the main function, however I'm not sure about other browsers:

if (typeof Element === "undefined") { return false; }

No more IE8 suport?

Hey guys!

It seems that this: if (typeof document.addEventListener !== 'function') return; is breaking IE8 support. Is this correct? I've tried to remove it, but it's still not showing the calendar.

How to retrieve the values ​​for the database include

Hello,
(Sorry do not speak English)

I am trying to test the timing, but there is one thing I can not do.

[code]

<script type="text/javascript" charset="utf-8"> var calendar = new Kalendae ({ AttachTo: document.body, months: 3 mode: 'multiple' selected: [Kalendae.moment (). subtract (M {1}) Kalendae.moment (). add (M {1})] }); [/ code] How to get the date selected for inclusion in a mysql database? thank you guigui69

Some computers don't have a font to display the "❯" (U+276F) character, etc.

On a barebones Windows 7 / IE 9 computer, IE has some trouble rendering the calendar back and forth arrows:

Minor glitch in prev next buttons in Mobile Safari

Probably because of the image masks, depending on zoom level (but also at 0 level), on my iPad there are small glitches around the previous and next buttons.
It would be better to achieve that without images at all; I know that is possible to draw shapes playing with CSS, maybe I will try.

And, after all, isn't ugly to read that "except an image mask" in the README (joke)

weekStart: 1 seems to cause certain 1st/Mon days to be disabled?

I've noticed today that if I set weekStart: 1 (so the week starts with Monday) then for the months that have a Monday for the 1st are un-selectable (e.g. 1st March 2012 and 1st July 2012)...

...the full script is simply...

var k = new kalendae(document.body, {
    direction: 'future',
    months: 2,
    weekStart: 1
});

blackout does not respect format, as stated in the doc

    var datePicker = new Kalendae.Input('kalendar', {
        months: 1,
        direction: 'future',
        weekStart: 1,
        format: "D/M/YYYY",
        subscribe: {
            'date-clicked': function () {
                this.hide();
            }
        },
        blackout: ["12/05/2012", "06/12/2012"]
    }); 

12/05/2012 (05 dec 2012 in the english format) is blacked out, 06/12/2012 (06 dec 2012 according to my format) is not

dateClassMap doesn't work with multiple months

The dateClassMap feature doesn't seem to work correctly with multiple months. See this example:

http://jsfiddle.net/PDQHa/

In this case I expect the 5th May on the last calendar to be highlighted red but it is not, instead 5th May on the second calendar is.

Keyboard arrow navigation

would love to see arrow navigation feature, where the user can navigate through calendar days by holding ctrl while pressing an arrow key..

Request: Asynchronous loading (AMD)

AMD compatibility would allow the following in an easier manner:

• loading the calendar components when needed (instead of loading everything when the page loads)
• bundling and minimizing the calendar components for faster deployment loading

Other Calendars?

How can I/you add other calendars to Kalendae?
http://en.wikipedia.org/wiki/List_of_calendars#In_use

Cleanup of generated elements?

I was curious if there was a public API for removing the generated calendar markup from the DOM once the instance isn't needed anymore (for example, in single page applications, where instances of Kalendae and Kalendae.Input are created dynamically).

How to stop user from going back further than a specific month?

Hi,

I need the calendar to start from the current date and keep going forever forward into the future, but the user shouldn't be able to click back before the current date.

I'm just using the following...

var k = new kalendae(document.body, {
    direction: 'future',
    months: 2,
    weekStart: 1
});

...but although I set the direction property to future which does disable the days before the current date, I'm unable to stop a user from clicking 'previous' and seeing those disabled dates.

Input without a drop-down calender

Hi,

I'm turning to you for guidance or rather a question. I'm trying to use Kalendae in a way through input tag. But the problem is when I use Kalendae.Input, then it automatically makes the calendar a drop down style while I want it to be visible all the time below the Input box.

I tried to do the Kalendae('test',{options here}) but then it doesn't post the date that I pick into the input box while if I use Kalendae.Input ('test',{options here}), I get the value that I select from a drop down calendar into the Input box... But I need the calendar to be always visible and under the Input box.
Is there a way to just switch from drop-down calendar or a classic always on view one? I didn't see anything under option so I'm just wondering about it.
Or if someone could let me know how to get the value of Selected date from the kalender and then I can forward it into the input box. Would appreaciate if someone could provide an example In case someone knows how to do this.

Also I want to congratulate the author of Kaleandae for such an amazing work.
And I thank anyone in advance that will help me with this.

If I didn't write enough clearly let me know, And I'll do my best to explain it even more.

calendar translation

I'm sorry i'm opening another issue. But I'm looking for a way to be able to translate the month and week names on the calendar (to french). I've looked into ways of translating the moment.js (so far I'm loading the fr.js) but I'm not having much luck at getting the names translated.
Could you point me in the right direction?

Thanks

moment.js dependency

First of all, thank you for your great work!

Well, my goal is to minify javascript files size. I knew Kalendae using build-in moment.js, but we also have a standalone moment.js (1.7.2) in our web app.

I removed standalone moment.js and tried this:

window.moment = Kalendae.moment;

However it fails when calling moment().unix(), obviously I only want to keep one of them, more ideally keep the standalone one, any thought?

Thanks.

Can I put some text events & links ?

Hey,

I want use Kalendae as an events agenda. But I'm not find where I've to put my events links to see them day by day in my huge-weight Kalendae. My english is little poor, my javascript too.

So my question is simple : is It possible to do that ?

Thanks for your work,

Cheers.

Date Format

Hi there,
I'm using the default call for Kalendae (i.e. with an input with the class of "auto-kal"). Thing is I need to parse and return dates in the YYYY-MM-DD format and I can't figure out how. I've tried a number of things including:
var moment = Kalendae.moment;
moment("YYYY-MM-DD");
all to no avail. Any help appreciated.
Cheers,
Dom

Kalendae (or the custom Moment.js?) cannot parse pre-populated input fields with the format "dddd, MMMM Do, YYYY"

This makes it impossible to use in most scenarios if you want to use this format.

You can find a JS Fiddle of the problem here.

http://jsfiddle.net/cnvW6/1/

selecting a range of authorized dates (inverse blackout)

Hi,

I'm looking for a way to authorized a range of dates like following:

var open_periods = [];
open_periods[0] = { start: '2010-01-01', end: '2010-12-31' };
open_periods[1] = { start: '2012-10-01', end: '2013-09-31' };

The ranges correspond to dates that are selectable, as you can see aren't necessarily strictly future or past.
They aren't strictly whole years or January to December ranges either.

As I understood it, the blackout option does the opposite, it blacks out certain dates in the wide range of dates.
I only want to authorize a small range of dates.

Any ideas? Has this been implemented already and did I missed that in the description somewhere?

Prev month/year buttons issues

Hi,

Unfortunately I have not a deep knowledge of your library or moment.js, so I think it's better to start a new issue rather than trying fixing myself and make a pull request

As you can see there: http://jsfiddle.net/FLLYJ/

there are some issues concerning next and previous buttons.

1. If you click on tne next month, you will not see the button to come back to April
2. If you go at September, the previous year button will appear.

I took a look at the library but since it is designed to work on almost all browser I don't know if touching something is good.

Anyway, the problem 1 is related to he following line 468 (I suppose):

if (diff > opts.months) {

maybe > is >=

other problems seems wrong calculations like the one above

Please let me know if you can fix them

Best regards

GT

(sorry, the feedle doesn't work with firefox I don't know why)

request for a 'hide' event

Hi,

I'm programmatically setting focus on an input to trigger Kalendae to show (and do a bunch of other things).

Because of the implementation details with IE8 and the blur handling in Kalendae, I can't reliably use my own blur handler on the input.

It would be great if I got a 'hide' event from the calendar when it hides, so that I have an alternative for my blur handler:

   hide : function () {
        this.container.style.display = 'none';
        this.publish('hide', this);
    }                  

And for symmetry's sake a 'show' event would probably be just as welcome. I could move some of my focus event handling to the show handler.

Is there a way to restrict the selection from today to x days in the future?

I'm looking at the examples but I can't see any way of getting the calendar (showing two months) to allow the user to select a single date in the future but specifically we want anything past 45 days to be disabled.

Can this be done? If so can you advise how.

Thanks.

IE 7 support?

Says in the docs that this only supports down to IE8 I would like to use this for IE7 as well. What dependencies or code does not work in IE 7? If you could point these out maybe I could make a fork for IE 7.

setSelected method does not work

Maybe I'm using Kalendae incorrectly, but using setSelected does not seem to set the date picker to the desired date.

http://jsfiddle.net/ericanderson/cnvW6/29/

Is it not possible if the input's value attribute is set to something else?

Thanks!

IE7 Support

Hi there,

What a great calendar widget. I'm pleased that your code is gaining traction really fast! Well done!

We would like to implement your widget on our website in replace of the standard Dojo Calendar widget, which we think is poor. However we have to cater for 10-15% of our audience on IE7. I noticed none of the demos load when I use IE7. I just wondered if you have any time line for IE7 or if you know what the problems are?

Thanks
Alex
DrEd.com

When `self._sel` is an empty array, `self.blackout()` always returns false

I think, that blackout function should be without an empty array condition.

I can't understand why this condition was present, so could you explain why you validate length of _sel array.

        self.blackout = function (input) {
            input = moment(input).yearDay();
            if (input < 1 || !self._sel /* || self._sel.length < 1 */) return false;
            var i = bdates.length;
            while (i--) if (bdates[i].yearDay() === input) return true;
            return false;
        }

See an example on jsfiddle: http://jsfiddle.net/nMwEf/5/

Can't re-format selected date

Hello,

I have the following change event code which gets the selected date and then reformats it from mm/dd/yyyy to dd/mm/yyyy...

subscribe: {
    "change": function(){
        var format = this.getSelected().replace(/(\d{2})\/(\d{2})\/(\d{4})/, function (match, cg1, cg2, cg3) {
            return cg2 + "/" + cg1 + "/" + cg3;
        });
        elem.value = format;
    }
}

...but it doesn't work. Seems setting elem.value = format is immediately replaced by the originally selected date.

So I'm guessing that the change event fires and then after that event ends then the Kalendae script automatically populates the input element with the selected date (so during the change event when I set the value, immediately after the value gets reset)

I managed to work around this by making the code asynchronous...

subscribe: {
    "change": function(){
        var format = this.getSelected().replace(/(\d{2})\/(\d{2})\/(\d{4})/, function (match, cg1, cg2, cg3) {
            return cg2 + "/" + cg1 + "/" + cg3;
        });
        window.setTimeout(function(){
            elem.value = format;
        }, 0);
    }
}

...but is there not a better/easier way to reformat the selected date?

Thanks for any advice.

Kind regards,

Arrow to next month hides at wrong month, when choosing 'today-past' direction

When Kalendae is displayed with 'today-past' direction, and it's currently June, then next month arrow is hidden when May is displayed and appears only when April is displayed

Selecting a date many years in the past is hard

While this calendar widget is brilliant for selecting dates near to the current date/initial date, it is almost impossible to select dates multiple years in the past. This removes Kalendae as an option for date of birth inputs, for example. I do not know the best way of solving this, but I can provide examples of how other calendar widgets solve it.

The jQuery UI calendar has 'changeMonth' and 'changeYear' options: http://jqueryui.com/demos/datepicker/#dropdown-month-year . Unfortunately, the jQuery UI picker is broken in that it is not easy to select a date more than 10 years in the past/future, and it is done in a really non-obvious manner - requiring multiple uses of a dynamic select box which has no indication that it is dynamic. The fact that a select box is even dynamic is a bit strange in the first place.

The MonkeyPhysics Mootools date picker solves this in another way: http://www.monkeyphysics.com/mootools/script/2/datepicker#examples . By clicking on the month/year text up the top, a month selection page is shown, showing all the months in the year. Clicking the year text shows a year selection page, showing all the years in the decade. There may even be a century page, where you select a decade, but I am sure you see the pattern now! The problem with this approach is that it is again not obvious. There is no indication that the month/year text is clickable, or that clicking that text 'zooms out' the date picker to a higher level. While the concept is very neat, its implementation leaves something to be desired.

Other widgets solve this by using text inputs for the year, but that is fairly ugly. It has other issues, such as people typing in invalid years and the correct actions to take around that.

Again, I do not know the correct answer for this problem, but I am happy to work through ideas with you. Once a solution is decided upon, I can implement it and submit a pull request for inclusion, if that would be helpful.

Thanks for making such a good looking, functional, and sensible widget!

Invalid date in 'range' mode

In 'range' mode, when a date is selected from the datepicker, end date displays as NaNs in input field.
I've created a jsfiddle test at http://jsfiddle.net/7vLjD/1/

Problem appears to be that when the input field is focused, that field's value(which is empty string) is parsed as invalid date and set to _sel.

I guess parseDates should be returning an empty array when the input is empty string.

if two a range between two months is selected only one month displays in multi-month view

If you have dates of two months selected and direction past. Then only one selected month displays. In my fixes this doesn't happen. You probably added this when you changed my fixes.

Example:

11/02/2012 - 12/03/2012 + direction today past:
It displays: Jan + Feb instead of the correct which should be "Feb + Mar"

If the views can display the full range, it should always display the full range.

Selecting a date sets the day before as active

I have a picker set up with these options
$('#booking_date').kalendae({
weekStart: 1,
direction: "today-future",
blackout: function (date) {return [0,1,1,1,0,0,0][Kalendae.moment(date).day()];}
})

On the first month showing (March by default) I can pick dates correctly, the moment I go to the next month, clicking a day will set the day before as active! It even allows days that aren't selectable to be selected.

Here's what happens when I select April 12th

I'm based in NZ, and wonder if it's something to do with time zones?

Allows selecting blackout days when using range mode

When using the mode: 'range' option alongside blackout dates, the range can be selected through the blackout dates.

Here's an example: http://jsfiddle.net/KBSd9/

Why config.format is not always used?

See aratak#1

I can't do PR, because previous PR still unmerged.

setSelected() should change the displayed month if needed

Currently, if you call setSelected with a date that's outside of the currently displayed months, it's not visible that something is selected. It would be nice if Kalendae would switch the currently displayed month in that situation.

Time?

I didn't want to write an issue but this is the place I can ask.

First off, nice piece of calendar. Very neat looking and simple. :) Any plans of having a time-picker or slider of some sort?

After changing .viewStartDate property, arrow navigation doesn't work

After instantiating a new Kalendae object like this:

var kal = new Kalendae('calendar', {} );

calendar's arrow navigation keys work as excepted. But if I later do this:

var newDate = '2013-02-21';
kal.setSelected(newDate);
kal.viewStartDate = newDate;
kal.draw();

the selected date and calendar view moves to desired date but the arrow keys no longer work. In JS console, I get an error message "Object 2013-02-21 has no method 'add'". I tried different string formatting and even Date and moment objects as a value of newDate but with no luck.

How can I limit maximum days in multi-select?

I only want to limit users to select only 2 days for the multi-select calendar. Is that possible?