rbc
@mathiaslima/react-big-calendar
npm i @mathiaslima/react-big-calendar
rbc

@mathiaslima/react-big-calendar

A simple react component that accepts a list of password requirements and updates each as they are fulfilled

by Mathias Morais Lima

1.1.5 (see all)License:MITTypeScript:Not Found
npm i @mathiaslima/react-big-calendar
Readme

image

Responsive

image

React Big Calendar

A simple and lightweight react component of a big agenda

NPM JavaScript Style Guide Software License npm npm

Demo

coming soon

Install

npm install @mathiaslima/react-big-calendar

or

yarn add @mathiaslima/react-big-calendar

Usage

import React from 'react'
import { BigCalendar } from '@mathiaslima/react-big-calendar';

const MyView = (props) => (
   <BigCalendar 
     eventsMonth={
        [
          {
            date: new Date(),
            backgroundColor: "#f0fded",
            borderColor: "green",
            footerView: true,
            // footerIcon: "<>",
            footerTitle: `Ver mais`,
            eventsDay: [
              {
                title: "Ajudante de cozinha",
                dotColor: "#000",
              },
              {
                title: "Cozinheiro",
                dotColor: "#000",
              },

            ]
          },
        ]
   />
)

LOCALE

Default is en-US

image

import React from 'react'
import { BigCalendar } from '@mathiaslima/react-big-calendar';
import en from 'date-fns/locale/en-US';

const MyView = (props) => (
   <BigCalendar 
     locale={en}
     eventsMonth={
        [
          {
            date: new Date(),
            backgroundColor: "#f0fded",
            borderColor: "green",
            footerView: true,
            // footerIcon: "<>",
            footerTitle: `Ver mais`,
            eventsDay: [
              {
                title: "Ajudante de cozinha",
                dotColor: "#000",
              },
              {
                title: "Cozinheiro",
                dotColor: "#000",
              },

            ]
          },
        ]
   />
)

Props

  • eventsMonth:
      [
          {
            date: new Date(),
            backgroundColor: "#f0fded",
            borderColor: "green",
            footerView: true,
            // footerIcon: "<>",
            footerTitle: `Ver mais`,
            eventsDay: [
              {
                title: "Ajudante de cozinha",
                dotColor: "#000",
              },
              {
                title: "Cozinheiro",
                dotColor: "#000",
              },

            ]
          },
        ]

  • Optional

  • Send the event data you want to render.

  • leftIcon: String | Component

    • Optional
    • The button to navigate to the previous month.
  • rightIcon: String | Component

    • Optional
    • The button to navigate to the next month.
  • onMonthChange: Function(date: Date)

    • Optional
    • The callback function to be called when clicking the next and previous buttons.
    () => new Date
    
  • onClickFooter: Function(date: Date, event: Object )

    • Optional
    • the function is called when you click on the footer of the day card
  () => {
            return (
                {
                    date: "2021-07-18T20:48:54.270Z",
                    backgroundColor: "#e8f4f8",
                    borderColor: "#399bbc",
                    footerView: true,
                    footerTitle: "Ver mais",
                    eventsDay: [
                        {
                            title: "Jobs hoje",
                            dotColor: "#000"
                        },
                        {
                            title: "Jobs hoje",
                            dotColor: "#000"
                        }
                    ]
                }
            )
        }
  • onClickEvent: Function(date: Date, eventDay: Object )

    • Optional
    • the function is called when you click on the day card event
     () => {
               return (
                   {
                       title: "Jobs hoje",
                       dotColor: "#000"
                   }
               )
           }
    
  • small: Boolean

    • Optional
    • Whether to apply the mobile styles or not.
    • Default value: false

License

Licensed under the MIT License, Copyright © 2021-present Mathias Lima mathiaslima.

See LICENSE for more information.

Downloads/wk

72

GitHub Stars

12

LAST COMMIT

10mos ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.1.5
latest
10mos ago
No alternatives found
No tutorials found
Add a tutorial