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

calendrical

v0.0.1

Published

Convenient date tools for building calendars.

Downloads

7

Readme

Calendrical

Calendrical is intended to make building calendar interfaces easier.

There are many existing calendar plugins, including Datepicker for jQuery UI, FullCalendar, and AngularUI Calendar. However, it's inconvenient that these calendar plugins tie together the date calculations that make the calendar possible and the visualization of the calendar. Calendrical is intended to provide the date calculations that will enable users to easily produce their own calendar visualizations.

Basic usage

The setUtcMode method can be used to select whether dates are returned relative to the local time zone or to UTC.

Only one other method is intended for use: getWeeksInMonth.

getWeeksInMonth(any Date in the month, [options])

Where options is an object which may have the following properties: weekStartsWith (0 Sunday, 6 Saturday, based on JavaScript's Date object)

var weeks = calendrical.getWeeksInMonth();

Now weeks is an array of weeks, which each are an array of day objects.

The day objects contain a dayOfMonth number (1 to 31), a date (a JavaScript Date) for the day, and one of three boolean flags set to true: inCurrentMonth, trailingDay, or leadingDay.

This should make it easy to build a calendar interface by looping over the weeks, then looping over the days, and styling each day based on whether it is in the current month, previous month, or next month.

Usage within Angular

<div class="calendar-week" ng-repeat="week in weeks track by $index">
	<div class="calendar-day" ng-click="select(day)" ng-repeat="day in week track by $index"
		 ng-class="{hide: !day.inCurrentMonth, 'selection-end': isAtSelectionEnd(day), selected: isInSelectedRange(day)}">
			{{day.dayOfMonth}}
	</div>
</div>