jQuery touch friendly calendar
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
README inital commit Apr 7, 2011
index.html

README

jtCalendar - a touchable calendar using jQuery

BASIC EXAMPLE:

<link rel="stylesheet" href="src/calendar.css" />
<sctipt src="/path/to/jquery-1.5.1.js"></script>
<script src="/path/to/calendar.js"></script>
<!-- optional but recommended -->
<script src="/path/to/calendarswipe.jquery.js"></script>
<script>
jQuery(document).ready(function($){
    var c = new Calendar();
    $("input.jtCalendar").focus(function(){
        c.setValue(this);
    });
});
</script>

ADVANCED:
The setValue() method automatically binds the calendar to an input box. 
The current value will be parsed and replaced with a new date. If you 
want to specify your own behavior, you can take a more hands-on 
approach.

<!-- same script tags as before -->
<script>
    var c = new Calendar();
    c.onSelect = function(date, event) {
        // date is a javascript Date object
        // event is a simple object -- set event.cancel = true
        // to prevent the calendar from closing. You can also
        // return false.
    };
    c.onCancel = function(event) {
        // event is the same as onSelect. You can also return
        // false to prevent the calendar from closing.
    }
    c.setClass = function(date) {
        // date is a javascript Date that is about to have its cell 
        // rendered. The value returned from this function will be added
        // to the date's table cell to determine if it is highlighted
        // or disabled. You can use whatever class names you want, but
        // the special class "disabled" will prevent that date from 
        // being selected. The current day automatically gets a "today"
        // class added, and dates outside of the current month have "x".
        // By default "selected" will highlight the date, but you can
        // style classes however you want. For example:
        if (date.getDay() === 0 || date.getDay() === 6) {
            return "weekend";
        }
        if (date.getMonth() === 3 && date.getDate() === 5) {
            return "birthday"
        }
		// NOTE: setClass() is also called for the "today" button on the
		// bottom of the calendar popup.
    }

    // to show the calendar, set the current view and call show()
    // standard day view:
    c.showDays(date.getFullYear(), date.getMonth());
    // or start with the month picker,
    c.showMonths(date.getFullYear());
    // year picker,
    c.showYears(date.getFullYear());
    // or decade picker.
    c.showDecades(date.getFullYear());

    // Now show the popup.
    c.show({top: 0, left:0});
    // When you are done, close it (it will be closed automatically when
    // you click on a date.
    c.hide();
    // Or remove it completely. Once it is destroyed, you can no longer
    // show() the popup. Only use this if you re-create the calendar 
    // every time it is used.
    c.destroy();

    // That's it!
</script>