https://github.com/omarefg/react-date-events

React component to create a calendar and add dates.
https://github.com/omarefg/react-date-events

Last synced: 30 days ago
JSON representation

React component to create a calendar and add dates.

• Host: GitHub
• URL: https://github.com/omarefg/react-date-events
• Owner: omarefg
• License: mit
• Created: 2019-11-09T21:17:03.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T12:42:28.000Z (about 2 years ago)
• Last Synced: 2023-02-27T09:26:05.196Z (almost 2 years ago)
• Language: JavaScript
• Size: 4.56 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-date-events

React component to create a calendar and add reminders to it.

# Example project

First you'll need to download the project.

``git clone [email protected]:omarefg/react-date-events.git``

Installation:

``yarn install``

or

``npm install``

## Run the project

``yarn start``

or

``npm start``

The local server will open on http://localhost:3021

# Install the package

## Installation

``npm install -S @omarefg/react-date-events``

or

``yarn install -S @omarefg/react-date-events``

## Usage

```jsx

    import React from 'react'

    import Calendar from '@omarefg/react-date-events'

    import '@omarefg/react-date-events/lib/main.css'

    const Foo = () => {

        return (

            

        )

    }

```

# Props API

    

        Prop

        Description

        Type

        Required

        Default value

    

    

        actualMonth

        Actual month in the calendar

        int (0 - 11)

        ❌

        Actual month

    

    

        actualYear

        Actual year in the calendar

        int

        ❌

        Actual year

    

    

        weekDays

        Array of strings or objects of the week days

        [string] || [object]

        ❌

        ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

    

    

        hourSelectValues

        Array of objects to fill the reminder hours select

        [object]

        ❌

        [{hour: 0, minutes: 0, seconds: 0, id: 0 }] (From 0 to 23:30)

    

    

        selectedDay

        The selected day in the calendar to show in reminders area

        object

        ❌

        {weekDay: '', month: '', day: '', year: '', date: '', id: '', reminders: []}

    

    

        reminderAreaIsOpen

        Boolean to tell if the reminders area is open

        boolean

        ❌

        False

    

    

        onDayClick

        Callback to be called when the user click on a calendar day

        function

        ❌

        ({weekDay, month, day, year, date, id}) => null

    

    

        months

        Array of strings or objects of the months

        [string] || [object]

        ❌

        ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

    

    

        reminders

        Array of objects to fill the reminders, the reminders object must have the following fields: id, description, hour, date, weather

        [object]

        ❌

        []

    

    

        onAddReminder

        Callback to be called when the user click on the add a reminder button

        function

        ❌

        (date) => null

    

    

        onReminderTitleChange

        Callback to be called when the user change the reminder title

        function

        ❌

        (event, id, field) => null

    

    

        onReminderHourChange

        Callback to be called when the user change the reminder hour

        function

        ❌

        (event, id, field) => null

    

    

        onReminderDelete

        Callback to be called when the user delete the reminder

        function

        ❌

        (id) => null

    

    

        includeCity

        Boolean to include or not the city field in the reminder

        boolean

        ❌

        False

    

    

        includeWeather

        Boolean to include or not the weather field in the reminder

        boolean

        ❌

        False

    

    

        onReminderCityChange

        Callback to be called when the user change the reminder city

        function

        ❌

        (event, id, field) => null

    

    

        onReminderColorChange

        Callback to be called when the user change the reminder city

        function

        ❌

        ({event: {target: value}}, id, field) => null

    

    

        onReminderAreaClose

        Callback to be called when the user change the reminder city

        function

        ❌

        (event) => null

    

    

        onReminderDateChange

        Callback to be called when the user change the reminder date

        function

        ❌

        ({event: {target: value}}, id, field) => null

    

    

        cities

        Array of cities to fill the reminder cities select

        [object]

        ❌

        []