{"id":13060,"library":"dayzed","title":"Dayzed: React Headless Date Picker Primitives","description":"dayzed is a React library providing headless primitives for building highly customizable, accessible (WAI-ARIA compliant) date picker components. It focuses on managing date logic and user interactions, exposing control through a custom `useDayzed` hook or a `Dayzed` render prop component, along with \"prop getters\" for flexible rendering. The current stable version is 3.2.3, actively maintained with recent updates for React 18 compatibility. Unlike opinionated date picker libraries, dayzed delegates all UI rendering to the developer, offering maximum flexibility in styling and layout, making it a strong choice for projects requiring bespoke date picker designs and strict accessibility control. Releases are feature-driven, with significant updates historically around React version support and API evolution (e.g., from render props to hooks). This approach significantly differentiates it from solutions that bundle UI, requiring extensive options for customization and often leading to less flexible APIs. The library emphasizes a lean core, providing only the necessary logic for date manipulation and state management, leaving visual implementation entirely to the consumer.","status":"active","version":"3.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/deseretdigital/dayzed","tags":["javascript","typescript"],"install":[{"cmd":"npm install dayzed","lang":"bash","label":"npm"},{"cmd":"yarn add dayzed","lang":"bash","label":"yarn"},{"cmd":"pnpm add dayzed","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for React component and hooks.","package":"react","optional":false},{"reason":"Required peer dependency, primarily for the `Dayzed` render prop component.","package":"prop-types","optional":false}],"imports":[{"note":"This is the primary modern API for function components using React Hooks. CommonJS require is not directly supported for named exports like this without transpilation.","wrong":"const { useDayzed } = require('dayzed')","symbol":"useDayzed","correct":"import { useDayzed } from 'dayzed'"},{"note":"The `Dayzed` render prop component is a default export. Using named import will result in an undefined module.","wrong":"import { Dayzed } from 'dayzed'","symbol":"Dayzed","correct":"import Dayzed from 'dayzed'"},{"note":"For Preact users, the Preact-specific build is located under `dayzed/preact` to ensure compatibility with Preact's rendering internals.","wrong":"import { useDayzed } from 'dayzed'","symbol":"Dayzed (Preact)","correct":"import { useDayzed } from 'dayzed/preact'"},{"note":"Importing types from the main module is done using `import type` in TypeScript to avoid bundling issues.","wrong":"import { CalendarProps } from 'dayzed'","symbol":"CalendarProps","correct":"import type { CalendarProps } from 'dayzed'"}],"quickstart":{"code":"import React from 'react';\nimport { useDayzed } from 'dayzed';\n\nconst monthNamesShort = [\n  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',\n  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'\n];\nconst weekdayNamesShort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n\nfunction MyCalendar() {\n  const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({\n    date: new Date(),\n    maxDate: new Date(2028, 11, 31),\n    minDate: new Date(2020, 0, 1),\n    selected: new Date(),\n    onDateSelected: ({ date, selectable }) => {\n      if (!selectable) return;\n      console.log('Selected date:', date.toLocaleDateString());\n    },\n    monthsToDisplay: 2,\n    showOutsideDays: true,\n  });\n\n  if (!calendars.length) {\n    return <div>Loading calendar...</div>;\n  }\n\n  return (\n    <div style={{ maxWidth: 800, margin: '0 auto', textAlign: 'center', fontFamily: 'sans-serif' }}>\n      <div>\n        <button {...getBackProps({ calendars })}>Back</button>\n        <button {...getForwardProps({ calendars })}>Next</button>\n      </div>\n      <div style={{ display: 'flex', justifyContent: 'center', marginTop: '20px' }}>\n        {calendars.map(calendar => (\n          <div\n            key={`${calendar.month}${calendar.year}`}\n            style={{\n              display: 'inline-block',\n              width: '50%',\n              padding: '0 10px 30px',\n              boxSizing: 'border-box',\n              border: '1px solid #eee',\n              borderRadius: '8px',\n              margin: '0 10px'\n            }}\n          >\n            <h3 style={{ marginBottom: '15px', fontSize: '1.2em' }}>\n              {monthNamesShort[calendar.month]} {calendar.year}\n            </h3>\n            <div\n              style={{\n                display: 'grid',\n                gridTemplateColumns: 'repeat(7, 1fr)',\n                gap: '5px',\n                textAlign: 'center'\n              }}\n            >\n              {weekdayNamesShort.map(weekday => (\n                <div key={weekday} style={{ fontWeight: 'bold', fontSize: '0.9em' }}>\n                  {weekday}\n                </div>\n              ))}\n              {calendar.weeks.map((week, weekIndex) =>\n                week.map((dateObj, dateIndex) => {\n                  const { date, selected, selectable, today } = dateObj;\n                  return (\n                    <button\n                      key={dateIndex}\n                      {...getDateProps({ dateObj })}\n                      style={{\n                        padding: '8px',\n                        border: 'none',\n                        background: selected ? '#007bff' : (today ? '#e0e0e0' : 'transparent'),\n                        color: selected ? 'white' : (selectable ? 'black' : '#ccc'),\n                        borderRadius: '4px',\n                        cursor: selectable ? 'pointer' : 'not-allowed',\n                        fontSize: '1em',\n                        transition: 'background 0.2s ease'\n                      }}\n                    >\n                      {date.getDate()}\n                    </button>\n                  );\n                })\n              )}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// Example usage within a React application:\n// export default MyCalendar;","lang":"typescript","description":"This code demonstrates the basic usage of the `useDayzed` hook to create a multi-month calendar. It shows how to render month navigation buttons and individual date cells, handle date selection, and apply basic styling based on date properties like `selected`, `today`, and `selectable`."},"warnings":[{"fix":"Migrate to the `useDayzed` hook for new implementations. Replace `fillAdjacentMonths` with `showOutsideDays` if previously used. Ensure `react` is at least `16.8.0`.","message":"Version 3.0.0 introduced a new custom `useDayzed` hook and removed the `fillAdjacentMonths` option. It also explicitly requires React version `16.8.0` or higher to utilize React Hooks.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Replace `fillAdjacentMonths` with `showOutsideDays` in your component props. If on `v3.0.0` or later, ensure you are using `showOutsideDays`.","message":"The `fillAdjacentMonths` prop was deprecated in `v2.2.0` in favor of `showOutsideDays` to align with other date picker libraries. It was fully removed in `v3.0.0`.","severity":"deprecated","affected_versions":">=2.2.0 <3.0.0"},{"fix":"For `dayzed` versions between `2.0.1` and `2.x`, ensure `date-fns` is installed as a dependency (`npm install date-fns`). For `v3.0.0` and later, `date-fns` is no longer a required peer dependency.","message":"Version 2.0.1 made `date-fns` a peer-dependency. This was considered a breaking change because projects not already using `date-fns` would unexpectedly break. This dependency was later removed in v3.0.0.","severity":"breaking","affected_versions":">=2.0.1 <3.0.0"},{"fix":"Always use the latest stable version of `dayzed` (currently 3.2.3 or newer) to ensure full compatibility with modern React versions like 17 and 18, and avoid `npm install --force` or `--legacy-peer-deps` workarounds.","message":"Peer dependency updates (e.g., for React 17 and 18) were added in minor/patch releases (v3.2.1, v3.2.3). Older `dayzed` versions might emit peer dependency warnings or exhibit compatibility issues with newer React versions if not updated.","severity":"gotcha","affected_versions":"<3.2.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `useDayzed` is called within a React function component or another custom hook. Confirm your `react` package is at least version `16.8.0`.","cause":"Attempting to use `useDayzed` outside of a React function component, a custom hook, or with an incompatible React version.","error":"Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Add a conditional check for `calendars` being defined and having length before attempting to map over it, e.g., `if (!calendars || calendars.length === 0) return null;`","cause":"This typically occurs when trying to access `calendars.length` before `calendars` is properly initialized by the `useDayzed` hook or the `Dayzed` render prop.","error":"TypeError: Cannot read properties of undefined (reading 'length')"},{"fix":"Ensure you are using `import { useDayzed } from 'dayzed'` for named exports with modern module bundlers. For CommonJS environments, ensure proper transpilation or consider using an older version if available in CommonJS format, or switch to ESM.","cause":"Incorrect import of `useDayzed`, often when using CommonJS `require()` syntax with an ESM-only library or when attempting a default import.","error":"TypeError: (0 , _dayzed.useDayzed) is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}