https://github.com/greon5/calendify-react
A comprehensive calendar UI library based on material-ui with the aim for different way of display and interaction with dates
https://github.com/greon5/calendify-react
javascript material-ui-react materialui react react-component react-component-library react-components reactjs typescript
Last synced: 16 days ago
JSON representation
A comprehensive calendar UI library based on material-ui with the aim for different way of display and interaction with dates
- Host: GitHub
- URL: https://github.com/greon5/calendify-react
- Owner: GreoN5
- License: mit
- Created: 2023-08-14T22:21:47.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-31T10:46:38.000Z (over 1 year ago)
- Last Synced: 2025-05-21T07:47:41.061Z (about 1 month ago)
- Topics: javascript, material-ui-react, materialui, react, react-component, react-component-library, react-components, reactjs, typescript
- Language: TypeScript
- Homepage:
- Size: 778 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# calendify-react
**calendify-react** is a comprehensive calendar UI library with the aim for different way of display and interaction
with dates
## Installation
**You can install Calendify React using npm:**
```bash
npm install calendify-react
```
**Or using yarn:**
```bash
yarn add calendify-react
```
## Getting started with calendify-react
Here is an example of a basic app using calendify-react's `Calendar` component:
```jsx
import React from 'react';
import { Calendar } from 'calendify-react';
function App() {
return ;
}
export default App;
```
## Props
`Calendar` component accepts the following props:
- `useCheckbox` (boolean): A flag to indicate whether to use a checkbox for each calendar date. When set to `true`, the
checkbox will
be displayed.
- `checkboxProps` (object): An object containing properties related to the checkbox.
- `onChange` (function): A callback function to be executed when the checkbox's value changes. This function should
accept
an event of type ChangeEvent, allowing you to access the checkbox's new state.
### Example with `useCheckbox`:
```jsx
import React from 'react';
import { Calendar } from 'calendify-react';
function App() {
return (
{
console.log(e.target.value)
},
}}
/>
);
}
export default App;
```
- `useModal` (boolean): A flag to indicate whether to use a modal for each calendar date. When set to `true`, a modal
button
will be
displayed.
- `modalProps` (object): An object containing properties related to the modal.
- `modalContent` (ReactNode): Ability to add custom modal content to be displayed instead of the default
one.
- `onSaveChanges` (function): A callback function to be executed when changes are saved within the modal.
### Example with `useModal`:
```jsx
import React from 'react';
import { Calendar } from 'calendify-react';
function App() {
return (
console.log('calendar modal'),
}}
/>
);
}
export default App;
```
### Example with custom `modalContent`:
```jsx
import React from 'react';
import { Box, TextField } from '@mui/material';
import { Calendar } from 'calendify-react';
function App() {
return (
),
}}
/>
);
}
export default App;
```
### Disclaimer
Please note that the `useCheckbox`, `checkboxProps`, `useModal` and `modalProps` props are mutually exclusive and should
not be used together. Choose either `useCheckbox`, `checkboxProps` or `useModal`, `modalProps` based on your component's
functionality.
## Storybook
[Visit storybook](https://calendify-react-storybook.netlify.app/ "Visit Storybook")
## Contributing
Contributions are welcome! If you have suggestions, bug reports, or feature requests, please open an issue or submit a
pull request.
## License
This project is licensed under the terms of the
[MIT license](/LICENSE).