react-native-ll-calendar 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +89 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,9 +1,97 @@
|
|
|
1
1
|
# react-native-ll-calendar
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A horizontally scrollable monthly calendar component for React Native with event support.
|
|
4
4
|
|
|
5
5
|
<img src="assets/screen-shot.png" width="320px">
|
|
6
6
|
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install react-native-ll-calendar
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
or
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
yarn add react-native-ll-calendar
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { MonthCalendar, CalendarEvent } from 'react-native-ll-calendar';
|
|
23
|
+
|
|
24
|
+
const events: CalendarEvent[] = [
|
|
25
|
+
{
|
|
26
|
+
id: '1',
|
|
27
|
+
title: 'Meeting',
|
|
28
|
+
start: new Date(2025, 9, 5),
|
|
29
|
+
end: new Date(2025, 9, 5),
|
|
30
|
+
backgroundColor: '#ff6b6b',
|
|
31
|
+
borderColor: '#e55353',
|
|
32
|
+
color: '#0e0e0e',
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
id: '2',
|
|
36
|
+
title: 'Conference',
|
|
37
|
+
start: new Date(2025, 9, 10),
|
|
38
|
+
end: new Date(2025, 9, 12),
|
|
39
|
+
backgroundColor: '#4ecdc4',
|
|
40
|
+
borderColor: '#45b7aa',
|
|
41
|
+
color: '#0e0e0e',
|
|
42
|
+
},
|
|
43
|
+
];
|
|
44
|
+
|
|
45
|
+
function App() {
|
|
46
|
+
const [date, setDate] = useState(new Date());
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<MonthCalendar
|
|
50
|
+
defaultDate={date}
|
|
51
|
+
weekStartsOn={1}
|
|
52
|
+
onChangeDate={(newDate) => setDate(newDate)}
|
|
53
|
+
events={events}
|
|
54
|
+
onPressEvent={(event) => console.log('Event pressed:', event.title)}
|
|
55
|
+
onPressCell={(date) => console.log('Cell pressed:', date)}
|
|
56
|
+
/>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## API
|
|
62
|
+
|
|
63
|
+
### MonthCalendar Props
|
|
64
|
+
|
|
65
|
+
| Prop | Type | Required | Default | Description |
|
|
66
|
+
|------|------|----------|---------|-------------|
|
|
67
|
+
| `defaultDate` | `Date` | Yes | - | Initial date to display |
|
|
68
|
+
| `weekStartsOn` | `0 \| 1` | No | `0` | Week start day (0 = Sunday, 1 = Monday) |
|
|
69
|
+
| `onChangeDate` | `(date: Date) => void` | No | - | Callback when month changes |
|
|
70
|
+
| `events` | `CalendarEvent[]` | Yes | - | Array of calendar events |
|
|
71
|
+
| `onPressEvent` | `(event: CalendarEvent) => void` | No | - | Callback when event is pressed |
|
|
72
|
+
| `onPressCell` | `(date: Date) => void` | No | - | Callback when date cell is pressed |
|
|
73
|
+
|
|
74
|
+
### CalendarEvent
|
|
75
|
+
|
|
76
|
+
| Property | Type | Required | Description |
|
|
77
|
+
|----------|------|----------|-------------|
|
|
78
|
+
| `id` | `string` | Yes | Unique identifier |
|
|
79
|
+
| `title` | `string` | Yes | Event title |
|
|
80
|
+
| `start` | `Date` | Yes | Start date |
|
|
81
|
+
| `end` | `Date` | Yes | End date |
|
|
82
|
+
| `backgroundColor` | `string` | Yes | Background color |
|
|
83
|
+
| `borderColor` | `string` | Yes | Border color |
|
|
84
|
+
| `color` | `string` | Yes | Text color |
|
|
85
|
+
|
|
86
|
+
## Features
|
|
87
|
+
|
|
88
|
+
- Horizontally scrollable month view
|
|
89
|
+
- Multi-day event support
|
|
90
|
+
- Customizable event colors
|
|
91
|
+
- Event and date cell press handlers
|
|
92
|
+
- Configurable week start day (Sunday or Monday)
|
|
93
|
+
- Spans 10 years before and after the default date
|
|
94
|
+
|
|
7
95
|
## License
|
|
8
96
|
|
|
9
97
|
MIT
|