npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-toggle-calendar

v1.0.3

Published

Horizontal as well as Grid calendar built on top of react-native-calendars

Downloads

318

Readme

React Native Toggle Calendar

Horizontal as well as Grid calendar built on top of react-native-calendars

Demo

What's special

react-native-calendars has no support for custom header and horizontal scrollable calendar. This package provides these features along with some other properties like showing loader inside calendar.

Usage

  1. Install this library yarn add react-native-toggle-calendar
  2. Use in your component like-
  import { Calendar } from 'react-native-toggle-calendar';

  <Calendar
    current={this.state.selectedCalendarMonthString}
    minDate={currentDate.format('YYYY-MM-DD')}
    dayComponent={CalendarDayComponent}
    calendarHeaderComponent={CalendarHeaderComponent}
    headerData={this.state.calendarHeaderData}
    style={styles.calendar}
    onPressArrowLeft={this.onPressArrowLeft}
    onPressArrowRight={this.onPressArrowRight}
    onPressListView={this.onPressListView}
    onPressGridView={this.onPressGridView}
    markedDates={this.state.calendarMarkedDates}
    horizontal={this.state.horizontal}
    onDayPress={this.onDayPress}
    horizontalEndReachedThreshold={50}
    horizontalStartReachedThreshold={0}
    loading={this.state.calendarLoading}
    showPastDatesInHorizontal={1}
  />

Available props

All the props of https://github.com/wix/react-native-calendars are supported. Newly added ones are-

  // Provide custom calendar header rendering component
  calendarHeaderComponent: PropTypes.any,
  // data which is passed to calendar header, useful only when implementing custom calendar header
  headerData: PropTypes.object,
  // Handler which gets executed when press list icon. It will set calendar to horizontal
  onPressListView: PropTypes.func,
  // Handler which gets executed when press grid icon. It will set calendar to grid
  onPressGridView: PropTypes.func,
  // to show horizontal calendar with scroll
  horizontal: PropTypes.bool,
  // to automatically scroll horizontal calendar to keep selected date in view
  autoHorizontalScroll: PropTypes.bool,
  // how many past days to be shown, if this is set - autoHorizontalScroll will not work
  showPastDatesInHorizontal: PropTypes.number,
  // offset to decide when to trigger onPressArrowRight in horizontal calendar,
  // 0 means when rightmost day is reached, undefined means no auto onPressArrowRight triggering
  horizontalEndReachedThreshold: PropTypes.number,
  // offset to decide when to trigger onPressArrowLeft in horizontal calendar,
  // 0 means when leftmost day is reached, undefined means no auto onPressArrowLeft triggering
  horizontalStartReachedThreshold: PropTypes.number,
  // to show a loader
  loading: PropTypes.bool,
  // provide a custom loader component
  LoaderComponent: PropTypes.any

Sample Calendar Day and Header Components-

Check this gist: https://gist.github.com/varunon9/e204479219a55d86c4d8a985bae4e7f1

Code changes from original package

Check this PR: https://github.com/varunon9/react-native-toggle-calendar/pull/1

Blog: https://medium.com/@varunon9/how-i-built-horizontal-as-well-as-grid-calendar-in-react-native-using-react-native-calendars-eb7a2edcc5db