📅💀 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

Props	Type	Example
MarkedDates	Object	{ "2023-00-13": [{ color: "red" }, { color: "green" }] }
DaysList	Array	Default: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
MonthsList	Array	Default: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
InlineStrip	Boolean	Default: false
OnTitlePress	Function	()=>{}
OnMonthYearChange	Function	(newMonthYear) => {}
OnDateChange	Function	(newDate) => {}
ref	useRef	ref.current.setDate(date, month, year) ref.current.getDate()
CustomTitle	Component
CustomRightArrow	Component
CustomLeftArrow	Component
CustomHeader	Component
style	Object
HeaderStyle	Object
TitleStyle	Object
RightArrowWrapperStyle	Object
RightArrowStyle	Object
LeftArrowWrapperStyle	Object
LeftArrowStyle	Object
WeekItemsWrapperStyle	Object
WeekItemstyle	Object
DayContainerStyle	Object
DayStyle	Object
TodayStyle	Object
SelectedStyle	Object
WeekendStyle	Object
WeekStyle	Object
DayWrapperStyle	Object
SelectedWrapperStyle	Object
MarkerWrapperStyle	Object
MarkerStyle	Object

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 😁