Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@zach.codes/react-calendar

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zach.codes/react-calendar - npm Package Compare versions

Comparing version 0.2.0-beta to 0.2.0-beta2

6

dist/Monthly/MonthlyBody.d.ts
import { ReactNode } from 'react';
import { Locale } from 'date-fns';
declare type BodyState<DayData> = {

@@ -10,7 +11,8 @@ day: Date;

omitDays?: number[];
locale?: Locale;
};
export declare const handleOmittedDays: ({ days, omitDays }: OmittedDaysProps) => {
export declare const handleOmittedDays: ({ days, omitDays, locale, }: OmittedDaysProps) => {
headings: {
day: number;
label: string;
label: any;
}[];

@@ -17,0 +19,0 @@ daysToRender: Date[];

@@ -10,2 +10,3 @@ 'use strict';

var React__default = _interopDefault(React);
var locale = require('date-fns/locale');

@@ -61,25 +62,31 @@ var MonthlyCalendarContext = /*#__PURE__*/React__default.createContext({});

var daysInWeek = [{
day: 0,
label: 'Sunday'
}, {
day: 1,
label: 'Monday'
}, {
day: 2,
label: 'Tuesday'
}, {
day: 3,
label: 'Wednesday'
}, {
day: 4,
label: 'Thursday'
}, {
day: 5,
label: 'Friday'
}, {
day: 6,
label: 'Saturday'
}];
var daysInWeek = function daysInWeek(_ref) {
var _locale$localize, _locale$localize2, _locale$localize3, _locale$localize4, _locale$localize5, _locale$localize6, _locale$localize7;
var _ref$locale = _ref.locale,
locale$1 = _ref$locale === void 0 ? locale.enUS : _ref$locale;
return [{
day: 0,
label: (_locale$localize = locale$1.localize) == null ? void 0 : _locale$localize.day(0)
}, {
day: 1,
label: (_locale$localize2 = locale$1.localize) == null ? void 0 : _locale$localize2.day(1)
}, {
day: 2,
label: (_locale$localize3 = locale$1.localize) == null ? void 0 : _locale$localize3.day(2)
}, {
day: 3,
label: (_locale$localize4 = locale$1.localize) == null ? void 0 : _locale$localize4.day(3)
}, {
day: 4,
label: (_locale$localize5 = locale$1.localize) == null ? void 0 : _locale$localize5.day(4)
}, {
day: 5,
label: (_locale$localize6 = locale$1.localize) == null ? void 0 : _locale$localize6.day(5)
}, {
day: 6,
label: (_locale$localize7 = locale$1.localize) == null ? void 0 : _locale$localize7.day(6)
}];
};
var MonthlyBodyContext = /*#__PURE__*/React__default.createContext({});

@@ -91,8 +98,13 @@ function useMonthlyBody() {

var days = _ref.days,
omitDays = _ref.omitDays;
var headings = daysInWeek;
omitDays = _ref.omitDays,
locale = _ref.locale;
var headings = daysInWeek({
locale: locale
});
var daysToRender = days; //omit the headings and days of the week that were passed in
if (omitDays) {
headings = daysInWeek.filter(function (day) {
headings = daysInWeek({
locale: locale
}).filter(function (day) {
return !omitDays.includes(day.day);

@@ -136,7 +148,9 @@ });

var _useMonthlyCalendar = useMonthlyCalendar(),
days = _useMonthlyCalendar.days;
days = _useMonthlyCalendar.days,
locale = _useMonthlyCalendar.locale;
var _handleOmittedDays = handleOmittedDays({
days: days,
omitDays: omitDays
omitDays: omitDays,
locale: locale
}),

@@ -283,6 +297,14 @@ headings = _handleOmittedDays.headings,

var omitDays = _ref4.omitDays;
var daysToRender = daysInWeek;
var _useWeeklyCalendar2 = useWeeklyCalendar(),
locale = _useWeeklyCalendar2.locale;
var daysToRender = daysInWeek({
locale: locale
});
if (omitDays) {
daysToRender = daysInWeek.filter(function (day) {
daysToRender = daysInWeek({
locale: locale
}).filter(function (day) {
return !omitDays.includes(day.day);

@@ -306,5 +328,5 @@ });

var _useWeeklyCalendar2 = useWeeklyCalendar(),
week = _useWeeklyCalendar2.week,
selectedDay = _useWeeklyCalendar2.selectedDay;
var _useWeeklyCalendar3 = useWeeklyCalendar(),
week = _useWeeklyCalendar3.week,
selectedDay = _useWeeklyCalendar3.selectedDay;

@@ -311,0 +333,0 @@ return React__default.createElement("div", {

@@ -1,2 +0,2 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("date-fns"),a=require("react"),r=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,n=r.createContext({}),l=function(){return a.useContext(n)},o=[{day:0,label:"Sunday"},{day:1,label:"Monday"},{day:2,label:"Tuesday"},{day:3,label:"Wednesday"},{day:4,label:"Thursday"},{day:5,label:"Friday"},{day:6,label:"Saturday"}],d=r.createContext({});function s(){return a.useContext(d)}var c=function(e){var a=e.days,r=e.omitDays,n=o,l=a;r&&(n=o.filter((function(e){return!r.includes(e.day)})),l=a.filter((function(e){return!r.includes(t.getDay(e))})));var d=t.getDay(l[0]);if(r){var s=r.filter((function(e){return e<d})).length;d-=s}return{headings:n,daysToRender:l,padding:new Array(d).fill(0)}},i={l3:"lg:grid-cols-3",l4:"lg:grid-cols-4",l5:"lg:grid-cols-5",l6:"lg:grid-cols-6",l7:"lg:grid-cols-7"},u=r.createContext({}),m=function(){return a.useContext(u)},y=function(e){var a=e.day,n=m(),l=n.locale,o=n.week,d=n.selectedDay,s=n.changeSelectedDay,c=!!d&&t.getDay(d)===a.day,i=t.setDay(o,a.day,{locale:l});return r.createElement("li",{onClick:function(){return s(c?void 0:i)},className:"bg-white cursor-pointer","aria-label":"Day of Week"},r.createElement("div",{className:"rounded-lg border sm:w-36 text-center py-4 "+(c?"border-indigo-600":"border-gray-300 hover:border-gray-500")},r.createElement("p",{className:"font-medium text-sm text-gray-800"},a.label," ",t.format(i,"do",{locale:l}))))};exports.DefaultMonthlyEventItem=function(e){var t=e.date;return r.createElement("li",{className:"py-2"},r.createElement("div",{className:"flex text-sm flex-1 justify-between"},r.createElement("h3",{className:"font-medium"},e.title),r.createElement("p",{className:"text-gray-500"},t)))},exports.DefaultWeeklyEventItem=function(e){var t=e.date;return r.createElement("li",{className:"py-4 w-72"},r.createElement("div",{className:"text-sm flex justify-between"},r.createElement("h3",{className:"font-medium"},e.title),r.createElement("p",{className:"text-gray-500"},t)))},exports.MonthlyBody=function(e){var a=e.omitDays,n=e.events,o=e.children,s=l(),u=c({days:s.days,omitDays:a}),m=u.headings,y=u.daysToRender,f=u.padding;return r.createElement("div",{className:"bg-white border-l-2 border-t-2"},r.createElement("div",{className:"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 "+i["l"+m.length]},m.map((function(e){return r.createElement("div",{key:e.day,className:"border-b-2 p-2 border-r-2 lg:block hidden","aria-label":"Day of Week"},e.label)})),f.map((function(e,t){return r.createElement("div",{key:t,className:"border-b-2 p-2 border-r-2 lg:block hidden","aria-label":"Empty Day"})})),y.map((function(e){return r.createElement(d.Provider,{key:e.toISOString(),value:{day:e,events:n.filter((function(a){return t.isSameDay(a.date,e)}))}},o)}))))},exports.MonthlyCalendar=function(e){var a=e.locale,l=e.onCurrentMonthChange,o=e.children,d=t.startOfMonth(e.currentMonth),s=t.eachDayOfInterval({start:d,end:t.endOfMonth(d)});return r.createElement(n.Provider,{value:{days:s,locale:a,onCurrentMonthChange:l,currentMonth:d}},o)},exports.MonthlyDay=function(e){var a=e.renderDay,n=l().locale,o=s(),d=o.day,c=o.events,i=t.format(d,"d",{locale:n});return r.createElement("div",{"aria-label":"Events for day "+i,className:"h-48 p-2 border-b-2 border-r-2"},r.createElement("div",{className:"flex justify-between"},r.createElement("div",{className:"font-bold"},i),r.createElement("div",{className:"lg:hidden block"},t.format(d,"EEEE",{locale:n}))),r.createElement("ul",{className:"divide-gray-200 divide-y overflow-hidden max-h-36 overflow-y-auto"},a(c)))},exports.MonthlyNav=function(){var e=l(),a=e.locale,n=e.currentMonth,o=e.onCurrentMonthChange;return r.createElement("div",{className:"flex justify-end mb-4"},r.createElement("button",{onClick:function(){return o(t.subMonths(n,1))},className:"cursor-pointer"},"Previous"),r.createElement("div",{className:"ml-4 mr-4 w-32 text-center","aria-label":"Current Month"},t.format(n,t.getYear(n)===t.getYear(new Date)?"LLLL":"LLLL yyyy",{locale:a})),r.createElement("button",{onClick:function(){return o(t.addMonths(n,1))},className:"cursor-pointer"},"Next"))},exports.WeeklyBody=function(e){var a=e.events,n=e.renderItem,l=e.style,o=m(),d=o.week,s=o.selectedDay;return r.createElement("div",{className:"overflow-auto max-h-96",style:l},r.createElement("ul",{className:"divide-y divide-gray-200 "},a.map((function(e){return s&&!t.isSameDay(s,e.date)?null:t.isSameWeek(d,e.date)?n({item:e,showingFullWeek:void 0===s}):null}))))},exports.WeeklyCalendar=function(e){var n=e.locale,l=e.week,o=e.children,d=a.useState(),s=d[0],c=d[1];return a.useEffect((function(){c(void 0)}),[l]),r.createElement(u.Provider,{value:{locale:n,selectedDay:s,week:t.startOfWeek(l),changeSelectedDay:c}},o)},exports.WeeklyContainer=function(e){return r.createElement("div",{className:"md:flex md:justify-between"},e.children)},exports.WeeklyDays=function(e){var t=e.omitDays,a=o;return t&&(a=o.filter((function(e){return!t.includes(e.day)}))),r.createElement("ul",{className:"grid md:grid-cols-1 grid-cols-2 gap-2"},a.map((function(e){return r.createElement(y,{key:e.day,day:e})})))},exports.WeeklyResponsiveContainer=function(e){return r.createElement("div",{className:"border p-4 md:w-3/4 lg:w-1/2 w-full"},e.children)},exports.handleOmittedDays=c,exports.useMonthlyBody=s,exports.useMonthlyCalendar=l,exports.useWeeklyCalendar=m;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("date-fns"),a=require("react"),l=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,r=require("date-fns/locale"),n=l.createContext({}),o=function(){return a.useContext(n)},c=function(e){var t,a,l,n,o,c,d,i=e.locale,s=void 0===i?r.enUS:i;return[{day:0,label:null==(t=s.localize)?void 0:t.day(0)},{day:1,label:null==(a=s.localize)?void 0:a.day(1)},{day:2,label:null==(l=s.localize)?void 0:l.day(2)},{day:3,label:null==(n=s.localize)?void 0:n.day(3)},{day:4,label:null==(o=s.localize)?void 0:o.day(4)},{day:5,label:null==(c=s.localize)?void 0:c.day(5)},{day:6,label:null==(d=s.localize)?void 0:d.day(6)}]},d=l.createContext({});function i(){return a.useContext(d)}var s=function(e){var a=e.days,l=e.omitDays,r=e.locale,n=c({locale:r}),o=a;l&&(n=c({locale:r}).filter((function(e){return!l.includes(e.day)})),o=a.filter((function(e){return!l.includes(t.getDay(e))})));var d=t.getDay(o[0]);if(l){var i=l.filter((function(e){return e<d})).length;d-=i}return{headings:n,daysToRender:o,padding:new Array(d).fill(0)}},u={l3:"lg:grid-cols-3",l4:"lg:grid-cols-4",l5:"lg:grid-cols-5",l6:"lg:grid-cols-6",l7:"lg:grid-cols-7"},m=l.createContext({}),y=function(){return a.useContext(m)},f=function(e){var a=e.day,r=y(),n=r.locale,o=r.week,c=r.selectedDay,d=r.changeSelectedDay,i=!!c&&t.getDay(c)===a.day,s=t.setDay(o,a.day,{locale:n});return l.createElement("li",{onClick:function(){return d(i?void 0:s)},className:"bg-white cursor-pointer","aria-label":"Day of Week"},l.createElement("div",{className:"rounded-lg border sm:w-36 text-center py-4 "+(i?"border-indigo-600":"border-gray-300 hover:border-gray-500")},l.createElement("p",{className:"font-medium text-sm text-gray-800"},a.label," ",t.format(s,"do",{locale:n}))))};exports.DefaultMonthlyEventItem=function(e){var t=e.date;return l.createElement("li",{className:"py-2"},l.createElement("div",{className:"flex text-sm flex-1 justify-between"},l.createElement("h3",{className:"font-medium"},e.title),l.createElement("p",{className:"text-gray-500"},t)))},exports.DefaultWeeklyEventItem=function(e){var t=e.date;return l.createElement("li",{className:"py-4 w-72"},l.createElement("div",{className:"text-sm flex justify-between"},l.createElement("h3",{className:"font-medium"},e.title),l.createElement("p",{className:"text-gray-500"},t)))},exports.MonthlyBody=function(e){var a=e.omitDays,r=e.events,n=e.children,c=o(),i=s({days:c.days,omitDays:a,locale:c.locale}),m=i.headings,y=i.daysToRender,f=i.padding;return l.createElement("div",{className:"bg-white border-l-2 border-t-2"},l.createElement("div",{className:"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 "+u["l"+m.length]},m.map((function(e){return l.createElement("div",{key:e.day,className:"border-b-2 p-2 border-r-2 lg:block hidden","aria-label":"Day of Week"},e.label)})),f.map((function(e,t){return l.createElement("div",{key:t,className:"border-b-2 p-2 border-r-2 lg:block hidden","aria-label":"Empty Day"})})),y.map((function(e){return l.createElement(d.Provider,{key:e.toISOString(),value:{day:e,events:r.filter((function(a){return t.isSameDay(a.date,e)}))}},n)}))))},exports.MonthlyCalendar=function(e){var a=e.locale,r=e.onCurrentMonthChange,o=e.children,c=t.startOfMonth(e.currentMonth),d=t.eachDayOfInterval({start:c,end:t.endOfMonth(c)});return l.createElement(n.Provider,{value:{days:d,locale:a,onCurrentMonthChange:r,currentMonth:c}},o)},exports.MonthlyDay=function(e){var a=e.renderDay,r=o().locale,n=i(),c=n.day,d=n.events,s=t.format(c,"d",{locale:r});return l.createElement("div",{"aria-label":"Events for day "+s,className:"h-48 p-2 border-b-2 border-r-2"},l.createElement("div",{className:"flex justify-between"},l.createElement("div",{className:"font-bold"},s),l.createElement("div",{className:"lg:hidden block"},t.format(c,"EEEE",{locale:r}))),l.createElement("ul",{className:"divide-gray-200 divide-y overflow-hidden max-h-36 overflow-y-auto"},a(d)))},exports.MonthlyNav=function(){var e=o(),a=e.locale,r=e.currentMonth,n=e.onCurrentMonthChange;return l.createElement("div",{className:"flex justify-end mb-4"},l.createElement("button",{onClick:function(){return n(t.subMonths(r,1))},className:"cursor-pointer"},"Previous"),l.createElement("div",{className:"ml-4 mr-4 w-32 text-center","aria-label":"Current Month"},t.format(r,t.getYear(r)===t.getYear(new Date)?"LLLL":"LLLL yyyy",{locale:a})),l.createElement("button",{onClick:function(){return n(t.addMonths(r,1))},className:"cursor-pointer"},"Next"))},exports.WeeklyBody=function(e){var a=e.events,r=e.renderItem,n=e.style,o=y(),c=o.week,d=o.selectedDay;return l.createElement("div",{className:"overflow-auto max-h-96",style:n},l.createElement("ul",{className:"divide-y divide-gray-200 "},a.map((function(e){return d&&!t.isSameDay(d,e.date)?null:t.isSameWeek(c,e.date)?r({item:e,showingFullWeek:void 0===d}):null}))))},exports.WeeklyCalendar=function(e){var r=e.locale,n=e.week,o=e.children,c=a.useState(),d=c[0],i=c[1];return a.useEffect((function(){i(void 0)}),[n]),l.createElement(m.Provider,{value:{locale:r,selectedDay:d,week:t.startOfWeek(n),changeSelectedDay:i}},o)},exports.WeeklyContainer=function(e){return l.createElement("div",{className:"md:flex md:justify-between"},e.children)},exports.WeeklyDays=function(e){var t=e.omitDays,a=y().locale,r=c({locale:a});return t&&(r=c({locale:a}).filter((function(e){return!t.includes(e.day)}))),l.createElement("ul",{className:"grid md:grid-cols-1 grid-cols-2 gap-2"},r.map((function(e){return l.createElement(f,{key:e.day,day:e})})))},exports.WeeklyResponsiveContainer=function(e){return l.createElement("div",{className:"border p-4 md:w-3/4 lg:w-1/2 w-full"},e.children)},exports.handleOmittedDays=s,exports.useMonthlyBody=i,exports.useMonthlyCalendar=o,exports.useWeeklyCalendar=y;
//# sourceMappingURL=react-calendar.cjs.production.min.js.map
import { startOfMonth, eachDayOfInterval, endOfMonth, subMonths, format, getYear, addMonths, getDay, isSameDay, startOfWeek, isSameWeek, setDay } from 'date-fns';
import React, { useContext, useState, useEffect } from 'react';
import { enUS } from 'date-fns/locale';

@@ -53,25 +54,31 @@ var MonthlyCalendarContext = /*#__PURE__*/React.createContext({});

var daysInWeek = [{
day: 0,
label: 'Sunday'
}, {
day: 1,
label: 'Monday'
}, {
day: 2,
label: 'Tuesday'
}, {
day: 3,
label: 'Wednesday'
}, {
day: 4,
label: 'Thursday'
}, {
day: 5,
label: 'Friday'
}, {
day: 6,
label: 'Saturday'
}];
var daysInWeek = function daysInWeek(_ref) {
var _locale$localize, _locale$localize2, _locale$localize3, _locale$localize4, _locale$localize5, _locale$localize6, _locale$localize7;
var _ref$locale = _ref.locale,
locale = _ref$locale === void 0 ? enUS : _ref$locale;
return [{
day: 0,
label: (_locale$localize = locale.localize) == null ? void 0 : _locale$localize.day(0)
}, {
day: 1,
label: (_locale$localize2 = locale.localize) == null ? void 0 : _locale$localize2.day(1)
}, {
day: 2,
label: (_locale$localize3 = locale.localize) == null ? void 0 : _locale$localize3.day(2)
}, {
day: 3,
label: (_locale$localize4 = locale.localize) == null ? void 0 : _locale$localize4.day(3)
}, {
day: 4,
label: (_locale$localize5 = locale.localize) == null ? void 0 : _locale$localize5.day(4)
}, {
day: 5,
label: (_locale$localize6 = locale.localize) == null ? void 0 : _locale$localize6.day(5)
}, {
day: 6,
label: (_locale$localize7 = locale.localize) == null ? void 0 : _locale$localize7.day(6)
}];
};
var MonthlyBodyContext = /*#__PURE__*/React.createContext({});

@@ -83,8 +90,13 @@ function useMonthlyBody() {

var days = _ref.days,
omitDays = _ref.omitDays;
var headings = daysInWeek;
omitDays = _ref.omitDays,
locale = _ref.locale;
var headings = daysInWeek({
locale: locale
});
var daysToRender = days; //omit the headings and days of the week that were passed in
if (omitDays) {
headings = daysInWeek.filter(function (day) {
headings = daysInWeek({
locale: locale
}).filter(function (day) {
return !omitDays.includes(day.day);

@@ -128,7 +140,9 @@ });

var _useMonthlyCalendar = useMonthlyCalendar(),
days = _useMonthlyCalendar.days;
days = _useMonthlyCalendar.days,
locale = _useMonthlyCalendar.locale;
var _handleOmittedDays = handleOmittedDays({
days: days,
omitDays: omitDays
omitDays: omitDays,
locale: locale
}),

@@ -275,6 +289,14 @@ headings = _handleOmittedDays.headings,

var omitDays = _ref4.omitDays;
var daysToRender = daysInWeek;
var _useWeeklyCalendar2 = useWeeklyCalendar(),
locale = _useWeeklyCalendar2.locale;
var daysToRender = daysInWeek({
locale: locale
});
if (omitDays) {
daysToRender = daysInWeek.filter(function (day) {
daysToRender = daysInWeek({
locale: locale
}).filter(function (day) {
return !omitDays.includes(day.day);

@@ -298,5 +320,5 @@ });

var _useWeeklyCalendar2 = useWeeklyCalendar(),
week = _useWeeklyCalendar2.week,
selectedDay = _useWeeklyCalendar2.selectedDay;
var _useWeeklyCalendar3 = useWeeklyCalendar(),
week = _useWeeklyCalendar3.week,
selectedDay = _useWeeklyCalendar3.selectedDay;

@@ -303,0 +325,0 @@ return React.createElement("div", {

@@ -1,4 +0,9 @@

export declare const daysInWeek: {
import { Locale } from 'date-fns';
declare type DaysInWeekProps = {
locale?: Locale;
};
export declare const daysInWeek: ({ locale }: DaysInWeekProps) => {
day: number;
label: string;
label: any;
}[];
export {};
{
"version": "0.2.0-beta",
"version": "0.2.0-beta2",
"license": "MIT",

@@ -4,0 +4,0 @@ "name": "@zach.codes/react-calendar",

@@ -1,9 +0,16 @@

export const daysInWeek = [
{ day: 0, label: 'Sunday' },
{ day: 1, label: 'Monday' },
{ day: 2, label: 'Tuesday' },
{ day: 3, label: 'Wednesday' },
{ day: 4, label: 'Thursday' },
{ day: 5, label: 'Friday' },
{ day: 6, label: 'Saturday' },
import { Locale } from 'date-fns';
import { enUS } from 'date-fns/locale';
type DaysInWeekProps = {
locale?: Locale;
};
export const daysInWeek = ({ locale = enUS }: DaysInWeekProps) => [
{ day: 0, label: locale.localize?.day(0) },
{ day: 1, label: locale.localize?.day(1) },
{ day: 2, label: locale.localize?.day(2) },
{ day: 3, label: locale.localize?.day(3) },
{ day: 4, label: locale.localize?.day(4) },
{ day: 5, label: locale.localize?.day(5) },
{ day: 6, label: locale.localize?.day(6) },
];

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc