0.2.3 • Published 9 years ago
callie v0.2.3
📅 Callie
⚠ This package currently only contains the logic for a date picker and does not claim to be a fully functional UI component at this time!
Callie is a lightweight modular datepicker splitted into three main components:
- Date logik (model)
- Transformation and mapping to prepare for view
- Render logik (view) Each of these components can be replaced by other solutions independently.

JS options
| Name | Description | Default |
|---|---|---|
| weeksPerMonth | (number) Amount of weeks per month | 6 |
| daysPerWeek | (number) Amount of days per week | 7 |
| useWeeks | (boolean) Render row with day name shorts in the month view | true |
| containerSelector | (string) Selector for the main container | '[data-role=container]' |
| daysTargetSelector | (string) Selector of node to insert days list in | '[data-role=days]' |
| monthsTargetSelector | (string) Selector of node to insert month list in | '[data-role=months]' |
| yearsTargetSelector | (string) Selector of node to insert years list in | '[data-role=years]' |
| selectedStateClassName | (string) ClassName to be used on selected date elements | 'selected' |
| currentStateClassName | (string) ClassName to be used on current date elements | 'current' |
| disabledStateClassName | (string) ClassName to be used on disabled date elements | 'disabled' |
| format | (string) Date format template for parsing and formating fallback | 'dd.mm.yyyy' |
| noTouch | (boolean) Set if picker should be used even on touch devices | false |
| isOpen | (boolean) Picker initially opened | false |
| dateNamesFallback | (object) Fallback for date names for browsers not supporting Internatinalization API | English names |
CSS modifer
| Modifier | Description |
|---|---|
| --slide | Adds slide transition between views |
| --fade | Adds fade transition between views |
Browser support
- Chrome
- Safari 9+
- For Safari 9 see
dateNamesFallbackandformatin JS options
- For Safari 9 see
- Firefox
- Internet Explorer 11+
Roadmap
- Providing a fully functional UI component
- Implementing an API to set and get properties of datepicker instance