Giter VIP home page Giter VIP logo

morewings / react-calendar-toolkit Goto Github PK

View Code? Open in Web Editor NEW
8.0 1.0 1.0 6.86 MB

React Calendar Toolkit is a set of React Components capable of rendering various calendars, datepickers etc.

Home Page: https://react-calendar-toolkit.netlify.app/

License: MIT License

HTML 0.94% JavaScript 94.16% CSS 4.89% Shell 0.01%
react reactjs calendar datepicker datepicker-component date-fns date-range-picker datetimepicker

react-calendar-toolkit's Introduction

Build Status codecov npm version npm types included types included

React calendar toolkit

Datepicker screenshot

Description

react-calendar-toolkit (RCT) is a set of React Components capable of rendering various calendars, datepickers etc.

Documentation

Demo

Motivation

There are many good datepickers on the market. Unfortunately, most of them are style-opinionated, so if you like logic of chosen datepicker, you are subscribing to the visual style of it. But your website or application style may be completely different. With RCT you don't have hack third-party CSS, you can write your own styled UI components and RCT will render them.

Features

  • Use your custom UI components to change look and feel to match your visual style.
  • Has default theme in Material Design style.
  • Uses date-fns as logic provider.
  • Supports localization for 69 languages, using date-fns locales. You can create custom one.
  • Lightweight: adds just ~10kb to your bundle.
  • Typescript friendly, type definitions included.
  • Disable any date:
    disableDate: ({isWeekend, precision, date}) => Boolean
  • Highlight any date:
    highlightDate: ({isWeekend, precision, date}) => Boolean
  • Highlight weekends:
    highlightWeekends: Boolean

Browsers support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
IE11*, Edge last 2 versions, ESR last 2 versions last 2 versions last 2 versions

