Copy css into build; update listener example in Readme

README.md

@@ -25,9 +25,9 @@ Or using yarn:
 yarn add react-calendar-plus
 ```
 
-## Usage
+## Example Usage
 
-```javascript
+```typescript
 import React from 'react';
 import { Calendar, CalendarEvent, CalendarEventStore } from 'react-calendar-plus';
 
@@ -67,13 +67,32 @@ function CalendarDemo() {
 
   // Support for listening for calendar events:
   calenderEventStore.onAdd((event: CalendarEvent) => {
-    console.log("Added event:", event);
+    // Call server to add event
+    fetch('https://api.example.com/events', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(event)
+    });
   });
   calenderEventStore.onUpdate((event: CalendarEvent) => {
-    console.log("Updated event:", event);
+    // Call server to add event
+    fetch(`https://api.example.com/events/${event.id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(event)
+    });
   });
   calenderEventStore.onDelete((event: CalendarEvent) => {
-    console.log("Deleted event:", event);
+    fetch(`https://api.example.com/events/${event.id}`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
   });
 
   return (

package.json

@@ -14,8 +14,8 @@
   ],
   "scripts": {
     "build": "npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:types && npm run build:demo",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
-    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:cjs": "tsc -p tsconfig.cjs.json && cp ./src/calendar.css ./dist/cjs/",
+    "build:esm": "tsc -p tsconfig.esm.json && cp ./src/calendar.css ./dist/esm/",
     "build:umd": "webpack --mode production",
     "build:types": "tsc -p tsconfig.types.json",
     "build:demo": "webpack --config webpack.demo.config.js --mode production && cp demo/index.html dist/demo",

src/calendar.css

@@ -75,22 +75,31 @@
   border-left: 3px solid rgb(101, 219, 57);
 }
 
-.calendar-event.success {
-  background-color: #28a745;
-  border-color: #269940;
+.calendar-month-view {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
 }
 
-.calendar-event.warning {
-  background-color: #ffc107;
-  border-color: #ffb507;
+.weekdays-row {
+  display: contents; /* makes the children of this div to respect the parent grid */
 }
 
-.calendar-event.danger {
-  background-color: #dc3545;
-  border-color: #d2253a;
+.weekday {
+  background-color: #f7f7f7;
+  padding: 5px;
+  text-align: center;
+  font-weight: bold;
 }
 
-.calendar-event.primary {
-  background-color: #007bff;
-  border-color: #006fee;
+.calendar-day {
+  background-color: #ffffff;
+  padding: 5px;
+  border: 1px solid #e0e0e0;
+  min-height: 120px;
+}
+
+.calendar-day.inactive {
+  background-color: #f7f7f7;
+  border: none;
+  cursor: none;
 }

src/views/month-view.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import CalendarEventStore from "../calendar-event-store";
 import { areDatesEqual } from "../utils/date";
-import "./month-view.css";
 
 interface Props {
   activeDate: Date;