expo-calendar-2k 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present 650 Industries, Inc. (aka Expo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,267 @@
+# calendar-2k
+
+The fastest fully customizable Expo date & time picker, written in TypeScript, supporting Expo Go, single date, time, date range, time range, datetime range selection, flexible date disabling, and dynamic color theming for iOS and Android.
+
+---
+
+## Features
+
+- 📅 **Date picker** — single date selection
+- 🕐 **Time picker** — single time selection
+- 📆 **Date range picker** — select a start and end date
+- ⏱️ **Time range picker** — select a start and end time
+- 🗓️ **Datetime & datetime range** — combined date and time selection
+- 🚫 **Flexible date disabling** — disable specific days by custom logic
+- 🎨 **Dynamic color theming** — fully customizable accent color
+- 💙 **Expo Go support** — works out of the box with Expo Go
+- 📘 **Fully written in TypeScript**
+
+---
+
+## Installation
+
+```bash
+npx expo install calendar-2k
+```
+
+---
+
+## Usage
+
+### Example 1 — Date Picker
+
+Single date selection with disabled days (Sunday, Wednesday, Saturday).
+
+```tsx
+import { DateValueType } from "calendar-2k";
+import Calendar2kView from "calendar-2k";
+import { useState } from "react";
+
+export default function App() {
+  const [date, setDate] = useState<DateValueType>(new Date());
+
+  return (
+    <Calendar2kView
+      onChangeDate={setDate}
+      value={date}
+      mode="date"
+      color="black"
+      disableDate={(date) => [0, 3, 6].includes(date.getDay())}
+    />
+  );
+}
+```
+
+---
+
+### Example 2 — Datetime Picker
+
+Combined date and time selection in a single picker.
+
+```tsx
+import { DateValueType } from "calendar-2k";
+import Calendar2kView from "calendar-2k";
+import { useState } from "react";
+
+export default function App() {
+  const [date, setDate] = useState<DateValueType>(new Date());
+
+  return (
+    <Calendar2kView
+      onChangeDate={setDate}
+      value={date}
+      mode="datetime"
+      color="black"
+      disableDate={(date) => [0, 3, 6].includes(date.getDay())}
+    />
+  );
+}
+```
+
+---
+
+### Example 3 — Datetime Range Picker
+
+Select a start and end datetime, useful for bookings and reservations.
+
+```tsx
+import { DateValueType } from "calendar-2k";
+import Calendar2kView from "calendar-2k";
+import { useState } from "react";
+
+export default function App() {
+  const [date, setDate] = useState<DateValueType>({
+    start: new Date(),
+    end: new Date(),
+  });
+
+  return (
+    <Calendar2kView
+      onChangeDate={setDate}
+      value={date}
+      mode="datetime"
+      color="black"
+      disableDate={(date) => [0, 3, 6].includes(date.getDay())}
+    />
+  );
+}
+```
+
+---
+
+### Example 4 — Time Range Picker
+
+Select a start and end time, useful for timetable.
+
+```tsx
+import { DateValueType } from "calendar-2k";
+import Calendar2kView from "calendar-2k";
+import { useState } from "react";
+
+export default function App() {
+  const [date, setDate] = useState<DateValueType>({
+    start: new Date(),
+    end: new Date(),
+  });
+
+  return (
+    <Calendar2kView
+      onChangeDate={setDate}
+      value={date}
+      mode="time"
+      color="black"
+    />
+  );
+}
+```
+
+---
+
+## Props
+
+| Prop            | Type                                        | Required | Description                                                                                               |
+| --------------- | ------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------- |
+| `onChangeDate`  | `(value: DateValueType) => void`            | ❌       | Callback fired when the user selects a date or range                                                      |
+| `value`         | `DateValueType`                             | ❌       | Current selected value — a `Date` or `{ start: Date, end: Date }` object                                  |
+| `locales`       | `Intl.LocalesArgument`                      | ❌       | Locale for displaying month/day names and time format (e.g. `"fr"`, `"en-US"`). Defaults to device locale |
+| `mode`          | `"date" \| "time" \| "datetime"`            | ❌       | Picker mode                                                                                               |
+| `color`         | `string`                                    | ❌       | Accent color for the picker UI (any valid CSS/RN color)                                                   |
+| `min`           | `Date`                                      | ❌       | Earliest selectable date — all dates before this are automatically disabled                               |
+| `max`           | `Date`                                      | ❌       | Latest selectable date — all dates after this are automatically disabled                                  |
+| `disableDate`   | `(date: Date) => boolean`                   | ❌       | Function to disable specific dates — return `true` to disable                                             |
+| `placeholder`   | `string`                                    | ❌       | Text shown in the trigger button when no date is selected yet                                             |
+| `customTrigger` | `(onToggle: () => void) => React.ReactNode` | ❌       | Custom element to replace the default trigger button                                                      |
+| `disabled`      | `boolean`                                   | ❌       | Disables the entire picker — the trigger becomes non-interactive                                          |
+
+---
+
+## Types
+
+```ts
+// Single date or datetime
+type DateValueType = Date | { start: Date; end: Date };
+```
+
+---
+
+## Working with the Selected Value
+
+`DateValueType` is a standard JavaScript `Date` object (or a pair of them for ranges). Use the built-in `Date` methods to extract any part of the selected value:
+
+```tsx
+const date = new Date("2025-06-15T14:30:00");
+
+date.getFullYear(); // 2025
+date.getMonth(); // 5 (0-indexed, so 5 = June)
+date.getDate(); // 15
+date.getDay(); // 0–6 (day of the week, 0 = Sunday)
+date.getHours(); // 14
+date.getMinutes(); // 30
+date.getSeconds(); // 0
+date.toISOString(); // "2025-06-15T14:30:00.000Z"
+date.toLocaleDateString(); // "6/15/2025" (format depends on locale)
+date.toLocaleTimeString(); // "2:30:00 PM"
+```
+
+For range values, access each bound separately:
+
+```tsx
+const [date, setDate] = useState<DateValueType>({
+  start: new Date(),
+  end: new Date(),
+});
+
+if (date && "start" in date) {
+  date.start.getDate(); // start day
+  date.end.getFullYear(); // end year
+}
+```
+
+---
+
+## Modes
+
+| Mode       | `value` type               | Description               |
+| ---------- | -------------------------- | ------------------------- |
+| `date`     | `Date` or `{ start, end }` | Pick a date or a range    |
+| `time`     | `Date` or `{ start, end }` | Pick a time or a range    |
+| `datetime` | `Date` or `{ start, end }` | Pick date+time or a range |
+
+---
+
+## Disabling Dates
+
+Pass a function to `disableDate` that receives a `Date` and returns `true` to disable it:
+
+```tsx
+// Disable weekends (Saturday = 6, Sunday = 0)
+disableDate={(date) => [0, 6].includes(date.getDay())}
+
+// Disable past dates
+disableDate={(date) => date < new Date()}
+
+// Disable a specific date
+disableDate={(date) => date.toDateString() === new Date("2025-12-25").toDateString()}
+```
+
+You can also use `min` and `max` for simpler range-based disabling:
+
+```tsx
+// Only allow dates in 2025
+<Calendar2kView
+  min={new Date("2025-01-01")}
+  max={new Date("2025-12-31")}
+  ...
+/>
+```
+
+---
+
+## Platform Support
+
+| Platform | Supported      |
+| -------- | -------------- |
+| iOS      | ✅             |
+| Android  | ✅             |
+| Expo Go  | ✅             |
+| Web      | 🚧 Coming soon |
+
+---
+
+## Support & Donation
+
+If **calendar-2k** saved you time, consider buying me a coffee! ☕  
+Your support helps me maintain this project and build more free open-source tools. 🙏
+
+### 💛 Donate via Orange Money (Madagascar)
+
+> Send your donation directly to my Orange Money number:
+>
+> **📱 +261 37 654 4250**
+> Or Mvola **📱 +261 34 68 814 74**
+> Or Arteil Money **📱 +261 33 36 613 20**
+> _Any amount is deeply appreciated!_ 🤝
+
+---
+
+MIT

package/android/build.gradle

@@ -0,0 +1,18 @@
+plugins {
+  id 'com.android.library'
+  id 'expo-module-gradle-plugin'
+}
+
+group = 'expo.modules.calendar2k'
+version = '0.1.0'
+
+android {
+  namespace "expo.modules.calendar2k"
+  defaultConfig {
+    versionCode 1
+    versionName "0.1.0"
+  }
+  lintOptions {
+    abortOnError false
+  }
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

package/android/src/main/java/expo/modules/calendar2k/Calendar2kModule.kt

@@ -0,0 +1,15 @@
+package expo.modules.calendar2k
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class Calendar2kModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("Calendar2k")
+
+    Events("onChange")
+
+    View(Calendar2kView::class) {
+    }
+  }
+}

