Calendar Component Library - upn-calendar

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

Component Usage

Props

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

Event Object

• 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

CSS Modules

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

Main Classes

• .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).

Conditional Rendering

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

• ListView
• WeekView
• DayView

Example Usage

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 <Calendar events={events} />;
};

export default App;