main-calendar 1.0.0

package/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

package/dist/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>

package/dist/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c);let l=require(`@dnd-kit/core`),u=require(`@dnd-kit/modifiers`),d=require(`react/jsx-runtime`),f=require(`@dnd-kit/utilities`);var p=(e,t)=>e&&t&&e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate(),m=()=>new Date,h=(e,t,n=null)=>e.filter(e=>{let r=p(new Date(e.date),t);return n===null?r:r&&String(e.resourceId)===String(n)}),g=e=>{let t=new Date(e.getFullYear(),e.getMonth(),1),n=new Date(e.getFullYear(),e.getMonth()+1,0),r=new Date(t);r.setDate(r.getDate()-t.getDay());let i=new Date(n);i.setDate(i.getDate()+(6-n.getDay()));let a=[],o=new Date(r);for(;o<=i;)a.push(new Date(o)),o.setDate(o.getDate()+1);return a},_=e=>{let t=new Date(e);t.setDate(t.getDate()-t.getDay());let n=[];for(let e=0;e<7;e++){let r=new Date(t);r.setDate(r.getDate()+e),n.push(r)}return n},v=e=>{let[t,n]=e.split(`:`).map(Number);return t*60+n},y=e=>{let t=Math.floor(e/60),n=e%60,r=t>=12?`PM`:`AM`;return`${t%12||12}:${String(n).padStart(2,`0`)} ${r}`},b=(e,t,n)=>{if(e.length===0)return[];let r=n-t,i=[...e].sort((e,t)=>e.startTime===t.startTime?t.endTime-t.startTime-(e.endTime-e.startTime):e.startTime-t.startTime),a=[],o=[],s=-1;i.forEach(e=>{e.startTime>=s?(o.length>0&&a.push(o),o=[e],s=e.endTime):(o.push(e),s=Math.max(s,e.endTime))}),o.length>0&&a.push(o);let c=[];return a.forEach(e=>{let n=[];e.forEach(e=>{let t=!1;for(let r=0;r<n.length;r++){let i=n[r][n[r].length-1];if(e.startTime>=i.endTime){n[r].push(e),t=!0;break}}t||n.push([e])});let i=n.length;n.forEach((e,n)=>{e.forEach(e=>{let a=(e.startTime-t)/r*100,o=(e.endTime-e.startTime)/r*100,s=100/i,l=n*s;c.push({...e,style:{top:`${a}%`,height:`${o}%`,left:`${l}%`,width:`${s-1}%`,backgroundColor:e.color||`var(--color-primary-600)`,zIndex:10+n}})})})}),c},x=(e,t)=>`${y(e)} - ${y(t)}`,S=e=>({allDayEvents:e.filter(e=>e.startTime===0&&e.endTime===1440),nonAllDayEvents:e.filter(e=>!(e.startTime===0&&e.endTime===1440))}),C=c.default.memo(({event:e,onClick:t,isDynamic:n=!1,style:r={}})=>{let i=e.startTime===0&&e.endTime===1440;return(0,d.jsxs)(`button`,{className:`event ${n?`event--dynamic`:``} ${i||n?`event--filled`:``}`,style:{...r,"--event-color":e.color||`#2563eb`},onClick:n=>{n.stopPropagation(),t?.(e)},children:[(0,d.jsx)(`span`,{className:`event__color`}),(0,d.jsx)(`span`,{className:`event__title`,children:e.title}),(0,d.jsx)(`span`,{className:`event__time`,children:n?x(e.startTime,e.endTime):(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(`time`,{children:y(e.startTime)}),` -`,` `,(0,d.jsx)(`time`,{children:y(e.endTime)})]})})]})}),w=({event:e,editable:t,children:n})=>{let{attributes:r,listeners:i,setNodeRef:a,isDragging:o}=(0,l.useDraggable)({id:`month-event-${e.id}`,data:{event:e},disabled:!t});return(0,d.jsx)(`div`,{ref:a,style:{opacity:o?.25:1,cursor:t?`grab`:`default`,touchAction:`none`},...i,...r,children:n})},T=({date:e,children:t})=>{let{setNodeRef:n,isOver:r}=(0,l.useDroppable)({id:`day-${e.toISOString()}`,data:{date:e}});return(0,d.jsx)(`div`,{ref:n,style:{height:`100%`,backgroundColor:r?`var(--color-primary-50, rgba(37,99,235,0.08))`:void 0,borderRadius:r?`4px`:void 0,transition:`background-color 0.15s ease`},children:t})},E=c.default.memo(({date:e,events:t,renderEventItem:n,dateCellWrapper:r,editable:i=!1,onEventUpdate:a,onEventClick:o,onDateChange:s,onViewChange:f})=>{let _=g(e),v=_.length/7,y=m(),[b,x]=(0,c.useState)(null),S=v===4?`month-calendar--four-week`:v===5?`month-calendar--five-week`:`month-calendar--six-week`,E=(0,l.useSensors)((0,l.useSensor)(l.PointerSensor,{activationConstraint:{distance:5}})),D=(0,c.useCallback)(e=>{x(e.active.data.current?.event??null)},[]),O=(0,c.useCallback)(e=>{x(null);let{active:t,over:n}=e;if(!n||!t.data.current)return;let r=t.data.current.event,i=n.data.current?.date;i&&a?.(r,i,r.startTime)},[a]),k=(e,t,r)=>(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(`button`,{className:`month-calendar__day-button ${r?`month-calendar__day-button--highlight`:``}`,onClick:()=>{s?.(e),f?.(`day`)},children:e.getDate()}),(0,d.jsx)(`div`,{className:`month-calendar__event-list-wrapper`,children:(0,d.jsx)(`ul`,{className:`event-list`,children:t.map(e=>(0,d.jsx)(c.default.Fragment,{children:n?n({event:e,isDynamic:!1,onClick:()=>o?.(e)}):(0,d.jsx)(w,{event:e,editable:i,children:(0,d.jsx)(C,{event:e,onClick:()=>o?.(e)})})},e.id))})})]});return(0,d.jsxs)(l.DndContext,{sensors:E,onDragStart:D,onDragEnd:O,children:[(0,d.jsxs)(`div`,{className:`month-calendar ${S}`,children:[(0,d.jsx)(`ul`,{className:`month-calendar__day-of-week-list`,children:[`Sun`,`Mon`,`Tue`,`Wed`,`Thu`,`Fri`,`Sat`].map(e=>(0,d.jsx)(`li`,{className:`month-calendar__day-of-week`,children:e},e))}),(0,d.jsx)(`div`,{className:`month-calendar__day-list-wrapper`,children:(0,d.jsx)(`ul`,{className:`month-calendar__day-list`,children:_.map((n,a)=>{let o=p(n,y),s=n.getMonth()===e.getMonth(),c=k(n,h(t,n),o);return(0,d.jsx)(`li`,{className:`month-calendar__day ${s?``:`month-calendar__day--not-current-month`}`,children:i?(0,d.jsx)(T,{date:n,children:r?r({date:n,children:c}):c}):r?r({date:n,children:c}):c},a)})})})]}),(0,d.jsx)(l.DragOverlay,{modifiers:[u.snapCenterToCursor],dropAnimation:null,children:b?(0,d.jsx)(`div`,{style:{width:`160px`,opacity:.9,boxShadow:`0 4px 16px rgba(0,0,0,0.18)`,pointerEvents:`none`},children:(0,d.jsx)(C,{event:b})}):null})]})}),D=({minMinutes:e=0,maxMinutes:t=1440})=>{let n=new Date,r=n.getHours()*60+n.getMinutes();if(r<e||r>t)return null;let i=t-e;return(0,d.jsx)(`div`,{className:`current-time-line`,style:{position:`absolute`,top:`${(r-e)/i*100}%`,left:0,right:0,height:`2px`,backgroundColor:`#ef4444`,zIndex:5,pointerEvents:`none`,display:`flex`,alignItems:`center`},children:(0,d.jsx)(`div`,{style:{width:`10px`,height:`10px`,backgroundColor:`#ef4444`,borderRadius:`50%`,marginLeft:`-5px`}})})},O=c.default.memo(({event:e,children:t,editable:n})=>{let{attributes:r,listeners:i,setNodeRef:a,transform:o,isDragging:s}=(0,l.useDraggable)({id:`event-${e.id}`,data:{event:e},disabled:!n});return(0,d.jsx)(`div`,{ref:a,style:{transform:f.CSS.Translate.toString(o),opacity:s?.25:1,cursor:n?`grab`:`default`,touchAction:`none`},...i,...r,children:t})}),k=c.default.memo(({date:e,view:t,events:n,columns:r=[],showNowIndicator:i,renderEventItem:a,minMinutes:o=0,maxMinutes:s=1440,dayMinWidth:f,dateCellWrapper:g,allDaySlot:v=!0,slotDuration:y=60,editable:x=!1,onEventUpdate:w,resourceLabelContent:T,onEventClick:E,onCellClick:k})=>{let A=m(),j=(0,c.useRef)(null),M=(0,c.useRef)(null),N=(0,c.useRef)({x:0,y:0});(0,c.useEffect)(()=>{let e=e=>{N.current={x:e.clientX,y:e.clientY}};return window.addEventListener(`pointermove`,e),()=>window.removeEventListener(`pointermove`,e)},[]);let P=Math.floor(o/60),F=[];for(let e=o;e<s;e+=y)F.push(e);let I=Array.from({length:Math.ceil(s/60)-Math.floor(o/60)},(e,t)=>Math.floor(o/60)+t),L=y/60*4,R=L*16,z=[];t===`week`?z=_(e).map(e=>({id:e.toISOString(),title:e.toLocaleDateString(void 0,{weekday:`short`}),number:e.getDate(),date:e})):t===`day`?z=[{id:e.toISOString(),title:e.toLocaleDateString(void 0,{weekday:`short`}),number:e.getDate(),date:e}]:t===`resource-day`&&(z=r.map(t=>({...t,date:e})));let[B,V]=(0,c.useState)(null),H=(0,l.useSensors)((0,l.useSensor)(l.PointerSensor,{activationConstraint:{distance:5}})),U=(0,c.useCallback)(e=>{let t=e.active.data.current?.event;V(t??null),t&&(console.group(`🟢 DRAG START`),console.log(`Event:`,t.title),console.log(`From:`,`${Math.floor(t.startTime/60)}:${String(t.startTime%60).padStart(2,`0`)}`),console.log(`Date:`,new Date(t.date).toDateString()),console.groupEnd())},[]),W=(0,c.useCallback)(e=>{if(V(null),!e.active.data.current)return;let n=e.active.data.current.event,r=M.current;if(!r)return;let{x:i,y:a}=N.current,c=r.getBoundingClientRect(),l=i>=c.left&&i<=c.right&&a>=c.top&&a<=c.bottom;if(console.group(`🔴 DRAG END`),console.log(`Pointer (clientX/Y):`,i.toFixed(0),a.toFixed(0)),console.log(`Grid bounds:`,`L:${c.left.toFixed(0)} R:${c.right.toFixed(0)} T:${c.top.toFixed(0)} B:${c.bottom.toFixed(0)}`),console.log(`Inside grid:`,l),!l){console.warn(`Dropped outside calendar grid.`),console.groupEnd();return}let u=i-c.left,d=c.width/z.length,f=Math.max(0,Math.min(z.length-1,Math.floor(u/d))),p=z[f],m=a-c.top,h=r.querySelector(`.week-calendar__cell`),g=h?h.getBoundingClientRect().height:R,_=Math.max(o,m/g*y+o),v=Math.min(s-y,Math.floor(_/y)*y);console.log(`actualSlotPx:`,g.toFixed(2),`| slotDuration:`,y,`min`),console.log(`relativeX:`,u.toFixed(0),`→ col:`,f,p?.title),console.log(`relativeY:`,m.toFixed(0),`(no scroll adjustment needed)`),console.log(`Time:`,`${Math.floor(n.startTime/60)}:${String(n.startTime%60).padStart(2,`0`)}`,`→`,`${Math.floor(v/60)}:${String(v%60).padStart(2,`0`)}`),console.log(`Target date:`,p?.date.toDateString()),console.groupEnd(),p&&w?.(n,p.date,v,t===`resource-day`?p.id:void 0)},[R,y,o,s,w,t,z]);(0,c.useEffect)(()=>{if(j.current){let e=Math.max(P,new Date().getHours()-1);j.current.scrollTop=(e-P)*64}},[t,P]);let G=`repeat(${z.length}, minmax(${f||`0`}, 1fr))`;return(0,d.jsxs)(l.DndContext,{sensors:H,onDragStart:U,onDragEnd:W,children:[(0,d.jsx)(`div`,{className:`week-calendar ${t===`day`||t===`resource-day`?`week-calendar--day`:``}`,style:{"--slot-height":`${L}rem`},children:(0,d.jsx)(`div`,{className:`week-calendar__scroll-area`,ref:j,children:(0,d.jsxs)(`div`,{style:{minWidth:`max-content`,position:`relative`},children:[(0,d.jsxs)(`ul`,{className:`week-calendar__day-of-week-list`,style:{gridTemplateColumns:`4.5rem ${G}`,position:`sticky`,top:0,zIndex:30,backgroundColor:`var(--color-white)`,borderBottom:`1px solid var(--color-gray-300)`},children:[(0,d.jsx)(`li`,{className:`week-calendar__corner-cell`}),z.map(e=>(0,d.jsx)(`li`,{className:`week-calendar__day-of-week`,children:T?T({resource:e}):(0,d.jsxs)(`div`,{className:`week-calendar__day-of-week-button ${p(e.date,A)?`week-calendar__day-of-week-button--highlight`:``}`,children:[(0,d.jsx)(`span`,{className:`week-calendar__day-of-week-day`,children:e.title}),e.number&&(0,d.jsx)(`span`,{className:`week-calendar__day-of-week-number`,children:e.number})]})},e.id))]}),v&&(0,d.jsxs)(`ul`,{className:`week-calendar__all-day-list`,style:{gridTemplateColumns:`4.5rem ${G}`,backgroundColor:`var(--color-white)`,zIndex:25,position:`sticky`,top:`3.5rem`,borderBottom:`1px solid var(--color-gray-200)`},children:[(0,d.jsx)(`li`,{className:`week-calendar__all-day-label`,style:{fontSize:`11px`,display:`flex`,alignItems:`center`,justifyContent:`center`,color:`var(--color-gray-500)`,backgroundColor:`var(--color-gray-50)`},children:`all-day`}),z.map(e=>{let{allDayEvents:r}=S(h(n,e.date,t===`resource-day`?e.id:null));return(0,d.jsx)(`li`,{className:`week-calendar__all-day-list-item`,children:(0,d.jsx)(`ul`,{className:`event-list`,children:r.map(e=>(0,d.jsx)(c.default.Fragment,{children:a?a({event:e,isDynamic:!1,onClick:()=>E?.(e)}):(0,d.jsx)(C,{event:e,onClick:()=>E?.(e)})},e.id))})},e.id)})]}),(0,d.jsx)(`div`,{className:`week-calendar__content`,children:(0,d.jsxs)(`div`,{className:`week-calendar__content-inner`,children:[(0,d.jsx)(`ul`,{className:`week-calendar__time-list`,style:{position:`sticky`,left:0,zIndex:15,backgroundColor:`var(--color-white)`,borderRight:`1px solid var(--color-gray-300)`},children:I.map(e=>(0,d.jsx)(`li`,{className:`week-calendar__time-item`,children:(0,d.jsx)(`time`,{className:`week-calendar__time`,children:e===0?`12:00 AM`:e>12?`${e-12}:00 PM`:`${e}:00 ${e===12?`PM`:`AM`}`})},e))}),(0,d.jsx)(`div`,{ref:M,className:`week-calendar__columns`,style:{gridTemplateColumns:G},children:z.map(e=>{let{nonAllDayEvents:r}=S(h(n,e.date,t===`resource-day`?e.id:null)),l=b(r,o,s);return(0,d.jsxs)(`div`,{className:`week-calendar__column`,children:[F.map(t=>{let n=new Date(e.date);n.setHours(Math.floor(t/60),t%60,0,0);let r=(0,d.jsx)(`div`,{className:`week-calendar__cell`,onClick:()=>k?.(e.date,t)});return(0,d.jsx)(c.default.Fragment,{children:g?g({date:n,children:r}):r},t)}),i&&p(e.date,A)&&(0,d.jsx)(D,{minMinutes:o,maxMinutes:s}),l.map(e=>(0,d.jsx)(c.default.Fragment,{children:a?a({event:e,isDynamic:!0,style:e.style,onClick:()=>E?.(e)}):(0,d.jsx)(O,{event:e,editable:x,children:(0,d.jsx)(C,{event:e,isDynamic:!0,style:e.style,onClick:()=>E?.(e)})})},e.id))]},e.id)})})]})})]})})}),(0,d.jsx)(l.DragOverlay,{modifiers:[u.snapCenterToCursor],dropAnimation:null,children:B?(0,d.jsx)(`div`,{style:{width:`180px`,opacity:.9,boxShadow:`0 8px 24px rgba(0,0,0,0.2)`,pointerEvents:`none`},children:(0,d.jsx)(C,{event:B,isDynamic:!0})}):null})]})}),A=({date:e=new Date,view:t=`month`,events:n=[],columns:r=[],showNowIndicator:i=!0,allDaySlot:a=!0,editable:o=!1,slotDuration:s=60,renderEventItem:l,slotMinTime:u=`00:00:00`,slotMaxTime:f=`24:00:00`,dayMinWidth:p,resourceLabelContent:m,dateCellWrapper:h,onEventClick:g,onEventUpdate:_,onCellClick:y,onDateChange:b,onViewChange:x})=>{let S=c.default.useCallback(e=>{g?.(e)},[g]),C=c.default.useCallback((e,t)=>{y?.(e,t)},[y]),w=c.default.useCallback(e=>{b?.(e)},[b]),T=c.default.useCallback(e=>{x?.(e)},[x]),D=v(u),O=v(f);return(0,d.jsx)(`div`,{className:`calendar`,children:(()=>{switch(t){case`month`:return(0,d.jsx)(E,{date:e,events:n,renderEventItem:l,dateCellWrapper:h,editable:o,onEventUpdate:_,onEventClick:S,onDateChange:w,onViewChange:T});case`week`:case`day`:case`resource-day`:return(0,d.jsx)(k,{date:e,view:t,events:n,columns:r,showNowIndicator:i,renderEventItem:l,minMinutes:D,maxMinutes:O,dayMinWidth:p,allDaySlot:a,slotDuration:s,editable:o,resourceLabelContent:m,dateCellWrapper:h,onEventClick:S,onEventUpdate:_,onCellClick:C});default:return null}})()})};exports.EventItem=C,exports.MainCalendar=A,exports.MonthView=E,exports.TimeGridView=k;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/index.js

