Package Exports

@emreygc7/react-basic-calendar
@emreygc7/react-basic-calendar/dist/cjs/index.ts
@emreygc7/react-basic-calendar/dist/esm/index.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@emreygc7/react-basic-calendar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@emreygc7/react-basic-calendar

Simple and user-friendly calendar package for your React application.

Features

Capture the days, months, and years. 📆
Assign events to the days. 🎉
Dynamic styling. ✨
Language support. 🌐
No need for moment.js or day.js. ✖️

Installation

npm install @emreygc7/react-basic-calendar

Usage

First, include the package in your project. Then, call it within the component you want to use.

import React from React; 
import Calendar from '@emreygc7/react-basic-calendar'

function Home(){
    return(
        <Calendar
             startingDate={new Date()}
         onDateClick={(date) => console.log(date)}
        /> 
    )
}

startingDate

The value you pass to this prop will set the starting date of the calendar. For example: new Date(2020, 10, 12) //default new Date()

onDateClick

This prop captures the date you click on and returns a "date" object. You can find the information about the clicked date in the content of this object and use it as needed.

User Guide

Props

Prop name	Description	Default Value	Example usage
language	Changes the language of the calendar. Currently, only "en" and "tr" are available. New languages will be added soon.	"en"	language={'tr'}
startingDate	The value you pass to this prop will set the starting date of the calendar.	new Date()	new Date(2020,10,12)
onDateClick	This prop captures the date you click on and returns a "date" object. You can find the information about the clicked date in the content of this object and use it as needed.	n/a	(date) => console.log(date)
events	The events prop accepts an array as its content. The objects in the array have three keys: "date, title, id". If the objects in the array you pass to this prop do not have these keys, you need to customize them when passing.	n/a	[{date: '2023-05,20', title: 'Event 1', id: '1'}]
onEventClick	This prop captures the event you click on and returns an "event" object. You can find the information about the clicked event in the content of this object and use it as needed.	n/a	(event) => console.log(event)

Custom Style

You can completely change the appearance of the calendar using the props provided below. However, please note that each prop you use will completely override the default style files set for the calendar, rather than adding to them. Therefore, you are free to create your own style!

Prop name
mainWrapperClassNames
headWrapperClassNames
daysWrapperClassNames
daysClassNames
calendarBodyClassNames
bodyDaysClassNames
eventClassNames

What's next ?

More language support
Built-in dark mode support
Drag & drop events

License

MIT License.