datepicker-sekler09

datepicker is a library that provides built components for working with different calendars

It has two components: DayPicker and RangePicker (Live version to try)

Installation

npm install datepicker-sekler09

DayPicker

Props:

  minDate: Date; //minimal possible date
  maxDate: Date; //maximum possible date
  showHolidays: boolean; //highlight holidays
  showWeekends: boolean; //highlight weekends
  holidayColor: string; //holidays highlighting color

Example:

  import { DayPicker } from "datepicker-sekler09";

  function App() {
    return (
      <DayPicker
        minDate={new Date(2023, 0, 1)}
        maxDate={new Date(2024, 0, 1)}
        showHolidays
        showWeekends
        holidayColor="red"
      />
    )
  }

Functions:

• Ability to look through calendar;
• Ability to show holidays and weekdays
• Ability to set start of the week (Monday or Sunday) by clicking on weekdays names
• Ability to set calendar appearance: month or week (click on month name in the header of calendar)
• Ability to jump to a certain date using input
• Ability to add todos on certain date

RangePicker

Props:

  minDate: Date; //minimal possible date
  maxDate: Date; //maximum possible date
  showHolidays: boolean; //highlight holidays
  showWeekends: boolean; //highlight weekends
  holidayColor: string; //holidays highlighting color
  defaultStart: Date; //date that will be the start of range
  defaultEnd: Date; //date that will be the end of range

Example:

  import { DayPicker } from "datepicker-sekler09";

  function App() {
    return (
      <RangePicker
        minDate={new Date(2023, 0, 1)}
        maxDate={new Date(2024, 0, 1)}
        showHolidays
        showWeekends
        holidayColor="red"
        defaultStart={new Date(2023, 2, 4)}
        defaultEnd={new Date(2023, 2, 7)}
      />
    )
  }

Functions:

• Ability to look through calendar;
• Ability to show holidays and weekdays
• Ability to set start of the week (Monday or Sunday) by clicking on weekdays names
• Ability to set calendar appearance: month or week (click on month name in the header of calendar)
• Ability to jump to a certain date using input
• Ability to set start and end of the range and highlight the days between