colorful-calendar

A simple calendar component for react applications

import React, { Component } from 'react'
import Calendar, { colorTheme } from 'colorful-calendar'
import 'colorful-calendar/Calendar.css'
import 'colorful-calendar/mediaqueries.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Calendar
          date={new Date()}
          colors={colorTheme.redflat}
        >
      <div>
    )
  }
}

Install

Using npm

npm install colorful-calendar

Required component properties

Properties	Type	Description
date	Object	Provides the component with the date passed to it
colors	Object	Provides the component with the color theme chosen from calendar.colors.js

Optional feature

Pass a custom colors object

{
  textColor: "#000",
  componentBG: "#292828",
  header1BG: "#fff",
  header2BG: "#fff",
  arrowsBG: "#fff",
  weekDayNamesBG: "#fff",
  prevMonthNodesBG: "#8ee5ff",
  currentDateNodeBG: "#c4c1c1",
  currentMonthNodesBG: "#fff",
  nextMonthNodesBG: "#8ee5ff"
}

... or if you wish you can create a custom.colors.js file
Note: you can name this file whatever you would like.

custom.colors.js

const myNewColorTheme = {
  textColor: "#000",
  componentBG: "#292828",
  header1BG: "#fff",
  header2BG: "#fff",
  arrowsBG: "#fff",
  weekDayNamesBG: "#fff",
  prevMonthNodesBG: "#8ee5ff",
  currentDateNodeBG: "#c4c1c1",
  currentMonthNodesBG: "#fff",
  nextMonthNodesBG: "#8ee5ff"
}

export { myNewColorTheme, ... , ... }

App.js

import React, { Component } from 'react'
import Calendar from 'colorful-calendar'
import { myNewColorTheme } from './custom.colors.js'
import 'colorful-calendar/Calendar.css'
import 'colorful-calendar/mediaqueries.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Calendar
          date={new Date()}
          colors={myNewColorTheme}
        >
      <div>
    )
  }
}

Color theme options

Color theme name
original
redflat

Contribute

See development repository here

ryansaam/colorful-calendar