rc-big-calendar

    1.0.4 • Public • Published

    image

    React Big Calendar

    A lightweight Google Calendar like React Component built with grid and flexbox.

    NPM JavaScript Style Guide Software License npm npm

    Demo

    Demo

    Install

    npm install --save rc-big-calendar

    Usage

    import React from 'react'
    import Calendar from 'rc-big-calendar'
     
    const myCustomRender = (day) => {
      return <div>Example</div>
    }
     
    const MyView = (props) => (
      <Calendar
        renderDay={myCustomRender}
        previousButton={<span> 👈 </span>}
        nextButton={<span> 👉 </span>}
        onMonthChange={handleMonthChange}
      />
    )

    Props

    • renderDay: Function(currentDay: Date, startDate: Date, endDate: Date, isToday: boolean)

      • Optional
      • The custom renderer function for every day in the calendar.
    • previousButton: String | Component

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

      • Optional
      • The button to navigate to the next month.
    • onMonthChange: Function(currentDay: Date, startDate: Date, endDate: Date)

      • Optional
      • The callback function to be called when clicking the next and previous buttons.
    • isMobile: Boolean

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

      • Optional
      • The format of the date in the header of the calendar.
      • Default value: 'MMMM YYYY'
    • headerColor: String

      • Optional
      • The color of the date in the header of the calendar.
      • Default value: '#3c4043'
    • borderColor: String

      • Optional
      • The color of the borders.
      • Default value: '#dadce0'
    • dayNameColor: String

      • Optional
      • The color of theday name (MON, TUE....).
      • Default value: '#70757a'

    For date formating please refer to the date-fns docs.

    Changelog

    1.0.4

    • Remove styled-components dependency.
    • Previously only the content of the cell could be controlled and not the header, now the render callback allows you to render the whole cell.
    • Removed props for formatting the header of the cell since now you can render your own header with your own styles.
    • Changed mobileBreakpoint by isMobile for more control on when to change to mobile styles

    1.0.3

    • Added support for date formatting.
    • Added support for current day header color.

    License

    Licensed under the MIT License, Copyright © 2020-present Luis Guerrero drac94.

    See LICENSE for more information.

    Install

    npm i rc-big-calendar

    DownloadsWeekly Downloads

    2

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    37.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • ludwiguer