https://github.com/matthewbub/calendar-widgets
Craft beautifully robust date components in React.
https://github.com/matthewbub/calendar-widgets
calendar calendar-widget component-library javascript open-source react typescript widgets
Last synced: about 1 year ago
JSON representation
Craft beautifully robust date components in React.
- Host: GitHub
- URL: https://github.com/matthewbub/calendar-widgets
- Owner: matthewbub
- License: mit
- Created: 2022-06-01T01:51:31.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-04T08:28:00.000Z (almost 2 years ago)
- Last Synced: 2025-05-03T01:27:41.538Z (about 1 year ago)
- Topics: calendar, calendar-widget, component-library, javascript, open-source, react, typescript, widgets
- Language: TypeScript
- Homepage: http://calendar-widgets.com/
- Size: 8.88 MB
- Stars: 4
- Watchers: 2
- Forks: 12
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Calendar Widgets
[](https://github.com/9mbs/calendar-widgets/blob/v0.0.13/LICENSE)
Craft beautifully robust **date** components in React.
- [Documentation](https://calendar-widgets.com)
- [Changelog](https://calendar-widgets.com/changelog)
- [Getting Started](#getting-started)
- [Contributing & Bug Reports](#contributing--bug-reports)
## Getting Started
To begin, you'll want to add the `calendar-widgets` package to a new or existing React project.
```sh
# npm
npm install calendar-widgets
# yarn
yarn add calendar-widgets
# pnpm
pnpm add calendar-widgets
```
## Examples
To help you get started, take a look at this simple implementation of a Calendar. Here we're overriding the default component used to display a particular date with our custom variation.
We're also passing an array of custom dates. When the custom date's `date` aligns with the `date` in our `CustomDay` component, we'll have access to that custom date.
```jsx
import React from 'react';
import { Calendar } from 'calendar-widgets';
import 'calendar-widgets/styles/Calendar-grid.css';
/* defining an optional custom day component */
const CustomDay = ({date, customDate}) => (
{date.getDate()}
{customDate?.name && {customDate?.name}}
);
const App = () => {
return (
)
};
```
## Contributing / Bug Reports
We'd be appreciative of bug reports/ fixes, and would gladly accept new proposals.
If you'd like to contribute to an existing issue, kindly communicate through the designated ticket to avoid overlapping efforts. Check out the [Open Issues](https://github.com/matthewbub/calendar/issues?q=is%3Aissue+is%3Aopen) and our [Contributing Guide](./CONTRIBUTING.md) for more information.
This project requires [Node.js](https://nodejs.org/en) and [pnpm](https://pnpm.io/) to be installed. If needed, you can install them from Node.js website and pnpm website.
### Contributors Setup
1. Fork this repository
2. Clone the forked repository to your local machine, or open a new Code Space
3. Checkout to a clean branch. e.g `git checkout feature/addSomeCode` (Please be more descriptive)
4. Install the dependencies via `pnpm install`
5. You're all set up. Run `pnpm run build` to run the production build and ensure everything is working. If not, please open an issue in 🙂
### Scripts
- `pnpm run build` Run the build that we push to NPM
- `pnpm run dev` Run the dev build that does not minify the code
- `pnpm run storybook` Run Storybook for local development
- `pnpm run lint` Run ESLint to catch errors
- `pnpm run lint:fix` Run ESLint to catch auto-fix errors