package/android/src/main/java/expo/modules/calendar2k/Calendar2kView.kt

@@ -0,0 +1,26 @@
+package expo.modules.calendar2k
+
+import android.content.Context
+import android.graphics.Color
+import android.view.Gravity
+import android.widget.LinearLayout
+import android.widget.TextView
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ExpoView
+
+class Calendar2kView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  init {
+    val container = LinearLayout(context).apply {
+      layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+      orientation = LinearLayout.VERTICAL
+      gravity = Gravity.CENTER
+      setBackgroundColor(Color.parseColor("#aabbcc"))
+    }
+    val label = TextView(context).apply {
+      text = "Calendar2k - native view"
+      gravity = Gravity.CENTER
+    }
+    container.addView(label)
+    addView(container)
+  }
+}

package/build/Calendar2k.types.d.ts

@@ -0,0 +1,38 @@
+export type Calendar2kModuleEvents = {
+    onChange: (params: ChangeEventPayload) => void;
+};
+export type ChangeEventPayload = {
+    value: string;
+};
+export type OnTapEventPayload = Record<string, never>;
+export type Calendar2kViewProps = {
+    onChangeDate?: (date: DateValueType) => void;
+    value?: DateValueType;
+    locales?: Intl.LocalesArgument;
+    mode?: "date" | "time" | "datetime";
+    color?: string;
+    min?: Date;
+    max?: Date;
+    disableDate?: (date: Date) => boolean;
+    placeholder?: string;
+    customTrigger?: (onToggle: () => void) => React.ReactNode;
+    disabled?: boolean;
+};
+export type DayColumnProps = {
+    label: string;
+    dayNumber: number;
+};
+export type DayProps = {
+    date: Date;
+};
+export type TimeType = `${number}${number}:${number}${number}:${number}${number}`;
+export type TimeRangeType = {
+    start: TimeType;
+    end?: TimeType;
+};
+export type DateRangeType = {
+    start: Date;
+    end?: Date;
+};
+export type DateValueType = Date | DateRangeType | TimeType | TimeRangeType;
+export type DateStateType = Date | DateRangeType;

