react-native-deadsimple-calendar v1.2.1

📅💀 react-native-deadsimple-calendar

Need a simple calendar without having to waste time setting up / optimizing?
Then this package is just for you!

or if you prefer the inline strip version:

Don't like adding dependencies to your project?
Feel free to copy paste the code from my github & leave a ⭐

Advantages ✨

1. Ready to go out of the box 🚀
2. Highly customizable 🔧
3. Externally changeable date 🪄
4. Memoized to improve performance ⚡

Examples

Minimal:

import React from 'react';
import { View } from 'react-native';
import Calendar from 'react-native-deadsimple-calendar';

export default function App() {
  return (<View>

      <Calendar/>

    </View>);
}

Minimal Inline Strip:

import React from 'react';
import { View } from 'react-native';
import Calendar from 'react-native-deadsimple-calendar';

export default function App() {
  return (<View>

      <Calendar
        InlineStrip={true}
      />

    </View>);
}

Customizing:

const MyHeader=()=>(<View>...</View>)


export default function App() {

  const calendarRef = useRef()

  return (<>

    <Button title='Change the date' onPress={() => {
      calendarRef.current.setDate(13, 2, 2003)
    }} />

    <Calendar

      ref={calendarRef}

      style={{
        borderWidth: 3,
        borderColor: 'black',
      }}

      // CustomHeader={MyHeader}
      MarkedDates={{ "2023-00-13": [{ color: "red" }] }}

      OnMonthYearChange={(newMonthYear) => {
        console.log(newMonthYear)
      }}

      OnDateChange={(newDate) => {
        console.log(newDate)
      }}
    />
  </>);
}

Hint 💡
You can use OnTitlePress to create a custom popup to change the month & year.

( Check out this example )

API

Feedback / Bug report

If you find any bugs or want to leave a feedback, my email is on my github bio
Always open to constructive criticism 😁