hanse / React Calendar
Licence: mit
React.js Calendar Component (npm install react-calendar-component) 📅
Stars: ✭ 142
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Calendar
Vue Ctk Date Time Picker
VueJS component to select dates & time, including a range mode
Stars: ✭ 707 (+397.89%)
Mutual labels: calendar, datepicker
Laydate
layDate(日期与时间组件) 是 layui 独立维护的三大组件之一
Stars: ✭ 1,066 (+650.7%)
Mutual labels: calendar, datepicker
Ion2 Calendar
📅 A date picker components for ionic2 /ionic3 / ionic4
Stars: ✭ 537 (+278.17%)
Mutual labels: calendar, datepicker
Persiandatepicker
An Android DatePicker for Persian Calendar
Stars: ✭ 86 (-39.44%)
Mutual labels: calendar, datepicker
React Modern Calendar Datepicker
A modern, beautiful, customizable date picker for React
Stars: ✭ 555 (+290.85%)
Mutual labels: calendar, datepicker
React Calendar
A React Native inspired date list renderer
Stars: ✭ 34 (-76.06%)
Mutual labels: calendar, datepicker
Zebra datepicker
A super-lightweight, highly configurable, cross-browser date / time picker jQuery plugin
Stars: ✭ 367 (+158.45%)
Mutual labels: calendar, datepicker
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (-40.14%)
Mutual labels: calendar, datepicker
Vue Draggablecal
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped
Stars: ✭ 79 (-44.37%)
Mutual labels: calendar, datepicker
Angular Moment Picker
Angular Moment Picker is an AngularJS directive for date and time picker using Moment.js.
Stars: ✭ 536 (+277.46%)
Mutual labels: calendar, datepicker
React Numpad
A numpad for number, date and time, built with and for React.
Stars: ✭ 117 (-17.61%)
Mutual labels: calendar, datepicker
Calendarview
An Easy to Use Calendar for iOS (Swift 5.0)
Stars: ✭ 429 (+202.11%)
Mutual labels: calendar, datepicker
Vue Hotel Datepicker
Vue date range picker component
Stars: ✭ 665 (+368.31%)
Mutual labels: calendar, datepicker
React Infinite Calendar
✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.
Stars: ✭ 3,828 (+2595.77%)
Mutual labels: calendar, datepicker
Rsdayflow
iOS 7+ Calendar (Date Picker) with Infinite Scrolling.
Stars: ✭ 843 (+493.66%)
Mutual labels: calendar, datepicker
Vue Functional Calendar
Vue.js Functional Calendar | Component/Package
Stars: ✭ 314 (+121.13%)
Mutual labels: calendar, datepicker
Rkcalendar
SwiftUI Simple Calendar / Date Picker for iOS
Stars: ✭ 349 (+145.77%)
Mutual labels: calendar, datepicker
Horizontal Calendar
A material horizontal calendar view for Android based on RecyclerView
Stars: ✭ 1,155 (+713.38%)
Mutual labels: calendar, datepicker
Pg Calendar
📆 beautiful and eidetic date picker
Stars: ✭ 109 (-23.24%)
Mutual labels: calendar, datepicker
react-calendar
React calendar component inspired by CLNDR.js.
$ npm install react-calendar-component
Note: the npm name is react-calendar-component
!
This is a low-level component for rendering monthly calendars using React. The
component will call renderDay
and renderHeader
functions provided by you to
make a calendar for the month of the given Date
. Very basic default
implementations are provided for both, but they can be overridden to fit your
use case. This
example
shows how to create a regular grid calendar.
Live Demo
http://hanse.github.io/react-calendar/
Usage
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Calendar } from 'react-calendar-component';
import moment from 'moment';
import 'moment/locale/nb';
class CalendarExample extends Component {
state = {
date: moment()
};
render() {
return (
<Calendar
onChangeMonth={date => this.setState({ date })}
date={this.state.date}
onPickDate={date => console.log(date)}
renderDay={({ day, classNames, onPickDate }) => (
<div
key={day.format()}
className={cx(
'Calendar-grid-item',
day.isSame(moment(), 'day') && 'Calendar-grid-item--current',
classNames
)}
onClick={e => onPickDate(day)}
>
{day.format('D')}
</div>
)}
renderHeader={({ date, onPrevMonth, onNextMonth }) => (
<div className="Calendar-header">
<button onClick={onPrevMonth}>«</button>
<div className="Calendar-header-currentDate">
{date.format('MMMM YYYY')}
</div>
<button onClick={onNextMonth}>»</button>
</div>
)}
/>
);
}
}
render(<CalendarExample />, document.getElementById('calendar'));
License
MIT
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].