Skip to content

Commit

Permalink
fix docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@Inbal-Tish
Inbal-Tish committed Mar 20, 2023
1 parent 1a35e84 commit f6dfb32
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 86 deletions.
95 changes: 58 additions & 37 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,21 @@ The package is compatible with both **Android** and **iOS**

<br>


> ### **Official documentation**
> ### **Official documentation**
>
> This README provides basic examples of how to get started with `react-native-calendars`. For detailed information, refer to the [official documentation site](https://wix.github.io/react-native-calendars/docs/intro).

## Features ✨
* Pure JS. No Native code required
* Date marking - dot, multi-dot, period, multi-period and custom marking
* Customization of style, content (days, months, etc) and dates
* Detailed documentation and examples
* Swipeable calendar with flexible custom rendering
* Scrolling to today, selecting dates, and more
* Allowing or blocking certain dates
* Accessibility support
* Automatic date formatting for different locales

- Pure JS. No Native code required
- Date marking - dot, multi-dot, period, multi-period and custom marking
- Customization of style, content (days, months, etc) and dates
- Detailed documentation and examples
- Swipeable calendar with flexible custom rendering
- Scrolling to today, selecting dates, and more
- Allowing or blocking certain dates
- Accessibility support
- Automatic date formatting for different locales

## Try it out ⚡

Expand All @@ -52,63 +51,68 @@ You can check example screens source code in [example module screens](https://gi

This project is compatible with Expo/CRNA (without ejecting), and the examples have been [published on Expo](https://expo.io/@community/react-native-calendars-example)


## Getting Started 🔧

Here's how to get started with react-native-calendars in your React Native project:

### Install the package:

Using `npm`:

```
$ npm install --save react-native-calendars
```

Using `Yarn`:

```
$ yarn add react-native-calendars
```

**RN Calendars is implemented in JavaScript, so no native module linking is required.**

## Usage 🚀

Basic usage examples of the library

##### **For detailed information on using this component, see the [official documentation site](https://wix.github.io/react-native-calendars/docs/intro)**

### Importing the `Calendar` component

```javascript
import {`[Calendar](#calendar), [CalendarList](#calendarlist), [Agenda](#agenda)`} from 'react-native-calendars';
```

### Use the `Calendar` component in your app:

```javascript
<Calendar
onDayPress={(day) => {console.log('selected day', day)}}
onDayPress={day => {
console.log('selected day', day);
}}
/>
```


## Some Code Examples

Here are a few code snippets that demonstrate how to use some of the key features of react-native-calendars:

Here are a few code snippets that demonstrate how to use some of the key features of react-native-calendars:

### Creating a basic calendar with default settings:

```javascript
import React, { useState } from 'react';
import { Calendar, LocaleConfig } from 'react-native-calendars';
import React, {useState} from 'react';
import {Calendar, LocaleConfig} from 'react-native-calendars';

const App = () => {
const [selected, setSelected] = useState('');

return (
<Calendar
onDayPress={(day) => {
onDayPress={day => {
setSelected(day.dateString);
}}
markedDates={{
[selected]: { selected: true, disableTouchEvent: true, selectedDotColor: 'orange' },
[selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
}}
/>
);
Expand All @@ -118,6 +122,7 @@ export default App;
```

### Customize the appearance of the calendar:

```javascript
<Calendar
// Customize the appearance of the calendar
Expand All @@ -129,21 +134,24 @@ export default App;
// Specify the current date
current={'2012-03-01'}
// Callback that gets called when the user selects a day
onDayPress={(day) => {console.log('selected day', day)}}
onDayPress={day => {
console.log('selected day', day);
}}
// Mark specific dates as marked
markedDates={{
'2012-03-01': {selected: true, marked: true, selectedColor: 'blue'},
'2012-03-02': {marked: true},
'2012-03-03': {selected: true, marked: true, selectedColor: 'blue'},
'2012-03-03': {selected: true, marked: true, selectedColor: 'blue'}
}}
/>
```

### Configuring the locale:

```javascript
import {LocaleConfig} from 'react-native-calendars';
import React, { useState } from 'react';
import { Calendar, LocaleConfig } from 'react-native-calendars';
import React, {useState} from 'react';
import {Calendar, LocaleConfig} from 'react-native-calendars';

LocaleConfig.locales['fr'] = {
monthNames: [
Expand All @@ -160,7 +168,20 @@ LocaleConfig.locales['fr'] = {
'Novembre',
'Décembre'
],
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
monthNames: [
'Janvier',
'Février',
'Mars',
'Avril',
'Mai',
'Juin',
'Juillet',
'Août',
'Septembre',
'Octobre',
'Novembre',
'Décembre'
],
monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
Expand All @@ -174,11 +195,11 @@ const App = () => {

return (
<Calendar
onDayPress={(day) => {
onDayPress={day => {
setSelected(day.dateString);
}}
markedDates={{
[selected]: { selected: true, disableTouchEvent: true, selectedDotColor: 'orange' },
[selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
}}
/>
);
Expand All @@ -188,6 +209,7 @@ export default App;
```

### Adding a global theme to the calendar:

```javascript
import React, { useState } from 'react';
import { Calendar, LocaleConfig } from 'react-native-calendars';
Expand All @@ -212,16 +234,16 @@ const App = () => {
dayTextColor: '#2d4150',
textDisabledColor: '#d9e
```
## Customized Calendar Examples
### Calendar
<img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/calendar.gif?raw=true">
<img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/calendar.gif?raw=true">
### Dot marking
<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking1.png?raw=true">
<img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking1.png?raw=true">
### Multi-Dot marking
Expand Down Expand Up @@ -259,7 +281,6 @@ const App = () => {
<img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/agenda.gif?raw=true">
<br>
## Authors
Expand All @@ -271,15 +292,15 @@ See also the list of [contributors](https://github.com/wix/react-native-calendar
## Contributing
We welcome contributions to react-native-calendars.
We welcome contributions to react-native-calendars.
If you have an idea for a new feature or have discovered a bug, please open an issue.
If you have an idea for a new feature or have discovered a bug, please open an issue.
Please `npm run test` and `npm run lint` before pushing changes.
Please `npm run test` and `npm run lint` before pushing changes.
Don't forget to add a **title** and a **description** explaining the issue you're trying to solve and your proposed solution.
Don't forget to add a **title** and a **description** explaining the issue you're trying to solve and your proposed solution.
Screenshots and Gifs are VERY helpful to add to the PR for reviews.
Screenshots and Gifs are VERY helpful to add to the PR for reviews.
Please DO NOT format the files - we're trying to keep a unified syntax and keep the reviewing process fast and simple.

Expand Down
8 changes: 4 additions & 4 deletions docsRNC/docs/Agenda.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ Agenda component
This component extends **[CalendarList](https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.tsx), [FlatList](https://reactnative.dev/docs/flatlist)** props.
:::

<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}><img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/agenda.gif?raw=true'}/>

<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}>
<img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/agenda.gif?raw=true'}/>
</div>

## API
Expand Down Expand Up @@ -60,11 +60,11 @@ Whether to show items only for the selected date
Replace default ActivityIndicator with a custom one
<span style={{color: 'grey'}}>() => JSX.Element</span>

<br>
<br/>

## Agenda Examples

<br>
<br/>

```javascript
<Agenda
Expand Down
35 changes: 13 additions & 22 deletions docsRNC/docs/Calendar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ Calendar component
This component extends **[CalendarHeader](https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/index.tsx), [BasicDay](https://github.com/wix/react-native-calendars/blob/master/src/calendar/day/basic/index.tsx)** props.
:::

<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}><img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/calendar.gif?raw=true'}/>

<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}>
<img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/calendar.gif?raw=true'}/>
</div>

## API
Expand Down Expand Up @@ -190,11 +190,11 @@ Whether to disable all touch events for disabled days (can be override with 'dis
Whether to disable all touch events for inactive days (can be override with 'disableTouchEvent' in 'markedDates')
<span style={{color: 'grey'}}>boolean</span>

<br>
<br/>

## Calendar Examples

<br>
<br/>

#### Basic parameters

Expand Down Expand Up @@ -260,8 +260,7 @@ Whether to disable all touch events for inactive days (can be override with 'dis

Dot marking

<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking1.png?raw=true">

<img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking1.png?raw=true"/>

```javascript
<Calendar
Expand All @@ -279,8 +278,7 @@ You can customize a dot color for each day independently.

Multi-Dot marking

<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking4.png?raw=true">

<img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking4.png?raw=true"/>

Use `markingType={'multi-dot'}` if you want to display more than one dot. Both the `<Calendar/>` and `<CalendarList/>` support multiple dots by using `dots` array in `markedDates` prop.
The property `color` is mandatory while `key` and `selectedColor` are optional. If key is omitted then the array index is used as key. If `selectedColor` is omitted then `color` will be used for selected dates.
Expand All @@ -301,11 +299,9 @@ const workout = {key: 'workout', color: 'green'};

Period marking

<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking2.png?raw=true">


<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking3.png?raw=true">
<img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking2.png?raw=true"/>

<img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking3.png?raw=true"/>

```javascript
<Calendar
Expand All @@ -321,8 +317,7 @@ Period marking

Multi-period marking

<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking6.png?raw=true">

<img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking6.png?raw=true"/>

**CAUTION**: This marking is only fully supported by the `<Calendar/>` component because it expands its height. Usage with `<CalendarList/>` might lead to overflow issues.

Expand Down Expand Up @@ -350,8 +345,7 @@ Multi-period marking

Custom marking allows you to customize each marker with custom styles.

<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking5.png?raw=true">

<img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking5.png?raw=true"/>

```javascript
<Calendar
Expand Down Expand Up @@ -400,14 +394,13 @@ Custom marking allows you to customize each marker with custom styles.
/>
```

<img height=350 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/multi-marking.png?raw=true">
<img height={350} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/multi-marking.png?raw=true"/>

Keep in mind that different marking types are not compatible. You can use just one marking style for a calendar.

#### Displaying data loading indicator

<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/loader.png?raw=true">

<img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/loader.png?raw=true"/>

The loading indicator next to the month name will be displayed if `<Calendar/>` has `displayLoadingIndicator` prop and the `markedDates` collection does not have a value for every day of the month in question. When you load data for days, just set `[]` or special marking value to all days in `markedDates` collection.

Expand Down Expand Up @@ -505,8 +498,7 @@ theme={{
}}
```

<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/day-header-style.png?raw=true">

<img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/day-header-style.png?raw=true"/>

**Disclaimer**: Issues that arise because something breaks after using stylesheet override will not be supported. Use this option at your own risk.

Expand Down Expand Up @@ -536,4 +528,3 @@ The `dayComponent` prop has to receive a RN component or a function that receive
**Tip**: Don't forget to implement `shouldComponentUpdate()` for your custom day component to make the calendar perform better

If you implement an awesome day component please make a PR so that other people could use it :)

Loading

0 comments on commit f6dfb32

Please sign in to comment.