@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. 🎉
• Drag & Drop events 💧
• 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. Available languages: "en", "tr", "es", "fr", "de", "it", "pt", "ru".	"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)
customPrevIcon	The 'customPrevIcon' prop accepts an HTML or JSX element that will be rendered instead of the default prev icon. If you pass an invalid value (such as a string), it will automatically create an element and render the value you passed - which is not recommended	n/a	<button>Prev</button> or <FaPrevIcon />
customNextIcon	The 'customNextIcon' prop accepts an HTML or JSX element that will be rendered instead of the default next icon. If you pass an invalid value (such as a string), it will automatically create an element and render the value you passed - which is not recommended	n/a	<button>Next</button> or <MdNextIcon />
eventIsDraggable	The 'eventIsDraggable' prop determines whether the events assigned to the calendar have the drag-and-drop feature	false	true
onEventDragEnd	The 'onEventDragEnd' prop returns two objects that contain the dragged event and the target date information. targetDate, event This allows you to update the date of the event asynchronously or synchronously in the function passed to this prop.	n/a	(targetDate, event) => console.log("target date: " targetDate, "selected Event: " 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

License

MIT License.