React-diary NPM

React Diary

Simplifying scheduling and diary maintainance in React. It exports two components: an event-integrated month-view calendar and a compact date-picker.

Check out the live example.

Installation

Install via npm: npm install react-diary

Alternatively, install via yarn: yarn add react-diary

Ensure you have a recent version of react and react-dom installed in your project.

Usage Example

'use client' // Required if using NextJS 14 or higher
import { useState } from "react";
import { MonthCalendar, DatePicker } from "react-diary";

export default function Calendar() {
  const [selectedDate, setSelectedDate] = useState<Date>(new Date("1986-10-12T03:24:00"));

  return (
    <div>
      <MonthCalendar
        selectedDate={selectedDate}
        setSelectedDate={(date: Date) => setSelectedDate(date)} 
        events={[
          {
            startTime: new Date("1986-10-13T03:24:00"),
            title: "CLM is born",
            id: "event-1"
          }
        ]} /> 

        <DatePicker 
          selectedDate={selectedDate}
          setSelectedDate={(date: Date) => setSelectedDate(date)} 
          events={[
            {
              startTime: new Date("1986-10-13T03:24:00"),
              title: "CLM is born",
              id: "event-1"
            }
          ]} />
      </div>
  );
}

Props

<MonthCalendar /> and <DatePicker /> Props: |Prop |Type |Description | |--------------------------|-------------------------------------------------|-------------------------------------------------| |selectedDate (Required) |Date |The currently selected date in the calendar. | |setSelectedDate (Required)|(date: Date) => void |Callback function to update the selected date. | |events (Required) |{ startTime: Date; title: string; id: string; }[]|An array of event objects to display in the calendar. Each event requires a start time, title, and unique ID. If there are no events, pass an empty array. |