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

scrolling-calendar

v1.0.1

Published

An event calendar React component with infinite scrolling and dynamic data loading

Downloads

9

Readme

f1-week-cal

An event calendar with:

  • Infinite scrolling with dynamic event loading
  • Week by week representation of events
  • Support for multi-day events
  • Support for collapsible events
  • Variable row height

Usage

npm install scrolling-calendar

import ScrollingCalendar from 'scrolling-calendar'

const myCalendar = () =>
    <ScrollingCalendar events={myEvents} onLoadEvents={loadAction} />

Important: the calendar's container must have a set height, for example, it could be a child in a flex layout, or just have a height of 100%.

Props

min

Min boundary for the scroll (yes it is not truly infinite, it will only scroll up to that point). Defaults to 5 years ago.

max

Max boundary for the scroll. Defaults to 10 years in the future.

initialDate

Date to initially start the calendar at. Defaults to start of current week.

events

Array of events, objects with the following properties:

  • id
  • title
  • start (a date, string or moment)
  • end (ditto)

onLoadEvents({start, stop})

A function that will be called when the window of loaded events change. This should trigger the loading of events, which will be provided via the events prop. The function itself can return immeditately - we'll wait for the new events to arrive to signify that the loading has completed. start and stop are strings in the YYYY-MM-DD format.

onVisibleRangeChanged

A callback for when the user has scrolled the view. This can be used to display additional details about the currently displayed events. start and stop are strings in the YYYY-MM-DD format.

visibleWeekCount

Number of weeks to show on calendar. The size of the week rows will be calculated accordingly.

Limitations

  • Uses a week starting on Monday - this is not currently configurable (you'd have to change references from isoWeek to week)
  • Does not support arbitrary renderer for events