{"id":13630574,"url":"https://github.com/geeofree/kalendaryo","last_synced_at":"2025-04-17T17:31:26.891Z","repository":{"id":32447363,"uuid":"133327031","full_name":"geeofree/kalendaryo","owner":"geeofree","description":"An unopinionated React date component :atom_symbol: + :date:fns","archived":false,"fork":false,"pushed_at":"2022-12-08T18:54:08.000Z","size":517,"stargazers_count":430,"open_issues_count":20,"forks_count":29,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-14T02:03:20.717Z","etag":null,"topics":["react-date","react-date-component","react-kalendaryo"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geeofree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-14T08:10:24.000Z","updated_at":"2025-03-07T02:37:38.000Z","dependencies_parsed_at":"2023-01-14T21:15:31.953Z","dependency_job_id":null,"html_url":"https://github.com/geeofree/kalendaryo","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geeofree%2Fkalendaryo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geeofree%2Fkalendaryo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geeofree%2Fkalendaryo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geeofree%2Fkalendaryo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geeofree","download_url":"https://codeload.github.com/geeofree/kalendaryo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249358827,"owners_count":21256921,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-date","react-date-component","react-kalendaryo"],"created_at":"2024-08-01T22:01:47.708Z","updated_at":"2025-04-17T17:31:26.454Z","avatar_url":"https://github.com/geeofree.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Kalendaryo\n[![Coverage Status][coveralls-badge]][coveralls]\n[![Build Status][travis-badge]][travis]\n[![npm][npm-badge]][npm]\n[![npm][npm-dl-badge]][npm]\n![license][mit]\n\nBuild flexible react date components using primitives :atom_symbol: + :date:fns\n\n## Problem\nYou want a date component that's: \u003cbr /\u003e\n  :heavy_check_mark: Laid out the way you want \u003cbr /\u003e\n  :heavy_check_mark: Functions the way you want \u003cbr /\u003e\n  :heavy_check_mark: Flexible for your use case \u003cbr /\u003e\n\n## This solution\n**Kalendaryo** is an unopinionated React component for building calendars. It has no opinions about what your calendar component should look or function like but rather only helps you deal with those unique constraints by providing various variables your calendar component needs such as the calendar's state data and methods for getting(*i.e. all the days in a month*) and setting(*i.e. selecting the date from a day*) plus many more!\n\u003cbr /\u003e \u003cbr /\u003e\nSee the [Basic Usage](#basic-usage) section to see how you can build a basic calendar component with **Kalendaryo**, or see the [Examples](#examples) section to see more examples built with Kalendaryo.\n\n\u003chr /\u003e\n\n## Table of Contents\n* [Installation](#installation)\n* [Basic Usage](#basic-usage)\n* [API](#api)\n  * [State](#state)\n    * [#date](#date)\n    * [#selectedDate](#selecteddate)\n  * [Props](#props)\n    * [#startCurrentDateAt](#startcurrentdateat)\n    * [#startSelectedDateAt](#startselecteddateat)\n    * [#defaultFormat](#defaultformat)\n    * [#startWeekAt](#startweekat)\n    * [#onChange](#onchange)\n    * [#onDateChange](#ondatechange)\n    * [#onSelectedChange](#onselectedchange)\n    * [#render](#render)\n    * [Passing variables to the render prop](#passing-variables-to-the-render-prop)\n  * [Methods](#methods)\n    * [#getFormattedDate](#getformatteddate)\n    * [#getDateNextMonth](#getdatenextmonth)\n    * [#getDatePrevMonth](#getdateprevmonth)\n    * [#getDaysInMonth](#getdaysinmonth)\n    * [#getWeeksInMonth](#getweeksinmonth)\n    * [#getDayLabelsInWeek](#getdaylabelsinweek)\n    * [#setDate](#setdate)\n    * [#setSelectedDate](#setselecteddate)\n    * [#pickDate](#pickdate)\n    * [#setDateNextMonth](#setdatenextmonth)\n    * [#setDatePrevMonth](#setdateprevmonth)\n* [Examples](#examples)\n* [Inspiration](#inspiration)\n\n## Installation\n*This package expects you to have `\u003e= react@0.14.x`*\n\n```js\nnpm i -d kalendaryo // \u003c-- for npm peeps\nyarn add kalendaryo // \u003c-- for yarn peeps\n```\n\n## Basic Usage\n```jsx\n// Step 1: Import the component\nimport Kalendaryo from 'kalendaryo'\n\n// Step 2: Invoke and pass your desired calendar as a function in the render prop\nconst BasicCalendar = () =\u003e \u003cKalendaryo render={MyCalendar} /\u003e\n\n// Step 3: Build your calendar!\nfunction MyCalendar(kalendaryo) {\n  const {\n    getFormattedDate,\n    getWeeksInMonth,\n    getDayLabelsInWeek,\n    setDatePrevMonth,\n    setDateNextMonth,\n    setSelectedDate\n  } = kalendaryo\n\n  const currentDate = getFormattedDate(\"MMMM YYYY\")\n  const weeksInCurrentMonth = getWeeksInMonth()\n  const dayLabels = getDayLabelsInWeek()\n  const selectDay = date =\u003e () =\u003e setSelectedDate(date)\n\n  /* For this basic example we're going to build a calendar that has:\n   *  1. A header where you have:\n   *      1.1 Controls for moving to the previous/next month of the current date\n   *      1.2 A label for current month \u0026 year of the current date\n   *  2. A body where you have:\n   *      2.1 A row for the label of the days of a week\n   *      2.2 Rows containing the days of each week in the current date's month where you can:\n   *          2.2.1 Select a date by clicking on a day\n   */\n  return (\n    \u003cdiv className=\"my-calendar\"\u003e\n      // (1)\n      \u003cdiv className=\"my-calendar-header\"\u003e\n        // (1.1)\n        \u003cbutton onClick={setDatePrevMonth}\u003e\u0026larr;\u003c/button\u003e\n\n        // (1.2)\n        \u003cspan className=\"text-white\"\u003e{currentDate}\u003c/span\u003e\n\n        // (1.1)\n        \u003cbutton onClick={setDateNextMonth}\u003e\u0026rarr;\u003c/button\u003e\n      \u003c/div\u003e\n\n      // (2)\n      \u003cdiv className=\"my-calendar-body\"\u003e\n        // (2.1)\n        \u003cdiv className=\"week day-labels\"\u003e\n          {dayLabels.map(label =\u003e (\n            \u003cdiv key={label} className=\"day\"\u003e{label}\u003c/div\u003e\n          ))}\n        \u003c/div\u003e\n\n        // (2.2)\n        {weeksInCurrentMonth.map((week, i) =\u003e (\n          \u003cdiv className=\"week\" key={i}\u003e\n            {week.map(day =\u003e (\n              \u003cdiv\n                key={day.label}\n                // (2.2.1)\n                onClick={selectDay(day.dateValue)}\n              \u003e\n                {day.label}\n              \u003c/div\u003e\n            ))}\n          \u003c/div\u003e\n        ))}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nSee this basic usage snippet in action [here](https://codesandbox.io/s/vjkq15zj0y)!\n\n## API\nThis section contains descriptions of the various things the `\u003cKalendaryo /\u003e` component has to offer which are split into three parts:\n\n  * `state`: Description of the component's state that could change\n  * `props`: Description of the component's props that you can change or hook into\n  * `methods`: Description of the component's various helper methods you can use from the [render](#render) prop\n\n### State\n#### #date\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e Date\n\u003cb\u003edefault:\u003c/b\u003e new Date()\n\u003c/pre\u003e\n\nIs the state for the *current date* the component is in. By convention, this should only change when the calendar changes its current date, *i.e.* moving to and from a month or year on the calendar.\n\u003cbr /\u003e\u003cbr /\u003e\n\n#### #selectedDate\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e Date\n\u003cb\u003edefault:\u003c/b\u003e new Date()\n\u003c/pre\u003e\n\nIs the state for the *selected date* on the component. By convention, this should only change when the calendar receives a date selection input from the user, *i.e.* selecting a day on the calendar.\n\u003cbr/\u003e\u003c/br\u003e\n\n### Props\n#### #startCurrentDateAt\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e Date\n\u003cb\u003erequired:\u003c/b\u003e false\n\u003cb\u003edefault:\u003c/b\u003e new Date()\n\u003c/pre\u003e\n\nModifies the initial value of [`#date`](#date). Great for when you want your calendar to boot up in some date other than today.\n\n**Note:** Passing non-`Date` types to this prop sets the [`#date`](#date) state to today.\n\n```jsx\nconst birthday = new Date(1995, 4, 27)\n\n\u003cKalendaryo startCurrentDateAt={birthday} /\u003e\n```\n\u003cbr/\u003e\n\n#### #startSelectedDateAt\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e Date\n\u003cb\u003erequired:\u003c/b\u003e false\n\u003cb\u003edefault:\u003c/b\u003e new Date()\n\u003c/pre\u003e\n\nModifies the initial value of [`#selectedDate`](#selecteddate). Great for when you want your calendar's selected date to boot up in another date than today.\n\n**Note:** Passing non-`Date` types to this prop sets the [`#selectedDate`](#selecteddate) state to today.\n\n```jsx\nconst birthday = new Date(1988, 4, 27)\n\n\u003cKalendaryo startSelectedDateAt={birthday} /\u003e\n```\n\u003cbr/\u003e\n\n#### #defaultFormat\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e String\n\u003cb\u003erequired:\u003c/b\u003e false\n\u003cb\u003edefault:\u003c/b\u003e 'MM/DD/YY'\n\u003c/pre\u003e\n\nModifies the default format value on the [`#getFormattedDate`](#getformatteddate) method. Accepts any format that [date-fns' `format` function](https://date-fns.org/docs/format) can support.\n\n```jsx\nconst myFormat = 'yyyy-mm-dd'\n\n\u003cKalendaryo defaultFormat={myFormat} /\u003e\n```\n\u003cbr/\u003e\n\n#### #startWeekAt\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e Number[0..6]\n\u003cb\u003erequired:\u003c/b\u003e false\n\u003cb\u003edefault:\u003c/b\u003e 0\n\u003c/pre\u003e\n\nModifies the starting day index of the weeks returned from [`#getWeeksInMonth`](#getweeksinmonth) \u0026 [`#getDayLabelsInWeek`](#getdaylabelsinweek). Defaults to `0 (sunday)`\n\n```jsx\nconst monday = 1\n\n\u003cKalendaryo startWeekAt={monday} /\u003e\n```\n\u003cbr/\u003e\n\n#### #onChange\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(state: Object): void\n\u003cb\u003erequired:\u003c/b\u003e false\n\u003c/pre\u003e\n\nCallback prop for listening to state changes on the [`#date`](#date) \u0026 [`#selectedDate`](#selecteddate) states.\n\n```jsx\nconst logState = (state) =\u003e console.log(state)\n\n\u003cKalendaryo onChange={logState}/\u003e\n```\n\u003cbr /\u003e\n\n#### #onDateChange\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(date: Date): void\n\u003cb\u003erequired:\u003c/b\u003e false\n\u003c/pre\u003e\n\nCallback prop for listening to state changes only to the [`#date`](#date) state.\n\n```jsx\nconst logDateState = (date) =\u003e console.log(date)\n\n\u003cKalendaryo onDateChange={logDateState} /\u003e\n```\n\u003cbr /\u003e\n\n#### #onSelectedChange\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(date: Date): void\n\u003cb\u003erequired:\u003c/b\u003e false\n\u003c/pre\u003e\n\nCallback prop for listening to state changes only to the [`#selectedDate`](#selecteddate) state.\n\n```jsx\nconst logSelectedDateState = (selectedDate) =\u003e console.log(selectedDate)\n\n\u003cKalendaryo onSelectedChange={logSelectedDateState} /\u003e\n```\n\u003cbr /\u003e\n\n#### #render\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(props: Object): void\n\u003cb\u003erequired:\u003c/b\u003e true\n\u003c/pre\u003e\n\nCallback prop responsible for rendering the date component. This function receives an object which has the [`state`](#state), [`methods`](#methods), as well as props you pass that are invalid(see [passing variables to the render prop](#passing-variables-to-the-render-prop) for more information).\n\n```jsx\nconst MyCalendar = (kalendaryo) =\u003e {\n  console.log(kalendaryo)\n  return \u003cp\u003eSome layout\u003c/p\u003e\n}\n\n\u003cKalendaryo render={MyCalendar} /\u003e\n```\n\u003cbr /\u003e\n\n#### Passing variables to the render prop\nSometimes you may need to have states other than the [`#date`](#date) and [`#selectedDate`](#selectedDate) state, *i.e* for a date range calendar component, you may need to have a state for its `startDate` and `endDate` and may need to create the calendar component as a method inside the date range calendar's class like so:\n\n```jsx\nclass DateRangeCalendar extends React.Component {\n  state = {\n    startDate: null,\n    endDate: null\n  }\n\n  Calendar = (props) =\u003e {\n    const { startDate, endDate } = this.state\n    return // Your calendar layout\n  }\n\n  setDateRange = (selectedDate) =\u003e {\n    // Logic for updating the start and end date states\n  }\n\n  render() {\n    return \u003cKalendaryo onSelectedChange={this.setDateRange} render={this.Calendar} /\u003e\n  }\n}\n```\n\nThis however, leaves the `Calendar` component tightly coupled to the `DateRangeCalendar` component and makes it a little bit harder for us to keep track of what's going on with what.\n\n*If only we could separate the `DateRangeCalendar`'s state logic and `Calendar`'s UI rendering*\n\nTo solve this, the `Kalendaryo` component can receive **unknown props**. These are props that gets passed to the `render` prop callback when it does not convey any meaning to the `Kalendaryo` component.\n\nWith **unknown props** we can pass any arbitrary variable to `Kalendaryo` as long as it does not know what to do with it *i.e.* the `startDate` and `endDate` states. We would then have no need to put the `Calendar` function inside of the `DateRangeCalendar` class since the states are now an injected dependency to the `Calendar` *e.g*\n\n```jsx\nclass DateRangeCalendar extends React.Component {\n  state = {\n    startDate: null,\n    endDate: null\n  }\n\n  setDateRange = (selectedDate) =\u003e {\n    // Logic for updating the start and end date states\n  }\n\n  render() {\n    return (\n      \u003cKalendaryo\n        startDate={this.state.startDate}\n        endDate={this.state.endDate}\n        onSelectedChange={this.setDateRange}\n        render={Calendar}\n      /\u003e\n    )\n  }\n}\n\nfunction Calendar(props) {\n  const { startDate, endDate } = props\n  return // Your calendar component\n}\n```\n\nWith this, the `Calendar` and `DateRangeCalendar` are now separated to the things they're solely responsible for.\n\u003cbr /\u003e\u003cbr /\u003e\n\n### Methods\n#### #getFormattedDate\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(date?: Date | format?: String, format?: String): String\n\u003cb\u003ethrows:\u003c/b\u003e Error exception when the types of the given argument are invalid\n\u003c/pre\u003e\n\nReturns the date formatted by the given format string. You can invoke this in four ways:\n  * `getFormattedDate()` - Returns the [`#date`](#date) state formatted as the value set on the [`#defaultFormat`](#defaultformat) prop\n\n  * `getFormattedDate(date)` - Returns the given *date argument* formatted as the value set on the [`#defaultFormat`](#defaultformat) prop\n\n  * `getFormattedDate(format)` - Returns the [`#date`](#date) state formatted to the given *format string argument*\n\n  * `getFormattedDate(date, format)` - Returns the given *date argument* formatted to the given *format string argument*\n\n```jsx\nfunction MyCalendar(kalendaryo) {\n  const birthday = new Date(1988, 4, 27)\n  const myFormattedDate = kalendaryo.getFormattedDate(birthday, 'yyyy-mm-dd')\n\n  return \u003cp\u003eMy birthday is at {myFormattedDate}\u003c/p\u003e\n}\n\n\u003cKalendaryo render={MyCalendar} /\u003e\n```\n\u003cbr /\u003e\n\n#### #getDateNextMonth\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(date?: Date | amount?: Number, amount?: Number): Date\n\u003cb\u003ethrows:\u003c/b\u003e Error exception when the types of the given argument are invalid\n\u003c/pre\u003e\n\nReturns a date with months added from the given amount. You can invoke this in four ways:\n  * `getDateNextMonth()` - Returns the [`#date`](#date) state with *1 month* added to it\n\n  * `getDateNextMonth(date)` - Returns the given *date argument* with *1 month* added to it\n\n  * `getDateNextMonth(amount)` - Returns the [`#date`](#date) state with the months added to it from the given *amount argument*\n\n  * `getDateNextMonth(date, amount)` - Returns the given *date argument* with the months added to it from the given *amount argument*\n\n```jsx\nfunction MyCalendar(kalendaryo) {\n  const nextMonth = kalendaryo.getDateNextMonth()\n  const nextMonthFormatted = kalendaryo.getFormattedDate(nextMonth, 'MMMM')\n\n  return \u003cp\u003eThe next month from today is: {nextMonthFormatted}\u003c/p\u003e\n}\n\n\u003cKalendaryo render={MyCalendar} /\u003e\n```\n\u003cbr /\u003e\n\n#### #getDatePrevMonth\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(date?: Date | amount?: Number, amount?: Number): Date\n\u003cb\u003ethrows:\u003c/b\u003e Error exception when the types of the given argument are invalid\n\u003c/pre\u003e\n\nReturns a date with months subtracted from the given amount. You can invoke this in four ways:\n  * `getDatePrevMonth()` - Returns the [`#date`](#date) state with *1 month* subtracted to it\n\n  * `getDatePrevMonth(date)` - Returns the given *date argument* with *1 month* subtracted to it\n\n  * `getDatePrevMonth(amount)` - Returns the [`#date`](#date) state with the months subtracted to it from the given *amount argument*\n\n  * `getDatePrevMonth(date, amount)` - Returns the given *date argument* with the months subtracted to it from the given *amount argument*\n\n```jsx\nfunction MyCalendar(kalendaryo) {\n  const prevMonth = kalendaryo.getDatePrevMonth()\n  const prevMonthFormatted = kalendaryo.getFormattedDate(prevMonth, 'MMMM')\n\n  return \u003cp\u003eThe previous month from today is: {prevMonthFormatted}\u003c/p\u003e\n}\n\n\u003cKalendaryo render={MyCalendar} /\u003e\n```\n\u003cbr /\u003e\n\n#### #getDaysInMonth\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(date?: Date): DayObject[]\n\u003cb\u003ethrows:\u003c/b\u003e Error exception when the types of the given argument are invalid\n\u003c/pre\u003e\n\nReturns an array of [Day Objects](#dayobject) for the month of a given date\n\n  * `getDaysInMonth()` - Returns all the days in the month of the [`#date`](#date) state\n\n  * `getDaysInMonth(date)` - Returns all the days in the month of the given *date argument*\n\n```jsx\nfunction MyCalendar(kalendaryo) {\n  const nextMonth = kalendaryo.getDateNextMonth()\n  const daysNextMonth = kalendaryo.getDaysInMonth(nextMonth)\n\n  return (\n    \u003cdiv\u003e\n      {daysNextMonth.map((day) =\u003e (\n        \u003cp\n          key={day.label}\n          onClick={() =\u003e console.log(day.dateValue)}\n        \u003e\n          {day.label}\n        \u003c/p\u003e\n      ))}\n    \u003c/div\u003e\n  )\n}\n\n\u003cKalendaryo render={MyCalendar} /\u003e\n```\n\u003cbr /\u003e\n\n#### #getWeeksInMonth\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(date?: Date, startingDayIndex?: Number): Week[DayObject[]]\n\u003cb\u003ethrows:\u003c/b\u003e Error exception when the types of the given argument are invalid\n\u003c/pre\u003e\n\nReturns an array of weeks, each containing their respective days for the month of the given date\n\n  * `getWeeksInMonth()` - Returns an array of weeks for the month of the [`#date`](#date) state, with the weeks starting at the value specified from the [`#startWeekAt`](#startweekat) prop\n\n  * `getWeeksInMonth(date)` - Returns an array of weeks for the month of the given *date argument*, with the weeks starting at the value specified from the [`#startWeekAt`](#startweekat) prop\n\n  * `getWeeksInMonth(date, startingDayIndex)` - Returns an array of weeks for the month of the given *date argument*, with the weeks starting at the value specified from the given *startingDayIndex argument*\n\n```jsx\nfunction MyCalendar(kalendaryo) {\n  const prevMonth = kalendaryo.getDatePrevMonth()\n  const weeksPrevMonth = kalendaryo.getWeeksInMonth(prevMonth, 1)\n\n  return (\n    \u003cdiv\u003e\n      {weeksPrevMonth.map((week, i) =\u003e (\n        \u003cdiv class=\"week\" key={i}\u003e\n          {week.map((day) =\u003e (\n            \u003cp\n              key={day.label}\n              onClick={() =\u003e console.log(day.dateValue)}\n            \u003e\n              {day.label}\n            \u003c/p\u003e\n          ))}\n        \u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  )\n}\n\n\u003cKalendaryo render={MyCalendar} /\u003e\n```\n\u003cbr /\u003e\n\n#### #getDayLabelsInWeek\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(dayLabelFormat?: String): String[]\n\u003c/pre\u003e\n\nReturns an array of strings for each day on a week\n\n  * `getDayLabelsInWeek()` - Returns an array of each day on a week formatted as `'ddd'` and starts on\n  the week index based on the value set on the [`#startWeekAt`](#startweekat) prop\n\n  * `getDayLabelsInWeek(dayLabelFormat)` - Returns an array of each day on a week formatted as the given\n  *dayLabelFormat argument* and starts on the week index based on the value set on the [`#startWeekAt`](#startweekat) prop\n\u003cbr /\u003e\n\n#### #setDate\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(date: Date): void\n\u003cb\u003ethrows:\u003c/b\u003e Error exception when the types of the given argument are invalid\n\u003c/pre\u003e\n\nUpdates the [`#date`](#date) state to the given date\n\n```jsx\nfunction MyCalendar(kalendaryo) {\n  const birthday = new Date(1988, 4, 27)\n  const currentDate = kalendaryo.getFormattedDate()\n  const setDateToBday = () =\u003e kalendaryo.setDate(birthday)\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eThe date is: {currentDate}\u003c/p\u003e\n      \u003cbutton onClick={setDateToBday}\u003eSet date to my birthday\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\n\u003cKalendaryo render={MyCalendar} /\u003e\n```\n\u003cbr /\u003e\n\n#### #setSelectedDate\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(selectedDate: Date): void\n\u003cb\u003ethrows:\u003c/b\u003e Error exception when the types of the given argument are invalid\n\u003c/pre\u003e\n\nUpdates the [`#selectedDate`](#selecteddate) state to the given selected date\n\n```jsx\nfunction MyCalendar(kalendaryo) {\n  const birthday = new Date(1988, 4, 27)\n  const currentDate = kalendaryo.getFormattedDate()\n  const selectedDate = kalendaryo.getFormattedDate(kalendaryo.selectedDate)\n  const selectBdayDate = () =\u003e kalendaryo.setSelectedDate(birthday)\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eThe date is: {currentDate}\u003c/p\u003e\n      \u003cp\u003eThe selected date is: {selectedDate}\u003c/p\u003e\n      \u003cbutton onClick={selectBdayDate}\u003eSet selected date to my birthday!\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\n\u003cKalendaryo render={MyCalendar} /\u003e\n```\n\u003cbr /\u003e\n\n#### #pickDate\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(date: Date): void\n\u003cb\u003ethrows:\u003c/b\u003e Error exception when the types of the given argument are invalid\n\u003c/pre\u003e\n\nUpdates both the [`#date`](#date) \u0026 [`#selectedDate`](#selecteddate) state to the given date\n\n```jsx\nfunction MyCalendar(kalendaryo) {\n  const birthday = new Date(1988, 4, 27)\n  const currentDate = kalendaryo.getFormattedDate()\n  const selectedDate = kalendaryo.getFormattedDate(kalendaryo.selectedDate)\n  const selectBday = () =\u003e kalendaryo.pickDate(birthday)\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eThe date is: {currentDate}\u003c/p\u003e\n      \u003cp\u003eThe selected date is: {selectedDate}\u003c/p\u003e\n      \u003cbutton onClick={selectBday}\u003eSet date and selected date to my birthday!\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\n\u003cKalendaryo render={MyCalendar} /\u003e\n```\n\u003cbr /\u003e\n\n#### #setDateNextMonth\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(): void\n\u003c/pre\u003e\n\nUpdates the [`#date`](#date) state by adding 1 month\n\n```jsx\nfunction MyCalendar(kalendaryo) {\n  const formattedDate = kalendaryo.getFormattedDate()\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eThe date today is {formattedDate}\u003c/p\u003e\n      \u003cbutton onClick={kalendaryo.setDateNextMonth}\u003eClick to set date to the next month\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\u003cbr /\u003e\n\n#### #setDatePrevMonth\n\u003cpre\u003e\n\u003cb\u003etype:\u003c/b\u003e func(): void\n\u003c/pre\u003e\n\nUpdates the [`#date`](#date) state by subtracting 1 month\n\n```jsx\nfunction MyCalendar(kalendaryo) {\n  const formattedDate = kalendaryo.getFormattedDate()\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eThe date today is {formattedDate}\u003c/p\u003e\n      \u003cbutton onClick={kalendaryo.setDatePrevMonth}\u003eClick to set date to the previous month\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## Examples\n* [Basic Calendar](https://codesandbox.io/s/vjkq15zj0y)\n* [Date Range Calendar](https://codesandbox.io/s/7yk8x627j6)\n* [Date Picker Input (Downshift x Kalendaryo)](https://codesandbox.io/s/j47zv28xkw)\n* [Moon Phase Calendar](https://codesandbox.io/s/v8wmqjn943)\n\n## Inspiration\nThis project is heavily inspired from [Downshift](https://github.com/paypal/downshift) by [Kent C. Dodds](https://twitter.com/kentcdodds), a component library that uses render props to expose certain APIs for you to build flexible and accessible autocomplete, dropdown, combobox, etc. components.\n\u003cbr /\u003e \u003cbr /\u003e\nWithout it, I would not have been able to create this very first OSS project of mine, so thanks Mr. Dodds and Contributors for it! :heart:\n\n\n[coveralls-badge]: https://coveralls.io/repos/github/geeofree/kalendaryo/badge.svg\n[coveralls]: https://coveralls.io/github/geeofree/kalendaryo\n\n[travis-badge]: https://travis-ci.org/geeofree/kalendaryo.svg?branch=master\n[travis]: https://travis-ci.org/geeofree/kalendaryo\n\n[npm-badge]: https://img.shields.io/npm/v/kalendaryo.svg\n[npm-dl-badge]: https://img.shields.io/npm/dt/kalendaryo.svg\n[npm]: https://www.npmjs.com/package/kalendaryo\n\n[mit]: https://img.shields.io/github/license/mashape/apistatus.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeeofree%2Fkalendaryo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeeofree%2Fkalendaryo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeeofree%2Fkalendaryo/lists"}