react-native-multipurpose-calendar v2.1.3

react-native-multipurpose-calendar

Getting started

npm install react-native-multipurpose-calendar --save

Usage Calendar

import { calendar } from "react-native-multipurpose-calendar";

<Calendar lang themeMode value onPress showTodayButton render theme title />

Some Code Examples Calendar lang = 'fa'

import React, { useState } from "react";
import { calendar } from "react-native-multipurpose-calendar";

const App = () => {
  const [value, setValue] = useState("");

  return (
    <Calendar
      lang="fa"
      themeMode="dark"
      title="date"
      value={value}
      onPress={({ en, fa }) => {
        setValue(fa);
      }}
      showTodayButton
      render="input"
    />
  );
};

export default App;

Some Code Examples Calendar lang = 'en'

import React, { useState } from "react";
import { calendar } from "react-native-multipurpose-calendar";

const App = () => {
  const [value, setValue] = useState("");

  return (
    <Calendar
      lang="en"
      themeMode="dark"
      title="date"
      value={value}
      onPress={({ en, fa }) => {
        setValue(en);
      }}
      showTodayButton
      render="input"
    />
  );
};

export default App;

Some Code Examples Calendar Theme

import React, { useState } from "react";
import { calendar } from "react-native-multipurpose-calendar";

const App = () => {
  const [value, setValue] = useState("");

  return (
    <Calendar
      lang="fa"
      themeMode="dark"
      title='date'
      value={value}
      onPress={({fa, en}) => {
        setValue(fa);
      }}
      showTodayButton
      render="input"
      theme={
            dark: {
              background: "rgb(29, 27, 30)",
              onBackground: "rgb(231, 225, 229)",
              disable: "rgb(74, 69, 78)",
              selectedDateBgColor: "rgb(220, 184, 255)",
              selectedDateColor: "rgb(71, 12, 122)",
              todayBgColor: "rgb(208, 193, 218)",
              todayColor: "rgb(54, 44, 63)",
              borderColor: "rgb(150, 142, 152)",
            },
            light: {
              background: "rgb(255, 251, 255)",
              onBackground: "rgb(29, 27, 30)",
              disable: "rgb(233, 223, 235)",
              selectedDateBgColor: "rgb(120, 69, 172)",
              selectedDateColor: "rgb(255, 255, 255)",
              todayBgColor: "rgb(102, 90, 111)",
              todayColor: "rgb(255, 255, 255)",
              borderColor: "rgb(124, 117, 126)",
            },
     }
    />
  );
};

export default App;

Options Calendar

Calendar Demo : fa (persian)

Calendar Demo : en (english)

Calendar Demo light

Calendar Demo today button

Calendar Demo render icon

Usage Agenda

import { Agenda } from "react-native-multipurpose-calendar";

<Agenda lang themeMode events renderItemCustom fontFamily theme />

Some Code Examples Agenda lang = 'fa'

import React, { useState } from "react";
import { Agenda } from "react-native-multipurpose-calendar";

const App = () => {
  const [events, setEvents] = useState([
    {
      title: "test fa",
      date: "2024-06-21",
    },
  ]);

  return <Agenda lang="fa" themeMode="dark" events={events} />;
};

export default App;

Some Code Examples Agenda lang = 'en'

import React, { useState } from "react";
import { Agenda } from "react-native-multipurpose-calendar";

const App = () => {
  const [events, setEvents] = useState([
    {
      title: "test en",
      date: "2024-06-21",
    },
  ]);

  return <Agenda lang="en" themeMode="dark" events={events} />;
};

export default App;

Some Code Examples Calendar Theme

import React, { useState } from "react";
import { calendar } from "react-native-multipurpose-calendar";

const App = () => {
  const [events, setEvents] = useState([
    {
      title: "test theme",
      date: "2024-06-21",
    },
  ]);

  return (
    <Calendar
      lang="en"
      themeMode="light"
      events={events}
      theme={
        dark: {
          background:  "rgb(29, 27, 30)",
          onBackground: "rgb(231, 225, 229)",
          itemBgColor:  "rgb(220, 184, 255)",
          itemTextColor: "rgb(71, 12, 122)",
          dayTextColor:  "rgb(231, 225, 229)",
          buttonBgColor:  "rgb(77, 67, 87)",
          buttonTextColor:  "rgb(237, 221, 246)",
          todayTextColor:  "rgb(220, 184, 255)",
          line: "rgb(74, 69, 78)",
        },
        light: {
          background:  "rgb(255, 251, 255)",
          onBackground:  "rgb(29, 27, 30)",
          itemBgColor:  "rgb(120, 69, 172)",
          itemTextColor:  "rgb(231, 225, 229)",
          dayTextColor:  "#0D1B2A",
          buttonBgColor:  "rgb(237, 221, 246)",
          buttonTextColor:  "rgb(33, 24, 42)",
          todayTextColor:  "rgb(120, 69, 172)",
          line: "rgb(233, 223, 235)",
        },
    }
    />
  );
};

export default App;

Some Code Examples renderItemCustom

import React, { useState } from "react";
import { Agenda } from "react-native-multipurpose-calendar";
import { View, Text } from "react-native";

const App = () => {
  const [events, setEvents] = useState([
    {
      title: "test en",
      date: "2024-06-21",
    },
  ]);

  const renderItemCustom = ({ item, index }) => {
    return (
      <View key={`renderItem_${index}`}>
        <Text>{item.title}</Text>
      </View>
    );
  };

  return (
    <Agenda
      lang="en"
      themeMode="dark"
      events={events}
      renderItemCustom={renderItemCustom}
    />
  );
};

export default App;

Options Calendar

License

React native multipurpose calendar is MIT licensed