FalkoJoseph / Things Calendar
Licence: mit
Simple but elegant datepicker for the web — inspired by Things for mac
Stars: ✭ 165
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Things Calendar
Calendar
📆 calendar 日历
Stars: ✭ 119 (-27.88%)
Mutual labels: date, component, calendar, picker, datepicker
Vuetify Daterange Picker
The missing date range picker for Vuetify JS you have been looking for.
Stars: ✭ 192 (+16.36%)
Mutual labels: date, component, picker, datepicker
React Infinite Calendar
✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.
Stars: ✭ 3,828 (+2220%)
Mutual labels: date, component, calendar, datepicker
Vue Ctk Date Time Picker
VueJS component to select dates & time, including a range mode
Stars: ✭ 707 (+328.48%)
Mutual labels: date, calendar, picker, datepicker
Angular Moment Picker
Angular Moment Picker is an AngularJS directive for date and time picker using Moment.js.
Stars: ✭ 536 (+224.85%)
Mutual labels: date, calendar, picker, datepicker
Md Date Time Picker
An implementation of Material Design Picker components in vanilla CSS, JS, and HTML
Stars: ✭ 272 (+64.85%)
Mutual labels: date, design, calendar, picker
Rsdayflow
iOS 7+ Calendar (Date Picker) with Infinite Scrolling.
Stars: ✭ 843 (+410.91%)
Mutual labels: date, design, calendar, datepicker
Calendarview
An Easy to Use Calendar for iOS (Swift 5.0)
Stars: ✭ 429 (+160%)
Mutual labels: date, calendar, datepicker
Horizontalpicker
DatePicker horizontal con selección smooth por día para Android.
Stars: ✭ 116 (-29.7%)
Mutual labels: date, picker, datepicker
Datepicker
A Date Picker with Calendar for iPhone and iPad Apps.
Stars: ✭ 103 (-37.58%)
Mutual labels: date, picker, datepicker
Zebra datepicker
A super-lightweight, highly configurable, cross-browser date / time picker jQuery plugin
Stars: ✭ 367 (+122.42%)
Mutual labels: date, calendar, datepicker
React Modern Calendar Datepicker
A modern, beautiful, customizable date picker for React
Stars: ✭ 555 (+236.36%)
Mutual labels: calendar, picker, datepicker
Singledateandtimepicker
You can now select a date and a time with only one widget !
Stars: ✭ 921 (+458.18%)
Mutual labels: date, design, picker
Pg Calendar
📆 beautiful and eidetic date picker
Stars: ✭ 109 (-33.94%)
Mutual labels: design, calendar, datepicker
Mdatepickerview
Quick and easy date picker.
Stars: ✭ 373 (+126.06%)
Mutual labels: date, picker, datepicker
React Calendar
A React Native inspired date list renderer
Stars: ✭ 34 (-79.39%)
Mutual labels: component, calendar, datepicker
React Picky Date Time
A react component for date time picker. Online demo examples
Stars: ✭ 31 (-81.21%)
Mutual labels: date, picker, datepicker
Pickadate.js
The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
Stars: ✭ 7,753 (+4598.79%)
Mutual labels: date, calendar, picker
React Native Calendar Select
A component to select period from calendar like Airbnb
Stars: ✭ 279 (+69.09%)
Mutual labels: date, calendar, picker
Laydate
layDate(日期与时间组件) 是 layui 独立维护的三大组件之一
Stars: ✭ 1,066 (+546.06%)
Mutual labels: date, calendar, datepicker
Things-calendar
Installation
npm install things-calendar
Usage
import ThingsCalendar from 'things-calendar';
<ThingsCalendar
ref={calendar => this.calendar = calendar}
show={true}
onSelect={(date) => console.log(date)}
/>
Note: This library requires react
Configuration
Things-calendar leaves the heavy lifting up to pikaday and supports every feature pikaday has to offer:
-
field
bind the datepicker to a form field -
trigger
use a different element to trigger opening the datepicker, see [trigger example][] (default tofield
) -
bound
automatically show/hide the datepicker onfield
focus (defaulttrue
iffield
is set) -
ariaLabel
data-attribute on the input field with an aria assistance tekst (only applied whenbound
is set) -
position
preferred position of the datepicker relative to the form field, e.g.:top right
,bottom right
Note: automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see [positions example][] (default to 'bottom left') -
reposition
can be set to false to not reposition datepicker within the viewport, forcing it to take the configuredposition
(default: true) -
container
DOM node to render calendar into, see [container example][] (default: undefined) -
format
the default output format for.toString()
andfield
value (requires [Moment.js][moment] for custom formatting) -
formatStrict
the default flag for moment's strict date parsing (requires [Moment.js][moment] for custom formatting) -
toString(date, format)
function which will be used for custom formatting. This function will take precedence overmoment
. -
parse(dateString, format)
function which will be used for parsing input string and getting a date object from it. This function will take precedence overmoment
. -
defaultDate
the initial date to view when first opened -
setDefaultDate
make thedefaultDate
the initial selected value -
firstDay
first day of the week (0: Sunday, 1: Monday, etc) -
minDate
the minimum/earliest date that can be selected (this should be a native Date object - e.g.new Date()
ormoment().toDate()
) -
maxDate
the maximum/latest date that can be selected (this should be a native Date object - e.g.new Date()
ormoment().toDate()
) -
disableWeekends
disallow selection of Saturdays or Sundays -
disableDayFn
callback function that gets passed a Date object for each day in view. Should return true to disable selection of that day. -
yearRange
number of years either side (e.g.10
) or array of upper/lower range (e.g.[1900,2015]
) -
showWeekNumber
show the ISO week number at the head of the row (defaultfalse
) -
pickWholeWeek
select a whole week instead of a day (defaultfalse
) -
isRTL
reverse the calendar for right-to-left languages -
i18n
language defaults for month and weekday names (see internationalization below) -
yearSuffix
additional text to append to the year in the title -
showMonthAfterYear
render the month after year in the title (defaultfalse
) -
showDaysInNextAndPreviousMonths
render days of the calendar grid that fall in the next or previous months (default: false) -
enableSelectionDaysInNextAndPreviousMonths
allows user to select date that is in the next or previous months (default: false) -
numberOfMonths
number of visible calendars -
mainCalendar
whennumberOfMonths
is used, this will help you to choose where the main calendar will be (defaultleft
, can be set toright
). Only used for the first display or when a selected date is not already visible -
events
array of dates that you would like to differentiate from regular days (e.g.['Sat Jun 28 2017', 'Sun Jun 29 2017', 'Tue Jul 01 2017',]
) -
theme
define a classname that can be used as a hook for styling different themes, see [theme example][] (defaultnull
) -
blurFieldOnSelect
defines if the field is blurred when a date is selected (defaulttrue
) -
onSelect
callback function for when a date is selected -
onOpen
callback function for when the picker becomes visible -
onClose
callback function for when the picker is hidden -
onDraw
callback function for when the picker draws a new month -
keyboardInput
enable keyboard input support (defaulttrue
)
Configurations at runtime
import ThingsCalendar from 'things-calendar';
<ThingsCalendar
ref={calendar => this.calendar = calendar}
show={true}
onSelect={this.onSelect}
/>
// Reset datepicker onSelect
onSelect(date) {
this.calendar.calendarPicker.goToToday();
this.calendar.calendarPicker.setDate(null);
}
For a full list of methods for the calendarPicker check out pikaday's official documentation
Special thanks to
Ionicons for an awesome icon set Ionicons
Calendar picker Pikaday
The best to-do app for mac on the market Things
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].