@@ -0,0 +1,545 @@
+import e, { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+import { DndContext as a, DragOverlay as o, PointerSensor as s, useDraggable as c, useDroppable as l, useSensor as u, useSensors as d } from "@dnd-kit/core";
+import { snapCenterToCursor as f } from "@dnd-kit/modifiers";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { CSS as g } from "@dnd-kit/utilities";
+//#region src/components/Calendar/utils/calendar-logic.ts
+var _ = (e, t) => e && t && e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate(), v = () => /* @__PURE__ */ new Date(), y = (e, t, n = null) => e.filter((e) => {
+	let r = _(new Date(e.date), t);
+	return n === null ? r : r && String(e.resourceId) === String(n);
+}), b = (e) => {
+	let t = new Date(e.getFullYear(), e.getMonth(), 1), n = new Date(e.getFullYear(), e.getMonth() + 1, 0), r = new Date(t);
+	r.setDate(r.getDate() - t.getDay());
+	let i = new Date(n);
+	i.setDate(i.getDate() + (6 - n.getDay()));
+	let a = [], o = new Date(r);
+	for (; o <= i;) a.push(new Date(o)), o.setDate(o.getDate() + 1);
+	return a;
+}, x = (e) => {
+	let t = new Date(e);
+	t.setDate(t.getDate() - t.getDay());
+	let n = [];
+	for (let e = 0; e < 7; e++) {
+		let r = new Date(t);
+		r.setDate(r.getDate() + e), n.push(r);
+	}
+	return n;
+}, S = (e) => {
+	let [t, n] = e.split(":").map(Number);
+	return t * 60 + n;
+}, C = (e) => {
+	let t = Math.floor(e / 60), n = e % 60, r = t >= 12 ? "PM" : "AM";
+	return `${t % 12 || 12}:${String(n).padStart(2, "0")} ${r}`;
+}, w = (e, t, n) => {
+	if (e.length === 0) return [];
+	let r = n - t, i = [...e].sort((e, t) => e.startTime === t.startTime ? t.endTime - t.startTime - (e.endTime - e.startTime) : e.startTime - t.startTime), a = [], o = [], s = -1;
+	i.forEach((e) => {
+		e.startTime >= s ? (o.length > 0 && a.push(o), o = [e], s = e.endTime) : (o.push(e), s = Math.max(s, e.endTime));
+	}), o.length > 0 && a.push(o);
+	let c = [];
+	return a.forEach((e) => {
+		let n = [];
+		e.forEach((e) => {
+			let t = !1;
+			for (let r = 0; r < n.length; r++) {
+				let i = n[r][n[r].length - 1];
+				if (e.startTime >= i.endTime) {
+					n[r].push(e), t = !0;
+					break;
+				}
+			}
+			t || n.push([e]);
+		});
+		let i = n.length;
+		n.forEach((e, n) => {
+			e.forEach((e) => {
+				let a = (e.startTime - t) / r * 100, o = (e.endTime - e.startTime) / r * 100, s = 100 / i, l = n * s;
+				c.push({
+					...e,
+					style: {
+						top: `${a}%`,
+						height: `${o}%`,
+						left: `${l}%`,
+						width: `${s - 1}%`,
+						backgroundColor: e.color || "var(--color-primary-600)",
+						zIndex: 10 + n
+					}
+				});
+			});
+		});
+	}), c;
+}, T = (e, t) => `${C(e)} - ${C(t)}`, E = (e) => ({
+	allDayEvents: e.filter((e) => e.startTime === 0 && e.endTime === 1440),
+	nonAllDayEvents: e.filter((e) => !(e.startTime === 0 && e.endTime === 1440))
+}), D = e.memo(({ event: e, onClick: t, isDynamic: n = !1, style: r = {} }) => {
+	let i = e.startTime === 0 && e.endTime === 1440;
+	return /* @__PURE__ */ h("button", {
+		className: `event ${n ? "event--dynamic" : ""} ${i || n ? "event--filled" : ""}`,
+		style: {
+			...r,
+			"--event-color": e.color || "#2563eb"
+		},
+		onClick: (n) => {
+			n.stopPropagation(), t?.(e);
+		},
+		children: [
+			/* @__PURE__ */ m("span", { className: "event__color" }),
+			/* @__PURE__ */ m("span", {
+				className: "event__title",
+				children: e.title
+			}),
+			/* @__PURE__ */ m("span", {
+				className: "event__time",
+				children: n ? T(e.startTime, e.endTime) : /* @__PURE__ */ h(p, { children: [
+					/* @__PURE__ */ m("time", { children: C(e.startTime) }),
+					" -",
+					" ",
+					/* @__PURE__ */ m("time", { children: C(e.endTime) })
+				] })
+			})
+		]
+	});
+}), O = ({ event: e, editable: t, children: n }) => {
+	let { attributes: r, listeners: i, setNodeRef: a, isDragging: o } = c({
+		id: `month-event-${e.id}`,
+		data: { event: e },
+		disabled: !t
+	});
+	return /* @__PURE__ */ m("div", {
+		ref: a,
+		style: {
+			opacity: o ? .25 : 1,
+			cursor: t ? "grab" : "default",
+			touchAction: "none"
+		},
+		...i,
+		...r,
+		children: n
+	});
+}, k = ({ date: e, children: t }) => {
+	let { setNodeRef: n, isOver: r } = l({
+		id: `day-${e.toISOString()}`,
+		data: { date: e }
+	});
+	return /* @__PURE__ */ m("div", {
+		ref: n,
+		style: {
+			height: "100%",
+			backgroundColor: r ? "var(--color-primary-50, rgba(37,99,235,0.08))" : void 0,
+			borderRadius: r ? "4px" : void 0,
+			transition: "background-color 0.15s ease"
+		},
+		children: t
+	});
+}, A = e.memo(({ date: n, events: r, renderEventItem: c, dateCellWrapper: l, editable: g = !1, onEventUpdate: x, onEventClick: S, onDateChange: C, onViewChange: w }) => {
+	let T = b(n), E = T.length / 7, A = v(), [j, M] = i(null), N = E === 4 ? "month-calendar--four-week" : E === 5 ? "month-calendar--five-week" : "month-calendar--six-week", P = d(u(s, { activationConstraint: { distance: 5 } })), F = t((e) => {
+		M(e.active.data.current?.event ?? null);
+	}, []), I = t((e) => {
+		M(null);
+		let { active: t, over: n } = e;
+		if (!n || !t.data.current) return;
+		let r = t.data.current.event, i = n.data.current?.date;
+		i && x?.(r, i, r.startTime);
+	}, [x]), L = (t, n, r) => /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("button", {
+		className: `month-calendar__day-button ${r ? "month-calendar__day-button--highlight" : ""}`,
+		onClick: () => {
+			C?.(t), w?.("day");
+		},
+		children: t.getDate()
+	}), /* @__PURE__ */ m("div", {
+		className: "month-calendar__event-list-wrapper",
+		children: /* @__PURE__ */ m("ul", {
+			className: "event-list",
+			children: n.map((t) => /* @__PURE__ */ m(e.Fragment, { children: c ? c({
+				event: t,
+				isDynamic: !1,
+				onClick: () => S?.(t)
+			}) : /* @__PURE__ */ m(O, {
+				event: t,
+				editable: g,
+				children: /* @__PURE__ */ m(D, {
+					event: t,
+					onClick: () => S?.(t)
+				})
+			}) }, t.id))
+		})
+	})] });
+	return /* @__PURE__ */ h(a, {
+		sensors: P,
+		onDragStart: F,
+		onDragEnd: I,
+		children: [/* @__PURE__ */ h("div", {
+			className: `month-calendar ${N}`,
+			children: [/* @__PURE__ */ m("ul", {
+				className: "month-calendar__day-of-week-list",
+				children: [
+					"Sun",
+					"Mon",
+					"Tue",
+					"Wed",
+					"Thu",
+					"Fri",
+					"Sat"
+				].map((e) => /* @__PURE__ */ m("li", {
+					className: "month-calendar__day-of-week",
+					children: e
+				}, e))
+			}), /* @__PURE__ */ m("div", {
+				className: "month-calendar__day-list-wrapper",
+				children: /* @__PURE__ */ m("ul", {
+					className: "month-calendar__day-list",
+					children: T.map((e, t) => {
+						let i = _(e, A), a = e.getMonth() === n.getMonth(), o = L(e, y(r, e), i);
+						return /* @__PURE__ */ m("li", {
+							className: `month-calendar__day ${a ? "" : "month-calendar__day--not-current-month"}`,
+							children: g ? /* @__PURE__ */ m(k, {
+								date: e,
+								children: l ? l({
+									date: e,
+									children: o
+								}) : o
+							}) : l ? l({
+								date: e,
+								children: o
+							}) : o
+						}, t);
+					})
+				})
+			})]
+		}), /* @__PURE__ */ m(o, {
+			modifiers: [f],
+			dropAnimation: null,
+			children: j ? /* @__PURE__ */ m("div", {
+				style: {
+					width: "160px",
+					opacity: .9,
+					boxShadow: "0 4px 16px rgba(0,0,0,0.18)",
+					pointerEvents: "none"
+				},
+				children: /* @__PURE__ */ m(D, { event: j })
+			}) : null
+		})]
+	});
+}), j = ({ minMinutes: e = 0, maxMinutes: t = 1440 }) => {
+	let n = /* @__PURE__ */ new Date(), r = n.getHours() * 60 + n.getMinutes();
+	if (r < e || r > t) return null;
+	let i = t - e;
+	return /* @__PURE__ */ m("div", {
+		className: "current-time-line",
+		style: {
+			position: "absolute",
+			top: `${(r - e) / i * 100}%`,
+			left: 0,
+			right: 0,
+			height: "2px",
+			backgroundColor: "#ef4444",
+			zIndex: 5,
+			pointerEvents: "none",
+			display: "flex",
+			alignItems: "center"
+		},
+		children: /* @__PURE__ */ m("div", { style: {
+			width: "10px",
+			height: "10px",
+			backgroundColor: "#ef4444",
+			borderRadius: "50%",
+			marginLeft: "-5px"
+		} })
+	});
+}, M = e.memo(({ event: e, children: t, editable: n }) => {
+	let { attributes: r, listeners: i, setNodeRef: a, transform: o, isDragging: s } = c({
+		id: `event-${e.id}`,
+		data: { event: e },
+		disabled: !n
+	});
+	return /* @__PURE__ */ m("div", {
+		ref: a,
+		style: {
+			transform: g.Translate.toString(o),
+			opacity: s ? .25 : 1,
+			cursor: n ? "grab" : "default",
+			touchAction: "none"
+		},
+		...i,
+		...r,
+		children: t
+	});
+}), N = e.memo(({ date: c, view: l, events: p, columns: g = [], showNowIndicator: b, renderEventItem: S, minMinutes: C = 0, maxMinutes: T = 1440, dayMinWidth: O, dateCellWrapper: k, allDaySlot: A = !0, slotDuration: N = 60, editable: P = !1, onEventUpdate: F, resourceLabelContent: I, onEventClick: L, onCellClick: R }) => {
+	let z = v(), B = r(null), V = r(null), H = r({
+		x: 0,
+		y: 0
+	});
+	n(() => {
+		let e = (e) => {
+			H.current = {
+				x: e.clientX,
+				y: e.clientY
+			};
+		};
+		return window.addEventListener("pointermove", e), () => window.removeEventListener("pointermove", e);
+	}, []);
+	let U = Math.floor(C / 60), W = [];
+	for (let e = C; e < T; e += N) W.push(e);
+	let G = Array.from({ length: Math.ceil(T / 60) - Math.floor(C / 60) }, (e, t) => Math.floor(C / 60) + t), K = N / 60 * 4, q = K * 16, J = [];
+	l === "week" ? J = x(c).map((e) => ({
+		id: e.toISOString(),
+		title: e.toLocaleDateString(void 0, { weekday: "short" }),
+		number: e.getDate(),
+		date: e
+	})) : l === "day" ? J = [{
+		id: c.toISOString(),
+		title: c.toLocaleDateString(void 0, { weekday: "short" }),
+		number: c.getDate(),
+		date: c
+	}] : l === "resource-day" && (J = g.map((e) => ({
+		...e,
+		date: c
+	})));
+	let [Y, X] = i(null), Z = d(u(s, { activationConstraint: { distance: 5 } })), Q = t((e) => {
+		let t = e.active.data.current?.event;
+		X(t ?? null), t && (console.group("🟢 DRAG START"), console.log("Event:", t.title), console.log("From:", `${Math.floor(t.startTime / 60)}:${String(t.startTime % 60).padStart(2, "0")}`), console.log("Date:", new Date(t.date).toDateString()), console.groupEnd());
+	}, []), ee = t((e) => {
+		if (X(null), !e.active.data.current) return;
+		let t = e.active.data.current.event, n = V.current;
+		if (!n) return;
+		let { x: r, y: i } = H.current, a = n.getBoundingClientRect(), o = r >= a.left && r <= a.right && i >= a.top && i <= a.bottom;
+		if (console.group("🔴 DRAG END"), console.log("Pointer (clientX/Y):", r.toFixed(0), i.toFixed(0)), console.log("Grid bounds:", `L:${a.left.toFixed(0)} R:${a.right.toFixed(0)} T:${a.top.toFixed(0)} B:${a.bottom.toFixed(0)}`), console.log("Inside grid:", o), !o) {
+			console.warn("Dropped outside calendar grid."), console.groupEnd();
+			return;
+		}
+		let s = r - a.left, c = a.width / J.length, u = Math.max(0, Math.min(J.length - 1, Math.floor(s / c))), d = J[u], f = i - a.top, p = n.querySelector(".week-calendar__cell"), m = p ? p.getBoundingClientRect().height : q, h = Math.max(C, f / m * N + C), g = Math.min(T - N, Math.floor(h / N) * N);
+		console.log("actualSlotPx:", m.toFixed(2), "| slotDuration:", N, "min"), console.log("relativeX:", s.toFixed(0), "→ col:", u, d?.title), console.log("relativeY:", f.toFixed(0), "(no scroll adjustment needed)"), console.log("Time:", `${Math.floor(t.startTime / 60)}:${String(t.startTime % 60).padStart(2, "0")}`, "→", `${Math.floor(g / 60)}:${String(g % 60).padStart(2, "0")}`), console.log("Target date:", d?.date.toDateString()), console.groupEnd(), d && F?.(t, d.date, g, l === "resource-day" ? d.id : void 0);
+	}, [
+		q,
+		N,
+		C,
+		T,
+		F,
+		l,
+		J
+	]);
+	n(() => {
+		if (B.current) {
+			let e = Math.max(U, (/* @__PURE__ */ new Date()).getHours() - 1);
+			B.current.scrollTop = (e - U) * 64;
+		}
+	}, [l, U]);
+	let $ = `repeat(${J.length}, minmax(${O || "0"}, 1fr))`;
+	return /* @__PURE__ */ h(a, {
+		sensors: Z,
+		onDragStart: Q,
+		onDragEnd: ee,
+		children: [/* @__PURE__ */ m("div", {
+			className: `week-calendar ${l === "day" || l === "resource-day" ? "week-calendar--day" : ""}`,
+			style: { "--slot-height": `${K}rem` },
+			children: /* @__PURE__ */ m("div", {
+				className: "week-calendar__scroll-area",
+				ref: B,
+				children: /* @__PURE__ */ h("div", {
+					style: {
+						minWidth: "max-content",
+						position: "relative"
+					},
+					children: [
+						/* @__PURE__ */ h("ul", {
+							className: "week-calendar__day-of-week-list",
+							style: {
+								gridTemplateColumns: `4.5rem ${$}`,
+								position: "sticky",
+								top: 0,
+								zIndex: 30,
+								backgroundColor: "var(--color-white)",
+								borderBottom: "1px solid var(--color-gray-300)"
+							},
+							children: [/* @__PURE__ */ m("li", { className: "week-calendar__corner-cell" }), J.map((e) => /* @__PURE__ */ m("li", {
+								className: "week-calendar__day-of-week",
+								children: I ? I({ resource: e }) : /* @__PURE__ */ h("div", {
+									className: `week-calendar__day-of-week-button ${_(e.date, z) ? "week-calendar__day-of-week-button--highlight" : ""}`,
+									children: [/* @__PURE__ */ m("span", {
+										className: "week-calendar__day-of-week-day",
+										children: e.title
+									}), e.number && /* @__PURE__ */ m("span", {
+										className: "week-calendar__day-of-week-number",
+										children: e.number
+									})]
+								})
+							}, e.id))]
+						}),
+						A && /* @__PURE__ */ h("ul", {
+							className: "week-calendar__all-day-list",
+							style: {
+								gridTemplateColumns: `4.5rem ${$}`,
+								backgroundColor: "var(--color-white)",
+								zIndex: 25,
+								position: "sticky",
+								top: "3.5rem",
+								borderBottom: "1px solid var(--color-gray-200)"
+							},
+							children: [/* @__PURE__ */ m("li", {
+								className: "week-calendar__all-day-label",
+								style: {
+									fontSize: "11px",
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									color: "var(--color-gray-500)",
+									backgroundColor: "var(--color-gray-50)"
+								},
+								children: "all-day"
+							}), J.map((t) => {
+								let { allDayEvents: n } = E(y(p, t.date, l === "resource-day" ? t.id : null));
+								return /* @__PURE__ */ m("li", {
+									className: "week-calendar__all-day-list-item",
+									children: /* @__PURE__ */ m("ul", {
+										className: "event-list",
+										children: n.map((t) => /* @__PURE__ */ m(e.Fragment, { children: S ? S({
+											event: t,
+											isDynamic: !1,
+											onClick: () => L?.(t)
+										}) : /* @__PURE__ */ m(D, {
+											event: t,
+											onClick: () => L?.(t)
+										}) }, t.id))
+									})
+								}, t.id);
+							})]
+						}),
+						/* @__PURE__ */ m("div", {
+							className: "week-calendar__content",
+							children: /* @__PURE__ */ h("div", {
+								className: "week-calendar__content-inner",
+								children: [/* @__PURE__ */ m("ul", {
+									className: "week-calendar__time-list",
+									style: {
+										position: "sticky",
+										left: 0,
+										zIndex: 15,
+										backgroundColor: "var(--color-white)",
+										borderRight: "1px solid var(--color-gray-300)"
+									},
+									children: G.map((e) => /* @__PURE__ */ m("li", {
+										className: "week-calendar__time-item",
+										children: /* @__PURE__ */ m("time", {
+											className: "week-calendar__time",
+											children: e === 0 ? "12:00 AM" : e > 12 ? `${e - 12}:00 PM` : `${e}:00 ${e === 12 ? "PM" : "AM"}`
+										})
+									}, e))
+								}), /* @__PURE__ */ m("div", {
+									ref: V,
+									className: "week-calendar__columns",
+									style: { gridTemplateColumns: $ },
+									children: J.map((t) => {
+										let { nonAllDayEvents: n } = E(y(p, t.date, l === "resource-day" ? t.id : null)), r = w(n, C, T);
+										return /* @__PURE__ */ h("div", {
+											className: "week-calendar__column",
+											children: [
+												W.map((n) => {
+													let r = new Date(t.date);
+													r.setHours(Math.floor(n / 60), n % 60, 0, 0);
+													let i = /* @__PURE__ */ m("div", {
+														className: "week-calendar__cell",
+														onClick: () => R?.(t.date, n)
+													});
+													return /* @__PURE__ */ m(e.Fragment, { children: k ? k({
+														date: r,
+														children: i
+													}) : i }, n);
+												}),
+												b && _(t.date, z) && /* @__PURE__ */ m(j, {
+													minMinutes: C,
+													maxMinutes: T
+												}),
+												r.map((t) => /* @__PURE__ */ m(e.Fragment, { children: S ? S({
+													event: t,
+													isDynamic: !0,
+													style: t.style,
+													onClick: () => L?.(t)
+												}) : /* @__PURE__ */ m(M, {
+													event: t,
+													editable: P,
+													children: /* @__PURE__ */ m(D, {
+														event: t,
+														isDynamic: !0,
+														style: t.style,
+														onClick: () => L?.(t)
+													})
+												}) }, t.id))
+											]
+										}, t.id);
+									})
+								})]
+							})
+						})
+					]
+				})
+			})
+		}), /* @__PURE__ */ m(o, {
+			modifiers: [f],
+			dropAnimation: null,
+			children: Y ? /* @__PURE__ */ m("div", {
+				style: {
+					width: "180px",
+					opacity: .9,
+					boxShadow: "0 8px 24px rgba(0,0,0,0.2)",
+					pointerEvents: "none"
+				},
+				children: /* @__PURE__ */ m(D, {
+					event: Y,
+					isDynamic: !0
+				})
+			}) : null
+		})]
+	});
+}), P = ({ date: t = /* @__PURE__ */ new Date(), view: n = "month", events: r = [], columns: i = [], showNowIndicator: a = !0, allDaySlot: o = !0, editable: s = !1, slotDuration: c = 60, renderEventItem: l, slotMinTime: u = "00:00:00", slotMaxTime: d = "24:00:00", dayMinWidth: f, resourceLabelContent: p, dateCellWrapper: h, onEventClick: g, onEventUpdate: _, onCellClick: v, onDateChange: y, onViewChange: b }) => {
+	let x = e.useCallback((e) => {
+		g?.(e);
+	}, [g]), C = e.useCallback((e, t) => {
+		v?.(e, t);
+	}, [v]), w = e.useCallback((e) => {
+		y?.(e);
+	}, [y]), T = e.useCallback((e) => {
+		b?.(e);
+	}, [b]), E = S(u), D = S(d);
+	return /* @__PURE__ */ m("div", {
+		className: "calendar",
+		children: (() => {
+			switch (n) {
+				case "month": return /* @__PURE__ */ m(A, {
+					date: t,
+					events: r,
+					renderEventItem: l,
+					dateCellWrapper: h,
+					editable: s,
+					onEventUpdate: _,
+					onEventClick: x,
+					onDateChange: w,
+					onViewChange: T
+				});
+				case "week":
+				case "day":
+				case "resource-day": return /* @__PURE__ */ m(N, {
+					date: t,
+					view: n,
+					events: r,
+					columns: i,
+					showNowIndicator: a,
+					renderEventItem: l,
+					minMinutes: E,
+					maxMinutes: D,
+					dayMinWidth: f,
+					allDaySlot: o,
+					slotDuration: c,
+					editable: s,
+					resourceLabelContent: p,
+					dateCellWrapper: h,
+					onEventClick: x,
+					onEventUpdate: _,
+					onCellClick: C
+				});
+				default: return null;
+			}
+		})()
+	});
+};
+//#endregion
+export { D as EventItem, P as MainCalendar, A as MonthView, N as TimeGridView };

