Hapio एक हेडलेस सिस्टम है। हम आपको बुकिंग और शेड्यूलिंग API देते हैं — सेवाएं, संसाधन, शेड्यूल, बुक करने योग्य स्लॉट — और आप अपने ग्राहकों को दिखने वाला अनुभव तैयार करते हैं। यह बुकिंग प्रक्रिया के लिए तो ठीक काम करता है, लेकिन देर-सवेर अधिकांश प्रोजेक्ट्स को एक वास्तविक कैलेंडर की आवश्यकता होती है: एक सप्ताह का दृश्य जिसमें कर्मचारी बुकिंग को इधर-उधर ड्रैग कर सकें, एक दिन का दृश्य जो खाली स्लॉट दिखाता हो, और एक महीने का दृश्य जो समग्र अवलोकन प्रदान करता हो।
अब तक, इसका मतलब या तो किसी व्यावसायिक कैलेंडर लाइब्रेरी का उपयोग करना था या उसे शुरू से बनाना था। जब आपका डेटा मॉडल पहले से ही Hapio में मौजूद हो, तो दोनों ही विकल्प अच्छे नहीं हैं।
आज हम Hapio Calendar जारी कर रहे हैं, जो React 19 और shadcn/ui के लिए एक ओपन-सोर्स, पूर्ण आकार का कैलेंडर कंपोनेंट है। इसमें सप्ताह, दिन, माह और सूची दृश्य, ड्रैग और रीसाइज़ करने की सुविधा, प्रति-कैलेंडर समय क्षेत्र और आवर्ती इवेंट शामिल हैं, और यह Hapio API के साथ सहजता से संवाद करने के लिए बनाया गया है। यह MIT लाइसेंस के अंतर्गत है, और इसका कोई प्रीमियम टियर नहीं है।
सप्ताह का दृश्य। खुलने का समय छायांकित है, बुकिंग ग्रिड पर दिखाई देती हैं, और लाल रेखा वर्तमान समय को दर्शाती है।
यह क्या करता है
हैपियो कैलेंडर एक पूर्ण कैलेंडर है, न कि केवल तिथि चयन टूल। यह आपको डिफ़ॉल्ट रूप से निम्नलिखित सुविधाएँ प्रदान करता है:
- चार प्रकार के दृश्य। सप्ताह, दिन, महीना और सूची, जिसमें दृश्य और तिथि को वैकल्पिक रूप से यूआरएल में रखा जा सकता है ताकि लिंक साझा किए जा सकें।
- ड्रैग, रीसाइज़ और कीबोर्ड एडिटिंग। इवेंट्स को माउस से या प्रत्येक इवेंट पर मौजूद एक्शन मेनू के माध्यम से कीबोर्ड से मूव और रीसाइज़ किया जा सकता है। आप कैलेंडर के बाहर से भी आइटम ड्रैग करके ला सकते हैं, उदाहरण के लिए अनअसाइन किए गए बुकिंग की सूची से।
- समय क्षेत्र सही ढंग से व्यवस्थित हैं। प्रत्येक कैलेंडर का अपना समय क्षेत्र होता है, और आप इसे बिना रीमाउंट किए बदल सकते हैं। 23 या 25 घंटे वाले दिन सही ढंग से व्यवस्थित होते हैं, इसलिए डेलाइट सेविंग के दौरान ग्रिड में कोई गड़बड़ी नहीं होती।
- बुकिंग के नियम। खुलने का समय, ओवरलैप चेक और आपके द्वारा किए जाने वाले कस्टम चेक। जब कोई बुकिंग अस्वीकृत हो जाती है, तो कैलेंडर उपयोगकर्ता को इसका कारण बताता है।
- आशावादी सेव। कोई भी बदलाव तुरंत दिखाई देता है, जब तक आपका API उसे सेव नहीं कर लेता तब तक वह पेंडिंग स्थिति में रहता है, और सेव विफल होने पर स्थिति वापस पहले जैसी हो जाती है।
- आवर्ती घटनाएँ। RFC 5545 श्रृंखला का संपादन, जिसमें सर्वर द्वारा ज़ोन और तिथि की जानकारी होने पर सर्वर-साइड विस्तार शामिल है।
- इसमें अंतर्निहित अभिगम्यता सुविधाएँ हैं। प्रत्येक उदाहरण पर कीबोर्ड मूवमेंट, लाइव घोषणाएँ और एक्स चेक उपलब्ध हैं।
- स्थानीयकरण। स्वीडिश सहित कई भाषाएँ, और दाएँ से बाएँ लेआउट।
- सर्वर रेंडरिंग। यह SSR और React सर्वर कंपोनेंट्स के साथ काम करता है, और इसके साथ एक कंटेंट सिक्योरिटी पॉलिसी गाइड भी शामिल है।
इसमें ISO सप्ताह संख्या, बहु-दिवसीय कार्यक्रम और व्यस्त दिनों में "+N और" का अतिरिक्त विकल्प सहित माह का दृश्य शामिल है।
हैपियो के लिए निर्मित
कैलेंडर एक सामान्य घटक है, लेकिन इसे इस तरह से डिज़ाइन किया गया है कि Hapio प्रोजेक्ट वास्तव में कैसे काम करता है। एकीकरण तीन कॉलबैक पर आधारित है:
- लोड करें। एक इवेंट सोर्स आपके सर्वर पर मौजूद रूट से प्रत्येक दृश्यमान तिथि सीमा के लिए बुकिंग प्राप्त करता है।
- बुकिंग करें। Hapio से बुक करने योग्य स्लॉट खाली समय के रूप में दिखाए जाते हैं। जब कोई ग्राहक या कर्मचारी उनमें से किसी एक को चुनता है, तो आपका ऐप बुकिंग बना देता है।
- पुनर्निर्धारित करें। ड्रैग और कीबोर्ड मूव्स कॉल
onEventChangeयदि हैपियो परिवर्तन को अस्वीकार कर देता है — जैसे कि संसाधन अनुपलब्ध है, या स्लॉट खुलने के समय के बाहर है — तो कैलेंडर इसे वापस पहले जैसा कर देता है और कारण बताता है।
बुकिंग को ड्रैग करके उसका समय बदलें। सर्वर द्वारा बदलाव की पुष्टि होने तक मूल स्लॉट धुंधला दिखाई देगा।
हमारे एडमिन पैनल की तरह, आपका API टोकन कभी ब्राउज़र तक नहीं पहुँचता। आपका सर्वर Hapio से इसके माध्यम से बात करता है। hapio-sdk पैकेज में कैलेंडर केवल आपके सर्वर से ही संचार करता है। टोकन पर अनुमतियाँ हमेशा की तरह Hapio द्वारा लागू की जाती हैं।
कोड आपका है
हम एक और ब्लैक-बॉक्स कैलेंडर नहीं भेजना चाहते थे। हैपियो कैलेंडर को तीन लेयर्स में बांटा गया है, और आप चुन सकते हैं कि आप कितनी गहराई तक जाना चाहते हैं:
@hapio/calendar-core— फ्रेमवर्क-मुक्त तर्क: लेआउट, समय क्षेत्र की गणना, नियम, पुनरावृत्ति। रिएक्ट का उपयोग नहीं किया गया है।@hapio/calendar-reactकोर के ऊपर हेडलेस हुक। आप अपनी पसंद के मार्कअप और स्टाइलिंग ला सकते हैं।- The
@hapioशेडकन रजिस्ट्री — यह एक तैयार, उपयोग के लिए तैयार घटक है। इसे shadcn CLI के साथ इंस्टॉल किया जाता है और कॉपी किया जाता है। आपका यह एक प्रोजेक्ट है, इसलिए अन्य शेडकन कंपोनेंट की तरह ही आप इन फाइलों को एडिट कर सकते हैं।
अधिकांश प्रोजेक्ट रजिस्ट्री कंपोनेंट से शुरू होते हैं और केवल तभी हुक्स का उपयोग करते हैं जब उन्हें किसी असामान्य चीज़ की आवश्यकता होती है। किसी भी स्थिति में, ऐसा कुछ भी नहीं है जिसे आप बदल नहीं सकते।
शुरू करना
आपको React 19.2 या उसके बाद का संस्करण और Tailwind CSS 4 (Radix या Base UI में से कोई एक) पर आधारित शेड/यूआई ऐप की आवश्यकता है। सर्वर रेंडरिंग के लिए, Node 22.12 या उसके बाद का संस्करण आवश्यक है।
सबसे पहले, इसे जोड़ें @hapio आपकी रजिस्ट्री components.json:
जेएन
{
"registries": {
"@hapio": "https://calendar.hapio.io/r/{name}.json"
}
}फिर कैलेंडर जोड़ें:
शंख
npx shadcn@latest add @hapio/hapio-calendarयह घटक को कॉपी करता है components/hapio-calendar/छाया को खींचता है button, popover और scroll-area घटक, और स्थापना @hapio/calendar-react और temporal-polyfillअपने ऐप के रूट में पॉलीफ़िल को एक बार लोड करें, फिर कैलेंडर को ऊंचाई और समय क्षेत्र के साथ रेंडर करें:
टीएसएक्स
<HapioCalendar
events={events}
timeZone="Europe/Stockholm"
className="h-[36rem]"
/>मूल घटक केवल पढ़ने योग्य है। जोड़ें calendar-selection उपयोगकर्ताओं को समय चुनने की अनुमति देने के लिए, calendar-editing इवेंट्स को स्थानांतरित करने और उनका आकार बदलने के लिए, और calendar-external-draggable बाहर से सामान अंदर डालने के लिए। इंस्टालेशन गाइड वह प्रत्येक चरण से गुजरता है, और आपका पहला कैलेंडर इसके बाद की बात है।
Hapio Calendar को React 19, shadcn/ui, TypeScript, Tailwind CSS और Temporal पॉलीफ़िल का उपयोग करके बनाया गया है और इसे MIT लाइसेंस के तहत जारी किया गया है। प्रत्येक उदाहरण स्वचालित अभिगम्यता जाँचों से गुजरता है, और परीक्षण सूट स्रोत कोड के साथ आता है। समस्याओं और पुल अनुरोधों का हार्दिक स्वागत है।
ब्राउज़ करें उदाहरणों, को पढ़िए डॉक्सया दौड़ें npx shadcn@latest add @hapio/hapio-calendar और आज ही इसे अपने प्रोजेक्ट में आजमाएं।
लिंक: calendar.hapio.io · GitHub रिपॉजिटरी · Hapio दस्तावेज़ · Hapio पोर्टल
