An easy to use lightweight javascript calendar library.
Install DateDreamer with either yarn or npm.
npm install datedreamer
yarn install datedreamer
<script src="node_modules/datedreamer/datedreamer.js">
<div id="calendar"></div>
<script>
window.onload = () => {
new datedreamer.calendar({...options})
}
</script>
OR
import * as datedreamer from "datedreamer";
new datedreamer.calendar({...options});
OR
import {calendar} from "datedreamer";
new calendar({...options});
Use this if you want a standalone calendar that comes with an input filled and a Today button.
-
element
: Sets where to insert the calendar to. Can be either a CSS selector string or an HTMLElement object. -
selectedDate
: Sets the starting date for the calendar. Can be set to a date string, Date object, or null. If null, todays date will be selected by default. If a string is passed, theformat
option should also be passed in order for the calendar to know the format of theselectedDate
that you are passing. -
format
: Use this to specify the input AND output format of the date. Please see the available formats from DayJS.
Example:'DD/MM/YYYY'
-
iconNext
: Sets the next arrow icon. You can pass it either text or an svg. -
iconPrev
: Sets the previous arrow icon. You can pass it either text or an svg. -
inputLabel
: Sets the label of the date input element. -
inputPlaceholder
: Sets the placeholder of the date input element. -
hideInputs
: Hides the input and today button from the UI. -
onChange
: Use this to provide a callback function that the calendar will call when the date is changed. The callback function will receive aCustomEvent
argument that will include the chosen date inside the detail property.new datedreamer.calendar({ ..., onChange: (e) => { // Get Date object from event console.log(e.detail); } })
-
onRender
: Use this to provide a callback function that the calendar will call when the calendar is rendered. The callback function will receive aCustomEvent
argument that will include acalendar
property inside of the eventdetail
property.new datedreamer.calendar({ ..., onRender: (e) => { // Calendar has rendered console.log(e.detail.calendar); } })
-
theme
: Sets the style template to use. Options areunstyled
andlite-purple
. -
darkMode
: Enable dark mode styling for the calendar. Works with bothunstyled
andlite-purple
themes.new datedreamer.calendar({ ..., darkMode: true })
-
darkModeAuto
: Automatically detect and follow the user's system preference for dark mode. When enabled, the calendar will automatically switch between light and dark mode based on the user's system settings. This takes precedence over thedarkMode
setting when enabled.new datedreamer.calendar({ ..., darkModeAuto: true })
Note: The calendar will listen for system preference changes and update automatically when the user changes their system's dark mode setting.
-
styles
: Use this property to pass css styles that will be passed into the components style tag.new datedreamer.calendar({ ..., styles: ` button { color: blue } ` })
The toggle calendar has the same options as the Standalone Calendar, however the input is a standalone input element which when clicked, triggers the calendar to show.
new datedreamer.calendarToggle({
...options
});
# Clone the repository
git clone https://github.com/DateDreamer/DateDreamer.git
cd DateDreamer
# Run the setup script (macOS/Linux)
chmod +x scripts/setup-dev.sh
./scripts/setup-dev.sh
# Or manually:
yarn install
npx husky install
yarn format
Command | Description |
---|---|
yarn start |
Start development server |
yarn build |
Build for production |
yarn test |
Run tests |
yarn test:watch |
Run tests in watch mode |
yarn test:coverage |
Run tests with coverage report |
yarn lint |
Run ESLint |
yarn lint:fix |
Fix ESLint errors automatically |
yarn format |
Format code with Prettier |
yarn type-check |
Run TypeScript type checking |
This project uses several tools to maintain code quality:
- ESLint - Code linting and style enforcement
- Prettier - Code formatting
- Husky - Git hooks for pre-commit checks
- Jest - Unit testing framework
- TypeScript - Type checking
# Run all tests
yarn test
# Run tests in watch mode
yarn test:watch
# Run tests with coverage
yarn test:coverage
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature
) - Make your changes
- Run tests and linting (
yarn test && yarn lint
) - Commit your changes (
yarn commit
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
- API Documentation - Complete API reference
- Examples - Usage examples and demos