package/dist/react-calendar.css

@@ -0,0 +1,2 @@
+.button{font-size:var(--font-size-sm);line-height:var(--line-height-sm);border-radius:var(--border-radius-md);cursor:pointer;height:2.125rem;transition:background-color var(--duration-sm) ease-out;border:none;padding:0 1rem;font-weight:400}.button--secondary{background-color:var(--color-white);border:1px solid var(--color-gray-300);color:var(--color-text-dark)}.button--secondary:hover{background-color:var(--color-gray-100)}.button--primary{background-color:var(--color-blue-600);color:var(--color-text-light)}.button--primary:hover{background-color:var(--color-blue-500)}.button--danger{background-color:var(--color-red-600);color:var(--color-text-light)}.button--danger:hover{background-color:var(--color-red-500)}.button--lg{height:2.5rem;font-weight:500}.button--sm{font-size:var(--font-size-xs);line-height:var(--line-height-xs);height:1.75rem;padding:0 .5rem}.button--icon{border:none;justify-content:center;align-items:center;width:2.125rem;padding:0;display:flex}.button--icon.button--sm{width:1.75rem}.button__icon{width:1rem}.button--sm .button__icon{width:.75rem}.event-list{flex-direction:column;gap:.125rem;list-style:none;display:flex}.event-list__item{display:flex}.event{cursor:pointer;text-align:left;width:100%;color:var(--color-gray-700);background:0 0;border:none;border-radius:4px;align-items:center;gap:6px;padding:2px 6px;font-size:13px;transition:background-color .1s;display:flex;overflow:hidden}.event:hover{background-color:var(--color-gray-100)}.event:active{background-color:var(--color-gray-200);transform:scale(.96)}.event--filled{background-color:var(--event-color,#2563eb);color:#fff}.event--filled:hover{filter:brightness(.95)}.event--dynamic{z-index:10;background-color:var(--event-color,#2563eb);color:#fff;width:calc(100% - 4px);box-shadow:var(--box-shadow-md);cursor:grab;border:1px solid #0000000d;flex-direction:column;align-items:flex-start;margin-left:2px;padding:4px 8px;transition:transform .1s,box-shadow .1s,background-color .1s;position:absolute;left:0}.event--dynamic:active{cursor:grabbing;box-shadow:var(--box-shadow-lg);transform:scale(.98)}.event__color{background-color:var(--event-color,#2563eb);border-radius:50%;flex-shrink:0;width:8px;height:8px}.event--filled .event__color{background-color:#fff}.event__title{white-space:nowrap;text-overflow:ellipsis;flex:1;font-weight:500;overflow:hidden}.event__time{opacity:.8;white-space:nowrap;font-size:11px}.event--dynamic .event__time{margin-top:2px;display:block}.month-calendar{flex-direction:column;height:100%;display:flex}.month-calendar__day-of-week-list{border-bottom:1px solid var(--color-gray-300);grid-template-columns:repeat(7,minmax(0,1fr));padding:.75rem 0;list-style:none;display:grid}.month-calendar__day-of-week{font-size:var(--font-size-md);line-height:var(--line-height-md);text-align:center;font-weight:500}.month-calendar__day-list-wrapper{flex:1;position:relative}.month-calendar__day-list{grid-template-columns:repeat(7,minmax(0,1fr));list-style:none;display:grid;position:absolute;inset:0;overflow-y:auto}.month-calendar--four-week .month-calendar__day-list{grid-template-rows:repeat(4,minmax(auto,1fr))}.month-calendar--five-week .month-calendar__day-list{grid-template-rows:repeat(5,minmax(auto,1fr))}.month-calendar--six-week .month-calendar__day-list{grid-template-rows:repeat(6,minmax(auto,1fr))}.month-calendar__day{border-right:1px solid var(--color-gray-300);border-bottom:1px solid var(--color-gray-300);cursor:pointer;flex-direction:column;transition:background-color .15s;display:flex}.month-calendar__day:hover{background-color:var(--color-gray-50)}.month-calendar__day--highlight{background-color:var(--color-blue-50)}.month-calendar__day--highlight:hover{background-color:#e0f2fe}.month-calendar__day:nth-child(7n){border-right:0}.month-calendar--four-week .month-calendar__day:nth-child(n+22),.month-calendar--five-week .month-calendar__day:nth-child(n+29),.month-calendar--six-week .month-calendar__day:nth-child(n+36){border-bottom:0}.month-calendar__day-button{cursor:pointer;width:2.25rem;height:2.25rem;font-size:var(--font-size-md);color:var(--color-text-dark);background-color:#0000;border:1px solid #0000;border-radius:50%;justify-content:center;align-items:center;margin:.5rem auto;transition:background-color .15s;display:flex}.month-calendar__day-button:hover{background-color:var(--color-gray-100)}.month-calendar__day-button--highlight{font-weight:600;background-color:var(--color-blue-600)!important;color:var(--color-white)!important}.month-calendar__day-button:active{background-color:var(--color-gray-200);transform:scale(.9)}.month-calendar__event-list-wrapper{flex-grow:1;padding-bottom:1.5rem}::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-track{background-color:#0000}::-webkit-scrollbar-thumb{background-color:var(--color-gray-300);border-radius:var(--border-radius-md)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-gray-400)}::-webkit-scrollbar-thumb:active{background-color:var(--color-gray-500)}.select{color:var(--color-text-dark);position:relative}.select--fill{width:100%}.select__select{font-size:var(--font-size-sm);line-height:var(--line-height-sm);color:var(--color-text-dark);border-radius:var(--border-radius-md);border:1px solid var(--color-gray-300);cursor:pointer;appearance:none;background-color:#0000;height:2.125rem;padding:0 2rem 0 .75rem;font-weight:400}.select--fill .select__select{width:100%}.select__icon{pointer-events:none;width:1.125rem;position:absolute;top:50%;right:.5rem;transform:translateY(-50%)}.week-calendar{flex-direction:column;height:100%;display:flex}.week-calendar__day-of-week-list{grid-template-columns:repeat(7,minmax(0,1fr));padding:.5rem 0;list-style:none;display:grid}.week-calendar--day .week-calendar__day-of-week-list{grid-template-columns:repeat(1,minmax(0,1fr))}.week-calendar__day-of-week{justify-content:center;display:flex}.week-calendar__day-of-week-button{border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--duration-sm) ease-out;background-color:#0000;border:2px solid #0000;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;padding:0;display:flex}.week-calendar__day-of-week-button:hover{background-color:var(--color-gray-100)}.week-calendar__day-of-week-button:active{background-color:var(--color-gray-200);transform:scale(.96)}.week-calendar__day-of-week-day{font-size:var(--font-size-sm);line-height:var(--line-height-sm);color:var(--color-gray-500)}.week-calendar__day-of-week-number{border-radius:var(--border-radius-md);font-size:var(--font-size-md);line-height:var(--line-height-md);color:var(--color-text-dark);border:1px solid #0000;padding:.25rem .5rem}.week-calendar__day-of-week-button--highlight .week-calendar__day-of-week-number{border-color:var(--color-blue-600)}.week-calendar__day-of-week-button--selected .week-calendar__day-of-week-number{background-color:var(--color-blue-600);color:var(--color-text-light)}.week-calendar__all-day-list{grid-template-columns:repeat(1,minmax(0,1fr));padding:.5rem;list-style:none;display:grid;position:relative}.week-calendar__all-day-list:after{content:"";height:1px;box-shadow:var(--box-shadow-md);position:absolute;bottom:0;left:0;right:0}.week-calendar__all-day-list-item{padding:0 .125rem}.week-calendar__content{width:100%;padding-top:1rem;position:relative}.week-calendar__content-inner{display:flex;position:relative}.week-calendar__time-list{width:4.5rem}.week-calendar__time-item{height:var(--slot-height,4rem);position:relative}.week-calendar__time{background-color:var(--color-white);z-index:10;font-size:var(--font-size-xs);color:var(--color-gray-500);white-space:nowrap;padding:0 4px;line-height:1;position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.week-calendar__columns{flex-grow:1;display:grid}.week-calendar__column{position:relative}.week-calendar__cell{height:var(--slot-height,4rem);border-bottom:1px solid var(--color-gray-300);cursor:pointer;transition:background-color .1s}.week-calendar__cell:hover{background-color:#f0f7ff}.week-calendar__cell:active{background-color:#e0f2fe}@media (width>=768px){.week-calendar__day-of-week-button{flex-direction:row;gap:.5rem;padding:.125rem .5rem}.week-calendar__day-of-week-button:hover{background-color:var(--color-gray-100)}.week-calendar__day-of-week-button--highlight{border-color:var(--color-blue-600)}.week-calendar__day-of-week-number{border:0;padding:0}.week-calendar__day-of-week-button--selected .week-calendar__day-of-week-number{color:var(--color-text-dark);background-color:#0000}.week-calendar__day-of-week-list{grid-template-columns:repeat(7,minmax(0,1fr))}.week-calendar--day .week-calendar__day-of-week-list{grid-template-columns:repeat(1,minmax(0,1fr))}.week-calendar__all-day-list{grid-template-columns:repeat(7,minmax(0,1fr))}.week-calendar--day .week-calendar__all-day-list{grid-template-columns:repeat(1,minmax(0,1fr))}.week-calendar__columns{grid-template-columns:repeat(7,minmax(0,1fr))}.week-calendar--day .week-calendar__columns{grid-template-columns:repeat(1,minmax(0,1fr))}.mobile-only{display:none}}@media (width<=767px){.desktop-only{display:none}}*{box-sizing:border-box;margin:0;padding:0;font-family:ui-sans-serif,system-ui,sans-serif}body{color:var(--color-text-dark);font-size:16px;line-height:1.5}:root{--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.125rem;--font-size-2xl:1.5rem;--line-height-xs:1rem;--line-height-sm:1.25rem;--line-height-md:1.5rem;--line-height-lg:1.75rem;--line-height-2xl:2rem;--border-radius-md:.25rem;--duration-sm:.1s;--duration-md:.3s;--duration-2xl:3s;--color-blue-50:#eff6ff;--color-blue-500:#3b82f6;--color-blue-600:#2563eb;--color-red-500:#ef4444;--color-red-600:#dc2626;--color-green-600:#16a34a;--color-gray-100:#f3f4f6;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-white:#fff;--color-black:#000;--color-text-light:#f9fafb;--color-text-dark:#030712;--box-shadow-md:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--box-shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a}.app{width:100%;height:100vh;overflow:hidden}.main{flex-direction:column;width:100%;height:100%;display:flex}.calendar{flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}.week-calendar__scroll-area{flex:1;position:relative;overflow:scroll auto}@media (width>=768px){.app{display:block}}
+/*$vite$:1*/

package/dist/src/components/Calendar/CurrentTimeLine.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface CurrentTimeLineProps {
+    minMinutes?: number;
+    maxMinutes?: number;
+}
+declare const CurrentTimeLine: React.FC<CurrentTimeLineProps>;
+export default CurrentTimeLine;

package/dist/src/components/Calendar/DraggableEvent.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { CalendarEvent } from './types/calendar';
+interface DraggableEventProps {
+    event: CalendarEvent;
+    children: React.ReactNode;
+    editable: boolean;
+}
+declare const _default: React.NamedExoticComponent<DraggableEventProps>;
+export default _default;

package/dist/src/components/Calendar/EventItem.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { CalendarEvent } from './types/calendar';
+interface EventItemProps {
+    event: CalendarEvent;
+    onClick?: (event: CalendarEvent) => void;
+    isDynamic?: boolean;
+    style?: React.CSSProperties;
+}
+declare const _default: React.NamedExoticComponent<EventItemProps>;
+export default _default;

package/dist/src/components/Calendar/MainCalendar.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { CalendarProps } from './types/calendar';
+/**
+ * MainCalendar - Portable React Component
+ */
+declare const MainCalendar: React.FC<CalendarProps>;
+export default MainCalendar;

package/dist/src/components/Calendar/MonthView.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { CalendarEvent, CalendarView, RenderEventProps, DateCellWrapperProps } from './types/calendar';
+interface MonthViewProps {
+    date: Date;
+    events: CalendarEvent[];
+    renderEventItem?: (props: RenderEventProps) => React.ReactNode;
+    dateCellWrapper?: (props: DateCellWrapperProps) => React.ReactNode;
+    editable?: boolean;
+    onEventUpdate?: (event: CalendarEvent, newDate: Date, newStartTime: number) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    onDateChange?: (date: Date) => void;
+    onViewChange?: (view: CalendarView) => void;
+}
+declare const _default: React.NamedExoticComponent<MonthViewProps>;
+export default _default;

package/dist/src/components/Calendar/TimeGridView.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { CalendarEvent, CalendarView, Resource, RenderEventProps, DateCellWrapperProps } from './types/calendar';
+interface TimeGridViewProps {
+    date: Date;
+    view: CalendarView;
+    events: CalendarEvent[];
+    columns?: Resource[];
+    showNowIndicator?: boolean;
+    renderEventItem?: (props: RenderEventProps) => React.ReactNode;
+    minMinutes?: number;
+    maxMinutes?: number;
+    dayMinWidth?: string;
+    dateCellWrapper?: (props: DateCellWrapperProps) => React.ReactNode;
+    allDaySlot?: boolean;
+    slotDuration?: number;
+    editable?: boolean;
+    onEventUpdate?: (event: CalendarEvent, newDate: Date, newStartTime: number, newResourceId?: string | number) => void;
+    resourceLabelContent?: (props: {
+        resource: Resource;
+    }) => React.ReactNode;
+    onEventClick?: (event: CalendarEvent) => void;
+    onCellClick?: (date: Date, minutes: number) => void;
+}
+declare const _default: React.NamedExoticComponent<TimeGridViewProps>;
+export default _default;

package/dist/src/components/Calendar/index.d.ts

@@ -0,0 +1,5 @@
+export { default as MainCalendar } from './MainCalendar';
+export { default as MonthView } from './MonthView';
+export { default as TimeGridView } from './TimeGridView';
+export { default as EventItem } from './EventItem';
+export * from './types/calendar';

package/dist/src/components/Calendar/types/calendar.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+export type CalendarView = "month" | "week" | "day" | "resource-day";
+export interface CalendarEvent {
+    id: string | number;
+    title: string;
+    date: Date | string;
+    startTime: number;
+    endTime: number;
+    resourceId?: string | number;
+    color?: string;
+    description?: string;
+    [key: string]: any;
+}
+export interface Resource {
+    id: string | number;
+    title: string;
+    [key: string]: any;
+}
+export interface RenderEventProps {
+    event: CalendarEvent;
+    isDynamic: boolean;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+}
+export interface DateCellWrapperProps {
+    date: Date;
+    children: ReactNode;
+}
+export interface CalendarProps {
+    date?: Date;
+    view?: CalendarView;
+    events?: CalendarEvent[];
+    columns?: Resource[];
+    showNowIndicator?: boolean;
+    allDaySlot?: boolean;
+    editable?: boolean;
+    slotDuration?: number;
+    slotMinTime?: string;
+    slotMaxTime?: string;
+    dayMinWidth?: string;
+    renderEventItem?: (props: RenderEventProps) => ReactNode;
+    resourceLabelContent?: (props: {
+        resource: Resource;
+    }) => ReactNode;
+    dateCellWrapper?: (props: DateCellWrapperProps) => ReactNode;
+    onEventClick?: (event: CalendarEvent) => void;
+    onEventUpdate?: (event: CalendarEvent, newDate: Date, newStartTime: number, newResourceId?: string | number) => void;
+    onCellClick?: (date: Date, minutes: number) => void;
+    onDateChange?: (date: Date) => void;
+    onViewChange?: (view: CalendarView) => void;
+}

package/dist/src/components/Calendar/utils/calendar-logic.d.ts

@@ -0,0 +1,36 @@
+import { CalendarEvent } from '../types/calendar';
+/**
+ * Common date & time logic for the calendar
+ */
+export declare const isTheSameDay: (d1: Date, d2: Date) => boolean;
+export declare const today: () => Date;
+export declare const getEventsForDate: (events: CalendarEvent[], date: Date, resourceId?: string | number | null) => CalendarEvent[];
+export declare const generateMonthCalendarDays: (date: Date) => Date[];
+export declare const generateWeekDays: (date: Date) => Date[];
+export declare const timeToMinutes: (timeString: string) => number;
+export declare const formatMinutesToTime: (minutes: number) => string;
+/**
+ * Enhanced: Pre-calculate styles (top/height/left/width) for events.
+ * Handles overlapping events within the same column.
+ */
+export declare const groupEvents: (events: CalendarEvent[], minMinutes: number, maxMinutes: number) => any[];
+/**
+ * Format a time range nicely (e.g. "10:00 AM - 11:30 AM")
+ */
+export declare const formatTimeRange: (start: number, end: number) => string;
+/**
+ * Separates events into all-day and timed events
+ */
+export declare const separateAllDayEvents: (events: CalendarEvent[]) => {
+    allDayEvents: CalendarEvent[];
+    nonAllDayEvents: CalendarEvent[];
+};
+/**
+ * Generates an array of minutes representing the time slots for a day
+ */
+export declare const generateTimeSlots: (start: number, end: number, step: number) => number[];
+/**
+ * Basic date navigation logic
+ */
+export declare const addDays: (date: Date, days: number) => Date;
+export declare const addMonths: (date: Date, months: number) => Date;

package/package.json

@@ -0,0 +1,205 @@
+{
+  "name": "main-calendar",
+  "version": "1.0.0",
+  "private": false,
+  "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
+  "homepage": "https://github.com/QNhat1998/-main-calendar-react#readme",
+  "bugs": {
+    "url": "https://github.com/QNhat1998/-main-calendar-react/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/QNhat1998/-main-calendar-react.git"
+  },
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/src/components/Calendar/index.d.ts"
+    },
+    "./dist/react-calendar.css": "./dist/react-calendar.css"
+  },
+  "main": "./dist/index.cjs",
+  "types": "./dist/src/components/Calendar/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "acorn": "^8.16.0",
+    "acorn-jsx": "^5.3.2",
+    "ajv": "^6.14.0",
+    "ajv-formats": "^3.0.1",
+    "alien-signals": "^0.4.14",
+    "ansi-styles": "^4.3.0",
+    "argparse": "^2.0.1",
+    "balanced-match": "^1.0.2",
+    "baseline-browser-mapping": "^2.10.13",
+    "brace-expansion": "^1.1.13",
+    "browserslist": "^4.28.2",
+    "callsites": "^3.1.0",
+    "caniuse-lite": "^1.0.30001784",
+    "chalk": "^4.1.2",
+    "color-convert": "^2.0.1",
+    "color-name": "^1.1.4",
+    "compare-versions": "^6.1.1",
+    "concat-map": "^0.0.1",
+    "confbox": "^0.2.4",
+    "convert-source-map": "^2.0.0",
+    "cross-spawn": "^7.0.6",
+    "csstype": "^3.2.3",
+    "de-indent": "^1.0.2",
+    "debug": "^4.4.3",
+    "deep-is": "^0.1.4",
+    "detect-libc": "^2.1.2",
+    "diff": "^8.0.4",
+    "electron-to-chromium": "^1.5.331",
+    "entities": "^7.0.1",
+    "escalade": "^3.2.0",
+    "escape-string-regexp": "^4.0.0",
+    "eslint-scope": "^8.4.0",
+    "eslint-visitor-keys": "^4.2.1",
+    "espree": "^10.4.0",
+    "esquery": "^1.7.0",
+    "esrecurse": "^4.3.0",
+    "estraverse": "^5.3.0",
+    "estree-walker": "^2.0.2",
+    "esutils": "^2.0.3",
+    "exsolve": "^1.0.8",
+    "fast-deep-equal": "^3.1.3",
+    "fast-json-stable-stringify": "^2.1.0",
+    "fast-levenshtein": "^2.0.6",
+    "fast-uri": "^3.1.0",
+    "fdir": "^6.5.0",
+    "file-entry-cache": "^8.0.0",
+    "find-up": "^5.0.0",
+    "flat-cache": "^4.0.1",
+    "flatted": "^3.4.2",
+    "fs-extra": "^11.3.4",
+    "function-bind": "^1.1.2",
+    "gensync": "^1.0.0-beta.2",
+    "glob-parent": "^6.0.2",
+    "graceful-fs": "^4.2.11",
+    "has-flag": "^4.0.0",
+    "hasown": "^2.0.2",
+    "he": "^1.2.0",
+    "hermes-estree": "^0.25.1",
+    "hermes-parser": "^0.25.1",
+    "ignore": "^5.3.2",
+    "import-fresh": "^3.3.1",
+    "import-lazy": "^4.0.0",
+    "imurmurhash": "^0.1.4",
+    "is-core-module": "^2.16.1",
+    "is-extglob": "^2.1.1",
+    "is-glob": "^4.0.3",
+    "isexe": "^2.0.0",
+    "jju": "^1.4.0",
+    "js-tokens": "^4.0.0",
+    "js-yaml": "^4.1.1",
+    "jsesc": "^3.1.0",
+    "json-buffer": "^3.0.1",
+    "json-schema-traverse": "^0.4.1",
+    "json-stable-stringify-without-jsonify": "^1.0.1",
+    "json5": "^2.2.3",
+    "jsonfile": "^6.2.0",
+    "keyv": "^4.5.4",
+    "kolorist": "^1.8.0",
+    "levn": "^0.4.1",
+    "lightningcss": "^1.32.0",
+    "lightningcss-win32-x64-msvc": "^1.32.0",
+    "local-pkg": "^1.1.2",
+    "locate-path": "^6.0.0",
+    "lodash": "^4.18.1",
+    "lodash.merge": "^4.6.2",
+    "lru-cache": "^5.1.1",
+    "magic-string": "^0.30.21",
+    "minimatch": "^3.1.5",
+    "mlly": "^1.8.2",
+    "ms": "^2.1.3",
+    "muggle-string": "^0.4.1",
+    "nanoid": "^3.3.11",
+    "natural-compare": "^1.4.0",
+    "node-releases": "^2.0.37",
+    "optionator": "^0.9.4",
+    "p-limit": "^3.1.0",
+    "p-locate": "^5.0.0",
+    "parent-module": "^1.0.1",
+    "path-browserify": "^1.0.1",
+    "path-exists": "^4.0.0",
+    "path-key": "^3.1.1",
+    "path-parse": "^1.0.7",
+    "pathe": "^2.0.3",
+    "picocolors": "^1.1.1",
+    "picomatch": "^4.0.4",
+    "pkg-types": "^2.3.0",
+    "postcss": "^8.5.8",
+    "prelude-ls": "^1.2.1",
+    "punycode": "^2.3.1",
+    "quansync": "^0.2.11",
+    "require-from-string": "^2.0.2",
+    "resolve": "^1.22.11",
+    "resolve-from": "^4.0.0",
+    "rolldown": "^1.0.0-rc.12",
+    "scheduler": "^0.27.0",
+    "semver": "^6.3.1",
+    "shebang-command": "^2.0.0",
+    "shebang-regex": "^3.0.0",
+    "source-map": "^0.6.1",
+    "source-map-js": "^1.2.1",
+    "sprintf-js": "^1.0.3",
+    "string-argv": "^0.3.2",
+    "strip-json-comments": "^3.1.1",
+    "supports-color": "^7.2.0",
+    "supports-preserve-symlinks-flag": "^1.0.0",
+    "tinyglobby": "^0.2.15",
+    "tslib": "^2.8.1",
+    "type-check": "^0.4.0",
+    "ufo": "^1.6.3",
+    "undici-types": "^7.18.2",
+    "universalify": "^2.0.1",
+    "update-browserslist-db": "^1.2.3",
+    "uri-js": "^4.4.1",
+    "vscode-uri": "^3.1.0",
+    "which": "^2.0.2",
+    "word-wrap": "^1.2.5",
+    "yallist": "^3.1.1",
+    "yocto-queue": "^0.1.0",
+    "zod": "^4.3.6",
+    "zod-validation-error": "^4.0.2"
+  },
+  "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^25.5.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "@dnd-kit/core": ">=6.0.0",
+    "@dnd-kit/modifiers": ">=6.0.0",
+    "@dnd-kit/utilities": ">=3.0.0"
+  },
+  "module": "./dist/index.js"
+}