Calendar Component Library - upn-calendar

This document provides a style guide for the Calendar component, including its usage, props, and styling conventions.

Component Usage

$3

- events: IEvent[] - An array of event objects to be displayed in the calendar.

$3

- name (string) - The name of the event.
- title (string) - The title of the event.
- startTime (string) - The start time of the event in "hh:mm a" format.
- endTime (string) - The end time of the event in "hh:mm a" format.
- date (string) - The date of the event in "yyyy-MM-dd" format.
- bgColor (string) - (Optional) The background color of the event card.
- borderColor (string) - (Optional) The border color of the event card.
- iconClick (function) - (Optional) Function to handle icon click event.

Styles

$3

- Styles are applied using CSS modules, ensuring scoped and conflict-free styling.

$3

- .upn-calendar - Main container for the calendar.
- .upn-calendar--filters-btns - Container for the filter buttons.
- .upn-calendar--date-filter - Container for the date navigation and filter button.
- .upn-calendar--dateNavigation - Container for the date navigation buttons and display.
- .upn-calendar--currentView - Container for the current view (list, week, day).

$3

The component conditionally renders different views based on the currentView state:

- ListView
- WeekView
- DayView

Example Usage

``jsx
import React from 'react';
import Calendar from './components/Calendar/Calendar';
import { IEvent } from './types/CalendarTypes';

const events: IEvent[] = [
{
name: 'Client 1',
title: 'Meeting with Bob',
startTime: '12:00 AM',
endTime: '1:00 AM',
date: '2024-07-07',
bgColor: '#FFF9E9',
borderColor: '#FFA900',
iconClick: () => {
console.log('Clicked');
},
},
{
name: 'Client 2',
title: 'Project Presentation',
startTime: '1:00 AM',
endTime: '2:00 AM',
date: '2024-07-08',
bgColor: '#F2F1FF',
borderColor: '#796EFF',
iconClick: () => {
console.log('Clicked');
},
},
{
name: 'Client 3',
title: 'Lunch Break',
startTime: '01:00 AM',
endTime: '01:30 AM',
date: '2024-07-11',
bgColor: '#FFEEEF',
borderColor: '#FF5263',
iconClick: () => {
console.log('Clicked');
},
},
{
name: 'Client 4',
title: 'Team Standup',
startTime: '02:00 AM',
endTime: '02:30 AM',
date: '2024-07-12',
bgColor: '#E9F6FE',
borderColor: '#23A9F9',
iconClick: () => {
console.log('Clicked');
},
},
];

const App = () => {
return ;
};

export default App;
``