/* needs polyfills, see docs

Quickstart

yarn add react-calendar-toolkit date-fns@2

Then use it like this:

import React from 'react';
import Datepicker from 'react-calendar-toolkit'; // datepicker component
import 'react-calendar-toolkit/lib/style/default.css'; // styles

const Component = () => (
  <div>
    <Datepicker onDateSet={date => {console.log('date set', date)}} />
  </div>
);

export default Component;

Development

Available scripts

  • start - starts application in development mode;
  • start:docs - starts Docz;
  • build:docs - builds Docz;
  • build:lib - builds package;
  • lint:js - runs eslint;
  • fix:js - runs eslint with fix option enabled;
  • test - runs tests.
  • lint:style: runs stylelint;
  • fix:style: runs stylelint with fix option enabled.

react-calendar-toolkit's People

Contributors

dependabot-preview[bot] avatar dependabot[bot] avatar morewings avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

skgautam7889

react-calendar-toolkit's Issues

Refactor date-utils

date-utils should be written in fp style (composable). And covered by tests

Invalid Hooks Error

Hi, every time I use <DatePicker /> on my component I get this error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app

I haven't used hooks on my project. Is it from calendar API or I missed something?

Start and end date

Datapicker should support start and end date props (Date type).
Years are rendered inside the provided range. Month and days are disabled if they not fit.

in NextJS 14 I get an error

Hi, I'm getting this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Calendar`.
Import trace for requested module:
./src/components/event/calendar.tsx
 ⚠ ./src/components/event/calendar.tsx
Attempted import error: 'react-calendar-toolkit' does not contain a default export (imported as 'Datepicker').

basically I've a event/page.tsx placed in src/app

import * as React from 'react';
import {FunctionComponent} from "react";
import Calendar from "@/components/event/calendar";

type Props = {

};

const EventPage :  FunctionComponent<Props> = (props: Props) => {
    return (
        <div>
            <Calendar/>
        </div>
    );
};

export default EventPage

and the basic example as Calendar

"use client"

import * as React from 'react';
import {FunctionComponent} from "react";
import Datepicker from 'react-calendar-toolkit';
import 'react-calendar-toolkit/lib/style/default.css'

type Props = {

};

const Calendar :  FunctionComponent<Props> = (props: Props) => {
    return (
        <div>
            <Datepicker onDateSet={date => {console.log('date set', date)}} />
        </div>
    );
};

export default Calendar

do you know what could be the problem here? thanks

UPDATE!

after create my custom d.ts file

declare module 'react-calendar-toolkit' {
    import * as React from 'react';

    type DatePickerMinPrecision = 'year' | 'month' | 'day';

    type InputModes = 'popover' | 'modal';

    type DefaultTheme = Record<string, string>;

    interface DatePickerDateFnsLocale {}

    interface DateMatcherInterface {
        isWeekend: boolean;
        precision: DatePickerMinPrecision;
        date: Date;
    }

    interface DatePickerPropsShared {
        initialDate?: Date;
        today?: Date;
        startDate?: Date;
        endDate?: Date;
        showHeader?: boolean;
        title?: string;
        minPrecision?: DatePickerMinPrecision;
        wrapWith?: React.ReactNode;
        renderDayAs?: React.ReactNode;
        wrapDaysWith?: React.ReactNode;
        renderMonthAs?: React.ReactNode;
        wrapMonthWith?: React.ReactNode;
        renderYearAs?: React.ReactNode;
        wrapYearWith?: React.ReactNode;
        renderWeekDayAs?: React.ReactNode;
        wrapWeekDaysWith?: React.ReactNode;
        renderHeaderAs?: React.ReactNode;
        renderSelectorAs?: React.ReactNode;
        disableDate?: (param: DateMatcherInterface) => boolean;
        highlightDate?: (param: DateMatcherInterface) => boolean;
        highlightWeekends?: boolean;
    }

    interface DatePickerProps extends DatePickerPropsShared {
        onDateSet: (date: Date) => any;
        dateFnsLocale?: DatePickerDateFnsLocale;
        theme?: object;
    }

    interface InputProps {
        onDateSet: (date: Date) => any;
        dateFnsLocale?: DatePickerDateFnsLocale;
        theme?: object;
        mode?: InputModes;
        hideOnSelect?: boolean;
        renderInputAs?: React.ReactNode;
        renderDatePickerAs?: React.ReactNode;
        wrapPopoverWith?: React.ReactNode;
        wrapModalWith?: React.ReactNode;
        formatPattern?: string;
        datePickerProps?: DatePickerPropsShared;
    }


    export class Datepicker extends React.Component<DatePickerProps> {}

    export class DatePickerInput extends React.Component<InputProps> {}

    export function useFormatDate(): (pattern: string, date: Date) => string;

    export function useThemePostCSS(
        defaultTheme?: DefaultTheme
    ): [Object, Function];

    export function useScrollIntoView(
        ref: React.RefObject<HTMLElement>,
        containerSelector: string,
        condition: boolean
    ): void;

    export function useOnClickOutside(
        ref: React.RefObject<HTMLElement>,
        handler: Function
    ): void;

    export function useThemeContext(): object;

    export function setCSSVariable(
        element: HTMLElement,
        variableName: string,
        value: string
    ): void;

    export function getCSSVariable(
        element: HTMLElement,
        variableName: string
    ): string;

    export function removeCSSVariable(
        element: HTMLElement,
        variableName: string
    ): void;

    export const defaultTheme: DefaultTheme;


}

this work as expected, I get a warning

Warning: Datepicker: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

but component is rendered, the ts definition file is wrong and not consistent with the js code.

eslint-plugin-import dependency update

eslint-plugin-import has outdated version in some of dependecies (see below). PR #290 sets manual resolution to versions above ^2.22.1 for yarn in package.json. Needs to be validated later.

├─┬ [email protected]
│ └─┬ [email protected]
│   ├─┬ [email protected]
│   │ └── [email protected]  extraneous
│   └── [email protected]  deduped
├── [email protected] 
└─┬ [email protected]
  └── [email protected] 

Adding events on year and month selection

Hi, it would be very useful to have 2 events that are triggered when the year and month are selected, a bit like the date selection (onDateSet event).

This way you could optimally load data that can then be used in 'highlightDate' or simply be notified when the monthly or annual view changes.

Transform API

Merge wrappers an render components into one bigger component

Disabling logic

Day and Month enttities can be disabled if they:

  • don't match provided range
  • trigger custom disabling function
const isDisabled = (isWeekend, isHolyday, date) => {
// and it's done
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.