react-fill-calendar 0.2.4 → 0.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.umd.cjs +2 -2
- package/package.json +1 -1
- package/readme.md +41 -77
package/dist/index.js
CHANGED
package/dist/index.umd.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(k,S){typeof exports=="object"&&typeof module<"u"?S(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],S):(k=typeof globalThis<"u"?globalThis:k||self,S(k.FillCalendar={},k.React))})(this,(function(k,S){"use strict";var L={exports:{}},Y={};var V;function re(){if(V)return Y;V=1;var l=Symbol.for("react.transitional.element"),g=Symbol.for("react.fragment");function p(h,f,u){var d=null;if(u!==void 0&&(d=""+u),f.key!==void 0&&(d=""+f.key),"key"in f){u={};for(var R in f)R!=="key"&&(u[R]=f[R])}else u=f;return f=u.ref,{$$typeof:l,type:h,key:d,ref:f!==void 0?f:null,props:u}}return Y.Fragment=g,Y.jsx=p,Y.jsxs=p,Y}var F={};var G;function te(){return G||(G=1,process.env.NODE_ENV!=="production"&&(function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===T?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case D:return"Profiler";case v:return"StrictMode";case E:return"Suspense";case _:return"SuspenseList";case m:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case P:return"Portal";case
|
|
1
|
+
(function(k,S){typeof exports=="object"&&typeof module<"u"?S(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],S):(k=typeof globalThis<"u"?globalThis:k||self,S(k.FillCalendar={},k.React))})(this,(function(k,S){"use strict";var L={exports:{}},Y={};var V;function re(){if(V)return Y;V=1;var l=Symbol.for("react.transitional.element"),g=Symbol.for("react.fragment");function p(h,f,u){var d=null;if(u!==void 0&&(d=""+u),f.key!==void 0&&(d=""+f.key),"key"in f){u={};for(var R in f)R!=="key"&&(u[R]=f[R])}else u=f;return f=u.ref,{$$typeof:l,type:h,key:d,ref:f!==void 0?f:null,props:u}}return Y.Fragment=g,Y.jsx=p,Y.jsxs=p,Y}var F={};var G;function te(){return G||(G=1,process.env.NODE_ENV!=="production"&&(function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===T?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case D:return"Profiler";case v:return"StrictMode";case E:return"Suspense";case _:return"SuspenseList";case m:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case P:return"Portal";case q:return e.displayName||"Context";case M:return(e._context.displayName||"Context")+".Consumer";case i:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case n:return r=e.displayName||null,r!==null?r:l(e.type)||"Memo";case c:r=e._payload,e=e._init;try{return l(e(r))}catch{}}return null}function g(e){return""+e}function p(e){try{g(e);var r=!1}catch{r=!0}if(r){r=console;var o=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),g(e)}}function h(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===c)return"<...>";try{var r=l(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function f(){var e=b.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function d(e){if(I.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function R(e,r){function o(){H||(H=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function O(){var e=l(this.type);return Z[e]||(Z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function w(e,r,o,a,U,z){var s=o.ref;return e={$$typeof:j,type:e,key:r,props:o,_owner:a},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:O}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function N(e,r,o,a,U,z){var s=r.children;if(s!==void 0)if(a)if(se(s)){for(a=0;a<s.length;a++)y(s[a]);Object.freeze&&Object.freeze(s)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else y(s);if(I.call(r,"key")){s=l(e);var $=Object.keys(r).filter(function(ce){return ce!=="key"});a=0<$.length?"{key: someKey, "+$.join(": ..., ")+": ...}":"{key: someKey}",ee[s+a]||($=0<$.length?"{"+$.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
2
|
let props = %s;
|
|
3
3
|
<%s {...props} />
|
|
4
4
|
React keys must be passed directly to JSX without using spread:
|
|
5
5
|
let props = %s;
|
|
6
|
-
<%s key={someKey} {...props} />`,a,s,$,s),ee[s+a]=!0)}if(s=null,o!==void 0&&(p(o),s=""+o),d(r)&&(p(r.key),s=""+r.key),"key"in r){o={};for(var J in r)J!=="key"&&(o[J]=r[J])}else o=r;return s&&R(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),w(e,s,o,f(),U,z)}function y(e){A(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===c&&(e._payload.status==="fulfilled"?A(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function A(e){return typeof e=="object"&&e!==null&&e.$$typeof===j}var x=S,j=Symbol.for("react.transitional.element"),P=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),v=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),M=Symbol.for("react.consumer"),
|
|
6
|
+
<%s key={someKey} {...props} />`,a,s,$,s),ee[s+a]=!0)}if(s=null,o!==void 0&&(p(o),s=""+o),d(r)&&(p(r.key),s=""+r.key),"key"in r){o={};for(var J in r)J!=="key"&&(o[J]=r[J])}else o=r;return s&&R(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),w(e,s,o,f(),U,z)}function y(e){A(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===c&&(e._payload.status==="fulfilled"?A(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function A(e){return typeof e=="object"&&e!==null&&e.$$typeof===j}var x=S,j=Symbol.for("react.transitional.element"),P=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),v=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),M=Symbol.for("react.consumer"),q=Symbol.for("react.context"),i=Symbol.for("react.forward_ref"),E=Symbol.for("react.suspense"),_=Symbol.for("react.suspense_list"),n=Symbol.for("react.memo"),c=Symbol.for("react.lazy"),m=Symbol.for("react.activity"),T=Symbol.for("react.client.reference"),b=x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,se=Array.isArray,W=console.createTask?console.createTask:function(){return null};x={react_stack_bottom_frame:function(e){return e()}};var H,Z={},Q=x.react_stack_bottom_frame.bind(x,u)(),K=W(h(u)),ee={};F.Fragment=C,F.jsx=function(e,r,o){var a=1e4>b.recentlyCreatedOwnerStacks++;return N(e,r,o,!1,a?Error("react-stack-top-frame"):Q,a?W(h(e)):K)},F.jsxs=function(e,r,o){var a=1e4>b.recentlyCreatedOwnerStacks++;return N(e,r,o,!0,a?Error("react-stack-top-frame"):Q,a?W(h(e)):K)}})()),F}var X;function ne(){return X||(X=1,process.env.NODE_ENV==="production"?L.exports=re():L.exports=te()),L.exports}var t=ne();const oe=({fillingColor:l,borderfillColor:g,hoverborderColor:p,cellBorderColor:h,cellColor:f,day:u,isSelected:d=!1,cellShape:R,href:O})=>{const w=new Date().toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"}),N=R==="square"?"fc-rounded-square":"fc-rounded-circle",y=u===w,A=`fc-day-button ${N} ${!y&&!d&&p?"hover-border-var":""}`,x=!!(O&&d),j=(v="",D)=>t.jsx("button",{type:"button",className:`${A} ${v} ${x?"fc-cursor-pointer":""}`,style:D}),P=v=>x?t.jsx("a",{href:O,className:"contents",children:v}):v;if(y){const v=t.jsxs("div",{className:"fc-today-wrap",children:[t.jsx("div",{className:"rainbow-spin fc-rainbow",style:{background:"conic-gradient(from 0deg, #ff0000 0deg, #ff4000 20deg, #ff8000 40deg, #ffbf00 60deg, #ffff00 80deg, #bfff00 100deg, #80ff00 120deg, #40ff00 140deg, #00ff00 160deg, #00ff40 180deg, #00ff80 200deg, #00ffbf 220deg, #00ffff 240deg, #00bfff 260deg, #0080ff 280deg, #0040ff 300deg, #0000ff 320deg, #4000ff 340deg, #8000ff 360deg)",padding:"2px",boxShadow:"0 0 8px rgba(255,0,255,0.35), 0 0 14px rgba(0,255,255,0.25)",borderRadius:"50%"}}),t.jsx("div",{className:"fc-color-inner",children:t.jsx("div",{className:`fc-today-inner ${N}`,children:j("today-cell-btn fc-full",{"--border-fill-color":d?g:h,backgroundColor:d?l:f})})})]});return P(v)}return P(j("w-4 h-4",d&&!y?{backgroundColor:l,borderColor:g,"--hover-border-color":p}:y?void 0:{backgroundColor:f,"--border-color":h,"--hover-border-color":p}))},B=({fillingColor:l="#50C878",borderfillColor:g="#27592D",hoverborderColor:p="#FFCCCB",cellBorderColor:h="#808080",cellColor:f="#ADADAD",legend:u=!0,mainBorder:d=!0,borderColor:R="#708090",textColor:O="#708090",selectedDates:w=[],title:N="Calendar",cellShape:y="square",column:A=15,legendColumn:x=!1})=>{const j=new Date,{selectedSet:P,hrefMap:C}=S.useMemo(()=>{const i=n=>{if(!n)return"";if(typeof n=="string"){const c=n.split("-");if(c.length===3){const m=c[0],T=String(Number(c[1])).padStart(2,"0"),b=String(Number(c[2])).padStart(2,"0");return`${m}-${T}-${b}`}return n}return typeof n=="object"&&n.day?i(n.day):""},E=new Set,_=new Map;for(const n of w||[]){const c=n&&typeof n=="object"&&n.day?i(n.day):i(n);c&&(E.add(c),n&&typeof n=="object"&&n.href&&_.set(c,n.href))}return{selectedSet:E,hrefMap:_}},[w]),v=S.useMemo(()=>{const i=j.getFullYear(),E=j.getMonth(),_=new Date(i,E-1,1),n=new Date(i,E+2,0),c=[],m=new Date(_);for(;m<=n;){const T=`${m.getFullYear()}-${String(m.getMonth()+1).padStart(2,"0")}-${String(m.getDate()).padStart(2,"0")}`,b=P.has(T),I=C.get(T);c.push({key:T,isSelected:b,href:I,dateObj:new Date(m)}),m.setDate(m.getDate()+1)}return c},[w,j]),D=[],M=A;for(let i=0;i<v.length;i+=M)D.push(v.slice(i,i+M));const q=y==="square"?"fc-rounded-square":"fc-rounded-circle";return t.jsxs("div",{className:`fc-calendar ${d?"fc-main-border":""}`,style:{borderColor:d?R:void 0,color:O},children:[u&&t.jsxs("div",{className:`fc-legend ${x?"fc-legend-col":""}`,children:[t.jsx("strong",{children:N}),t.jsxs("div",{className:"fc-legend",children:[t.jsxs("div",{className:"fc-legend-indicator",children:[t.jsxs("div",{className:"fc-color-box",children:[t.jsx("div",{className:"rainbow-spin fc-rainbow",style:{background:"conic-gradient(from 0deg, #ff0000 0deg, #ff4000 20deg, #ff8000 40deg, #ffbf00 60deg, #ffff00 80deg, #bfff00 100deg, #80ff00 120deg, #40ff00 140deg, #00ff00 160deg, #00ff40 180deg, #00ff80 200deg, #00ffbf 220deg, #00ffff 240deg, #00bfff 260deg, #0080ff 280deg, #0040ff 300deg, #0000ff 320deg, #4000ff 340deg, #8000ff 360deg)",padding:"2px",boxShadow:"0 0 8px rgba(255,0,255,0.35), 0 0 14px rgba(0,255,255,0.25)",borderRadius:"50%"}}),t.jsx("div",{className:"fc-color-inner",children:t.jsx("button",{type:"button",className:"fc-base-button",style:{"--border-fill-color":g,backgroundColor:f}})})]}),t.jsx("span",{children:"Today"})]}),t.jsxs("div",{className:"fc-legend-completed",children:[t.jsx("button",{type:"button",className:`fc-base-button ${q}`,style:{backgroundColor:l,borderColor:g}}),t.jsx("span",{children:"Completed"})]})]})]}),t.jsx("div",{className:"fc-rows",children:D.map((i,E)=>t.jsx("div",{className:"fc-row",children:i.map((_,n)=>{const c=_.dateObj.toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"}),m=n<3,T=n>=M-3;let b="fc-tooltip-top";return m?b="fc-tooltip-right":T?b="fc-tooltip-left":E===0&&(b="fc-tooltip-bottom"),t.jsxs("div",{className:`fc-tooltip ${b}`,children:[t.jsx(oe,{fillingColor:l,borderfillColor:g,hoverborderColor:p,cellBorderColor:h,cellColor:f,isSelected:_.isSelected,day:c,href:_.href,cellShape:y}),t.jsx("div",{className:"fc-tooltip-text",role:"tooltip",children:c})]},_.key)})},E))})]})},ae=l=>t.jsx(B,{...l});k.Calendar=B,k.default=ae,Object.defineProperties(k,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-fill-calendar",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.6",
|
|
4
4
|
"description": "Fill dates on a calendar displaying boxes for dates. Customize colors and borders. Perfect for habit tracking or event marking in React applications.",
|
|
5
5
|
"main": "dist/index.umd.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
package/readme.md
CHANGED
|
@@ -56,85 +56,49 @@ A lightweight, customizable React calendar component that automatically fills an
|
|
|
56
56
|
day: '2026-1-15',
|
|
57
57
|
},
|
|
58
58
|
],
|
|
59
|
-
## 📦 Installation
|
|
60
|
-
|
|
61
|
-
`npm install react-fill-calendar`
|
|
62
|
-
|
|
63
|
-
### Usage
|
|
64
|
-
|
|
65
|
-
This package ships an accompanying CSS file that you should import in your app. Two recommended patterns:
|
|
66
|
-
|
|
67
|
-
- For Tailwind projects (important: import the library CSS after your Tailwind output so the library's rules are not overridden):
|
|
68
|
-
|
|
69
|
-
In your main stylesheet (after Tailwind directives):
|
|
70
|
-
|
|
71
|
-
```css
|
|
72
|
-
@tailwind base;
|
|
73
|
-
@tailwind components;
|
|
74
|
-
@tailwind utilities;
|
|
75
|
-
|
|
76
|
-
/* import the component CSS after Tailwind so it takes precedence */
|
|
77
|
-
@import 'react-fill-calendar/dist/calendar.css';
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
Or in your JS entry after your Tailwind import:
|
|
81
|
-
|
|
82
|
-
```js
|
|
83
|
-
import './main.css'; // contains Tailwind
|
|
84
|
-
import 'react-fill-calendar/dist/calendar.css';
|
|
85
|
-
import App from './App';
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
- For non-Tailwind projects:
|
|
89
|
-
|
|
90
|
-
```js
|
|
91
|
-
import 'react-fill-calendar/dist/calendar.css';
|
|
92
|
-
import Calendar from 'react-fill-calendar';
|
|
93
|
-
|
|
94
|
-
export default function App() {
|
|
95
|
-
return <Calendar />;
|
|
96
|
-
}
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
Notes:
|
|
100
|
-
- The CSS is namespaced under the `.fc-` prefix and rooted at `.fc-calendar` to reduce collisions with utility frameworks like Tailwind.
|
|
101
|
-
- If you prefer to import source CSS directly, you can import `src/comp/calendar.css` and `src/comp/dayCell.css`, but publishing `dist/calendar.css` is the recommended, stable approach.
|
|
102
|
-
|
|
103
|
-
### Example
|
|
104
|
-
|
|
105
|
-
<div style="display: flex; gap: 20px; justify-content: center;">
|
|
106
|
-
<div style="display: flex; justify-content: space-around"> <img src="https://github.com/apmanager001/react-fill-calendar/blob/main/assets/calendar.png?raw=true" width="300" alt='image of component'/>
|
|
107
|
-
</div>
|
|
108
|
-
<div style="display: flex; justify-content: space-around"> <img src="https://github.com/apmanager001/react-fill-calendar/blob/main/assets/calendar2.png?raw=true" width="300" alt='image of component'/>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
|
|
112
|
-
```
|
|
113
|
-
import Calendar from 'react-fill-calendar'
|
|
114
|
-
|
|
115
|
-
const Example = () => {
|
|
116
|
-
return (
|
|
117
|
-
<div>
|
|
118
|
-
<Calendar
|
|
119
|
-
fillingColor="#50C878"
|
|
120
|
-
borderfillColor="#27592D"
|
|
121
|
-
hoverborderColor="#FFCCCB"
|
|
122
|
-
cellBorderColor="#808080"
|
|
123
|
-
cellColor="#ADADAD"
|
|
124
|
-
legend={true}
|
|
125
|
-
mainBorder={true}
|
|
126
|
-
borderColor="#708090"
|
|
127
|
-
textColor="#708090"
|
|
128
|
-
selectedDates={[{ day: '2026-01-13', href: '/habit/1234565' }, { day: '2026-01-15' }]}
|
|
129
|
-
title="Calendar"
|
|
130
|
-
/>
|
|
131
|
-
</div>
|
|
132
|
-
)
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
export default Calendar
|
|
136
59
|
```
|
|
137
60
|
|
|
61
|
+
<!-- ### Usage
|
|
62
|
+
|
|
63
|
+
This package ships an accompanying CSS file that you should import in your app. Two recommended patterns:
|
|
64
|
+
|
|
65
|
+
- For Tailwind projects (important: import the library CSS after your Tailwind output so the library's rules are not overridden):
|
|
66
|
+
|
|
67
|
+
In your main stylesheet (after Tailwind directives):
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
@tailwind base;
|
|
71
|
+
@tailwind components;
|
|
72
|
+
@tailwind utilities;
|
|
73
|
+
|
|
74
|
+
/* import the component CSS after Tailwind so it takes precedence */
|
|
75
|
+
@import 'react-fill-calendar/dist/calendar.css';
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Or in your JS entry after your Tailwind import:
|
|
79
|
+
|
|
80
|
+
```js
|
|
81
|
+
import './main.css'; // contains Tailwind
|
|
82
|
+
import 'react-fill-calendar/dist/calendar.css';
|
|
83
|
+
import App from './App';
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
- For non-Tailwind projects:
|
|
87
|
+
|
|
88
|
+
```js
|
|
89
|
+
import 'react-fill-calendar/dist/calendar.css';
|
|
90
|
+
import Calendar from 'react-fill-calendar';
|
|
91
|
+
|
|
92
|
+
export default function App() {
|
|
93
|
+
return <Calendar />;
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
Notes:
|
|
98
|
+
- The CSS is namespaced under the `.fc-` prefix and rooted at `.fc-calendar` to reduce collisions with utility frameworks like Tailwind.
|
|
99
|
+
- If you prefer to import source CSS directly, you can import `src/comp/calendar.css` and `src/comp/dayCell.css`, but publishing `dist/calendar.css` is the recommended, stable approach. -->
|
|
100
|
+
|
|
101
|
+
|
|
138
102
|
## Props
|
|
139
103
|
|
|
140
104
|
| Prop | Type | Required | Default | Options | Description |
|