Responsive

React Big Calendar

A simple and lightweight react component of a big agenda

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

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.