If you just need a quick calendar view by month for your React app, this piece of ui will help.
- Install package
npm i @vespaiach/month-view -S
- The gist
import '@vespaiach/month-view/dist/base.css'; // Tailwindcss's preflight. This is optional, but recommended
import '@vespaiach/month-view/dist/month.css';
import './app.css';
import * as React from 'react';
import { MonthView } from '@vespaiach/month-view';
import { MonthNum } from '@vespaiach/month-view/dist/type';
export default function App() {
const [date, setDate] = React.useState(new Date());
return (
<MonthView year={date.getFullYear()} month={date.getMonth() as MonthNum} />
);
}- Properties
| Properties | Note | type | required |
|---|---|---|---|
year |
Year | number | yes |
month |
Month (start from 0) | number | yes |
events |
List of events will be displayed on the calendar | { title:string; start: Date; minutes: number}[] | no |
className |
Css class | string | no |
onClick |
Click event handler | (date: Date, events: Event[], evt: MouseEvent>) => void | no |
DAYS |
Custom name of day (Sun, Mon...) | string[] | no |
MONTHS |
Custom name of month (Jan, Feb...) | string[] | no |
colors |
Custom color of calendar** | object[] | no |
**
colors?: {
gridLine?: string;
sheetBackground?: string;
dayText?: string;
grayedOutText?: string;
normalText?: string;
lightText?: string;
todayCircle?: string;
eventListDot?: string;
};This React component is bootstrapping with ViteJS, styling with Tailwindcss, testing with Vitest and building with Microbundle and Postcss.
NPM commands
- To start development page:
npm run dev - To test the lib:
npm run test. - To build for production:
npm run build.
Note
In fact, Microbundle can build css files too, but it automatically merges css files into one which also includes Tailwindcss's preflight set, and that may not what users want. Tailwindcss's preflight set should be excluded and let users decide to add it in their project whether or not. So let Postcss takes the job of building css instead.
MIT