@mayurphumatiya/calendar-ts
TypeScript icon, indicating that this package has built-in type declarations

1.0.17 • Public • Published

@mayurphumatiya/calendar-ts

image

Calendar-ts is a visually stunning calendar solution that allows developers to effortlessly integrate eye-catching calendars into their projects. With customizable styles options, developers can tailor the look and feel to suit their needs perfectly. Seamlessly manage dates and perform operations with ease, making it the perfect tool for any project requiring a stylish and functional calendar interface.

tl;dr

Install @mayurphumatiya/calendar-ts with npm

  • Install by executing npm install react-calendar or yarn add react-calendar.
  • Import by adding import Calendar from 'react-calendar'.
  • Use by adding <Calendar />. Use getCurrDate prop for getting new values.

DEMO

Online demo is also available!

Getting started

Compatibility

Your project needs to use React 16.8 or later.

@mayurphumatiya/calendar-ts uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of supporting only modern browsers.

Legacy browsers

If you need to support legacy browsers like Internet Explorer 10, you will need to use Intl.js or another Intl polyfill along with @mayurphumatiya/calendar-ts.

My locale isn't supported! What can I do? If your locale isn't supported, you can use Intl.js or another Intl polyfill along with @mayurphumatiya/calendar-ts.

Installation

Add @mayurphumatiya/calendar-ts to your project by executing npm install @mayurphumatiya/calendar-ts or yarn add @mayurphumatiya/calendar-ts.

Usage

Here's an example of basic usage:

import { useState } from "react";
import Calendar from "react-calendar";

function MyApp() {
  const getdate = (selectedDate: Date) => {
    console.log("SELECTED DATE", selectedDate);
  };

  return (
    <>
      <Calendar getCurrDate={getdate} />
    </>
  );
}

Check the sample directory in this repository for a full working example.

User guide

Calendar
Displays a complete, interactive calendar.

Prop name Description Default value
getCurrDate A callback function that receives the selected date when a date is clicked on the calendar.
bgColor Specifies the background color of the calendar component black
text Specifies the text color of the calendar component white
borderWidth Specifies the border width of the calendar component 1px
dateHeight Specifies the height of the date in calendar component 5rem
currDateBg Specifies the color of the current date and days in calendar component pink

License

THE ISC License.

Author

MAYUR PHUMATIYA

Contributors

🚀 We welcome contributors of all skill levels to join us in building something amazing together! Whether you're a seasoned developer or just starting out, there's a place for you in our community. Join us in shaping the future of our project and making a positive impact on the lives of users around the world. Together, let's create something truly special!

Thank You

Package Sidebar

Install

npm i @mayurphumatiya/calendar-ts

Weekly Downloads

3

Version

1.0.17

License

ISC

Unpacked Size

28.1 kB

Total Files

10

Last publish

Collaborators

  • mayurphumatiya