1.0.2 • Published 4 months ago

@quidone/react-native-calendars v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

📅 React Native Calendars 🗓️

A declarative cross-platform React Native calendar component for iOS, Android and Web.

Installation

yarn add @quidone/react-native-calendars

Also, you need to install following dependencies, if you already have them you can pass this step

yarn add dayjs react-native-gesture-handler react-native-reanimated

For react-native-gesture-handler and react-native-reanimated additional steps may be required: see their documentations

Navigation

Usage

If you want to see more examples and experiment, run the examples locally.

git clone git@github.com:quidone/react-native-calendars.git
cd react-native-calendars
yarn install
cd example && yarn install && yarn ios

Base case

import React, {useState} from 'react';
import {MonthCalendar} from '@quidone/react-native-calendars';

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

  return (
    <MonthCalendar
      selectedDay={selected}
      onDayChanged={({day}) => {
        setSelected(day);
      }}
    />
  );
};

export default App;

Multiple selection

If you needed a more complex date selection behavior, you can do the following:

const App = () => {
  const [days, setDays] = useState([]);

  return (
    <MonthCalendar
      selectedDay={null} // Important! This will disable the internal date selection state
      markedDays={days.map(day => [day, {selected: true}])}
      onDayPress={({day}) => {
        setDays(prev => {
          if (prev.includes(day)) {
            return prev.filter(p => p !== day);
          } else {
            return [...prev, day];
          }
        });
      }}
    />
  );
};

Localization

dayjs works under the hood of calendars and all localization settings are taken from it.

For example, let's set the French localization:

import React, {useState} from 'react';
import {MonthCalendar} from '@quidone/react-native-calendars';
import 'dayjs/locale/fr' // import the French localization

const App = () => {
  return (<MonthCalendar locale={'fr'}/>);
};

export default App;

You also can set your own settings:

<MonthCalendar
  locale={{
    weekStart: 0,
    months: [/* list of month names */],
    weekdaysMin: [/* list of weekdays */],
    ...
  }}
/>

You can learn more about the localization at dayjs

Customization

Theme

Theme settings allows you to easily change display of calendars: element sizes, paddings and even animations

<MonthCalendar
  theme={{
    calendarPaddingHorizontal: 16,
    monthTitleColor: '#000000',
    monthTitleFontSize: 17,
    weekDayTitleColor: '#707070',
    weekDayTitleFontSize: 12,
    pagePaddingTop: 4,
    pagePaddingBottom: 4,
    pageBetweenRows: 2,
    dayContainerSize: 40,
    dayFontSize: 17,
    dayBgColor: {value: 'transparent', type: 'timing', option: {duration: 50}},
    daySelectedBgColor: {value: '#2C98F0', type: 'timing', option: {duration: 50}},
    dayColor: {value: '#000000', type: 'timing', option: {duration: 50}},
    daySelectedColor: {value: '#ffffff', type: 'timing', option: {duration: 50}},
    daySecondaryOpacity: 0.4,
    dayDisabledOpacity: 0.4,
    dayDotSize: 5,
  }}
/>

Styles

Sometimes the theme configuration may not be enough. When you can use the styles:

<MonthCalendar
  containerStyle={{/* ... */}}
  monthRowStyle={{/* ... */}}
  monthTitleStyle={{/* ... */}}
  weekDayRowStyle={{/* ... */}}
  weekDayContainerStyle={{/* ... */}}
  weekDayTitleStyle={{/* ... */}}
  pageContainerStyle={{/* ... */}}
  dayRowStyle={{/* ... */}}
  dayContainerStyle={{/* ... */}}
  dayTextStyle={{/* ... */}}
  dayDotRowStyle={{/* ... */}}
  dayDotStyle={{/* ... */}}
/>

Some style properties may accept selectors that allow you to fine-tune styles

<MonthCalendar
  dayContainerStyle={({
    day,
    isSelected,
    isToday,
    isDisabled,
    isSecondary,
  }) => {
    return {/* ... */}
  }}
/>

It is also possible to render your own components.

Marked days

You can set a set of dates to be selected, disabled, or marked with dots

Let's look as a simple example:

<MonthCalendar
  markedDays={[
    ['2023-01-01', {selected: true}], // one day
    ['2023-01-01', '2023-01-14', {dots: [{color: 'red'}]}], // range from '2023-01-01' to '2023-01-14'
  ]}
/>

The date '2023-01-01' will contain the selected flag and a red dot. The following records add or override data. If the dates with dots intersect, then the dots will be merged into a new list. You can set a key for dots that will allow you to distinguish and override these dots.

Selector

There is support for a selector that is called when new dates appear

<MonthCalendar
  markedDays={({start, end}) => {
    return [[start, end, {dots: [{color: 'orange'}]}]]
  }}
/>

You can also pass a list and a selector together.

<MonthCalendar
  markedDays={{
    list: [/* records */],
    selector: (info) => [/* records */]
  }}
/>

API

Common

Base calendar props

useTheme

The hook provides a calendar theme. It can be used in components that are nested in the calendar. More details can be found in the Theme

useDots

The hook provides set of dots for a specific day. It can only be used inside the component that is returned from the renderDay method.

WeekCalendar

The calendar displays weekly pages.

Props

MonthCalendar

The calendar displays monthly pages.

Props

WMCalendar

The calendar displays weekly or monthly pages.

Props

withWMSwitching

HOC includes a scrolling component, which in the future is a way to switch the calendar mode using gestures.

👨‍💻 Author

Sergey Rozhkov

🎯 Was it helpful?

Do you like it and find it helpful? You can help this project in the following way:

  • ⭐ Put the star.
  • 💡 Suggest your ideas.
  • 😉 Open a founded issue.

🤝 Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

📄 License

Quidone React Native Calendars is MIT licensed, as found in the LICENSE file.

Made with create-react-native-library

react-nativecalendarmonthweekcomponentreactiosandroidexpoweb
@rozhkov/react-useful-hooksdebouncedefault-valuesmemoize-one
@everything-registry/sub-chunk-752
1.0.2

4 months ago

1.0.1

4 months ago

1.0.0

4 months ago

0.2.0

12 months ago

0.1.0

12 months ago

0.0.2

12 months ago

0.0.1

1 year ago