react-calendar-icon
v0.10.0
Published
A customizable date badge component in the shape of a familiar calendar icon
Downloads
1,100
Maintainers
Readme
React Calendar Icon Badge
A date badge component in the shape of a familiar calendar icon with support for theming and localization.
npm install --save react-calendar-icon
Usage
import React from "react";
import CalendarIcon from "react-calendar-icon";
export default function App(props) {
return (
<div>
{/* ... */}
<CalendarIcon date={new Date()} />
</div>
);
}
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:
{
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())
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 (
<div>
{/* ... */}
<CalendarIcon date={new Date()} options={dateOptions} />
</div>
);
}
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:
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 (
<ThemeProvider theme={theme}>
{/* ... */}
<CalendarIcon date={new Date()} />
</ThemeProvider>
);
}
License
MIT