package/build/Calendar2k.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/Calendar2kModule.d.ts

@@ -0,0 +1,8 @@
+import { NativeModule } from "expo";
+import { Calendar2kModuleEvents } from "./Calendar2k.types";
+declare class Calendar2kModule extends NativeModule<Calendar2kModuleEvents> {
+}
+declare const _default: Calendar2kModule;
+export default _default;
+export type { DateValueType } from "./Calendar2k.types";
+export { default as Calendar2kView } from "./Calendar2kView";

package/build/Calendar2kModule.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar2kView = void 0;
+var expo_1 = require("expo");
+exports.default = (0, expo_1.requireNativeModule)("Calendar2k");
+var Calendar2kView_1 = require("./Calendar2kView");
+Object.defineProperty(exports, "Calendar2kView", { enumerable: true, get: function () { return __importDefault(Calendar2kView_1).default; } });

package/build/Calendar2kModule.web.d.ts

@@ -0,0 +1,6 @@
+import { NativeModule } from 'expo';
+import { Calendar2kModuleEvents } from './Calendar2k.types';
+declare class Calendar2kModule extends NativeModule<Calendar2kModuleEvents> {
+}
+declare const _default: typeof Calendar2kModule;
+export default _default;

package/build/Calendar2kModule.web.js

@@ -0,0 +1,26 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var expo_1 = require("expo");
+var Calendar2kModule = /** @class */ (function (_super) {
+    __extends(Calendar2kModule, _super);
+    function Calendar2kModule() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return Calendar2kModule;
+}(expo_1.NativeModule));
+exports.default = (0, expo_1.registerWebModule)(Calendar2kModule, 'Calendar2kModule');

package/build/Calendar2kView.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { type Calendar2kViewProps, type DateValueType } from "./Calendar2k.types";
+export default function Calendar2kView({ onChangeDate, value, locales, color, min, max, disableDate, placeholder, customTrigger, mode, disabled, }: Calendar2kViewProps): React.JSX.Element;
+export type { Calendar2kViewProps, DateValueType };