@lls/react-light-calendar
Advanced tools
Readme
@lls/react-light-calendar is a tiny calendar component which does NOT depend on any date lib.
@lls/react-light-calendar use timestamp format date which allows it to be coupled with any date lib.
Because most calendar components depend on heavy date library. This make the bundle become very big and forces you to use it's date library dependence. This can be a huge problem on big projects that already have had a lot of dependencies, especially for projects that use another date library.
The purpose of @lls/react-light-calendar is to propose a minimalistic and powerful component to be able to be used on any project.
Install @lls/react-light-calendar via npm :
npm install --save @lls/react-light-calendar
Or via yarn :
yarn add @lls/react-light-calendar
Use it :
import Calendar from '@lls/react-light-calendar'
import '@lls/react-light-calendar/dist/index.css' // Default Style
<Calendar startDate={startDate} onChange={this.onChange} />
❗️Notice the style import. If you want to use a custom style, just remove this line and use your own style.
❗️Most important elements of react-light-calendar have a class, so you can use them to override the current style.
@lls/react-light-calendar has react and react-dom as peer dependencies.
| @lls/react-light-calendar | react / react-dom |
|---|---|
| 2.x | >= 16.3.0 |
| 1.x | >= 16.3.0 |
According to BrowseEmAll.
2.0.6 : Fix month/year navigation (https://github.com/lelivrescolaire/react-light-calendar/issues/6)import ReactLightCalendar from '@lls/react-light-calendar'
import '@lls/react-light-calendar/dist/index.css'
const DAY_LABELS = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche']
const MONTH_LABELS = ['Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aûot', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
class Calendar extends Component {
constructor(props) {
super(props)
const date = new Date()
const startDate = date.getTime()
this.state = {
startDate, // Today
endDate: new Date(startDate).setDate(date.getDate() + 6) // Today + 6 days
}
}
onChange = (startDate, endDate) => this.setState({ startDate, endDate })
render = () => {
const { startDate, endDate } = this.state
return (
<ReactLightCalendar startDate={startDate} endDate={endDate} onChange={this.onChange} range displayTime />
)
}
}
The best way to avoid massive code and code duplication is to create a Calendar composant based on react-light-component and use it where you want.
A fully example is available here.
react-light-component is delivered with only one component : a calendar.
If you want to use it like a datetime input, you can follow this examples.
The following list represent all available @lls/react-light-calendar's props.
Default date (timestamp) selected or first date selected if endDate is defined.
Last date selected.
This function is called every time a day is selected/updated.
This function describe wich days must be disabled (when disabled, a day can't be selected).
Example, disabled all passed day :
<Calendar disableDates={date => date < new Date().getTime()} />
If time input must be displayed.
['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']Days name, starting with Monday.
['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']Months name, starting with January.
UTCCalendar timezone.
This prop marks the date with the dot below. It can be a function like in disableDates. This is useful when you want to mark the days with the events.
Example, mark all passed day :
<Calendar markedDays={date => date < new Date().getTime()} />
mark today and tomorrow :
const today = new Date().getTime()
const tmr = today + (24*60*60*1000)
...
<Calendar markedDays={[today, tmr]} />
// Clone the project
git clone git@github.com:lelivrescolaire/react-light-calendar.git
// ⬇️ Install node modules
npm install
// 🚀 Start the project
npm run start
// ✅ Run tests
npm run test
// 🏗️ Build the project
npm run build
// 👀 Keep an eye on the bundle size
npm run size
FAQs
🗓 A lightweight calendar for React (~3 kb)
The npm package @lls/react-light-calendar receives a total of 277 weekly downloads. As such, @lls/react-light-calendar popularity was classified as not popular.
We found that @lls/react-light-calendar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.