https://github.com/kkostov/react-calendar-icon

A customizable date badge component in the shape of a familiar calendar icon
https://github.com/kkostov/react-calendar-icon

badge date front-end icon react styled-components

Last synced: about 1 month ago
JSON representation

A customizable date badge component in the shape of a familiar calendar icon

• Host: GitHub
• URL: https://github.com/kkostov/react-calendar-icon
• Owner: kkostov
• License: mit
• Created: 2017-08-04T19:11:27.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-04-16T15:58:52.000Z (over 2 years ago)
• Last Synced: 2024-11-16T01:16:01.895Z (about 1 month ago)
• Topics: badge, date, front-end, icon, react, styled-components
• Language: JavaScript
• Size: 426 KB
• Stars: 7
• Watchers: 4
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# React Calendar Icon Badge

A date badge component in the shape of a familiar calendar icon with support for theming and localization.

[Demo](https://kkostov.github.io/react-calendar-icon/demo/build/)

```

npm install --save react-calendar-icon

```

[![Build Status](https://travis-ci.org/kkostov/react-calendar-icon.svg?branch=master)](https://travis-ci.org/kkostov/react-calendar-icon)

[![npm](https://img.shields.io/npm/v/react-calendar-icon.svg)](https://www.npmjs.com/package/react-calendar-icon)

# Usage

```jsx

import React from "react";

import CalendarIcon from "react-calendar-icon";

export default function App(props) {

  return (

    


      {/* ...  */}

      

    

  );

}

```


# Date formatting

The `CalendarIcon` component takes an optional prop `options` which can be used to adjust the way the date parts will be formatted. By default, the following configuration is used:

```js

{

  header: { weekday: "long" },

  footer: { month: "long" },

  value: { day: "2-digit" },

  locale: []

}

```

The values for the `header`, `footer` and `value` sections of the icon are objects passed to ([Date.prototype.toLocaleDateString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString))

```jsx

import React from "react";

import CalendarIcon from "react-calendar-icon";

const dateOptions = {

  header: { weekday: "long" },

  footer: { month: "short" },

  value: { day: "2-digit" },

  locale: "nl"

};

export default function App(props) {

  return (

    


      {/* ...  */}

      

    

  );

}

```


# Theming

It is possible to customize the look-and-feel of the icon by using a `ThemeProvider` component from `@emotion/react`. Add a `calendarIcon` member with the following attributes:

```jsx

import React from "react";

import CalendarIcon from "react-calendar-icon";

import { ThemeProvider } from "@emotion/react";

const theme = {

  calendarIcon: {

    textColor: "white", // text color of the header and footer

    primaryColor: "#0da472", // background of the header and footer

    backgroundColor: "#fafafa"

  }

};

export default function App(props) {

  return (

    

      {/* ...  */}

      

    

  );

}

```

# License

MIT