@zach.codes/react-calendar - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

dist/index.d.ts

 export * from './Monthly/MonthlyCalendar';
+export * from './Monthly/MonthlyBody';
 export * from './Monthly/MonthlyEventItems';
 export * from './Weekly/WeeklyCalendar';
 export * from './Weekly/WeeklyEventItems';

dist/Monthly/MonthlyCalendar.d.ts

@@ -15,11 +15,2 @@ import { ReactNode } from 'react';
 export declare const MonthlyNav: () => JSX.Element;
-declare type ExtraMonthData = {
-    date: Date;
-};
-declare type MonthlyBodyProps<MonthData> = {
-    omitDays?: number[];
-    events: (MonthData & ExtraMonthData)[];
-    renderDay: (data: (MonthData & ExtraMonthData)[]) => ReactNode;
-};
-export declare function MonthlyBody<MonthData>({ omitDays, events, renderDay, }: MonthlyBodyProps<MonthData>): JSX.Element;
 export {};

dist/react-calendar.cjs.development.js

@@ -11,25 +11,2 @@ 'use strict';
 
-var daysInWeek = [{
-  day: 0,
-  label: 'Sunday'
-}, {
-  day: 1,
-  label: 'Monday'
-}, {
-  day: 2,
-  label: 'Tuesday'
-}, {
-  day: 3,
-  label: 'Wednesday'
-}, {
-  day: 4,
-  label: 'Thursday'
-}, {
-  day: 5,
-  label: 'Friday'
-}, {
-  day: 6,
-  label: 'Saturday'
-}];
-
 var MonthlyCalendarContext = /*#__PURE__*/React__default.createContext({});
@@ -79,5 +56,32 @@ var useMonthlyCalendar = function useMonthlyCalendar() {
 
-var handleOmittedDays = function handleOmittedDays(_ref2) {
-  var days = _ref2.days,
-      omitDays = _ref2.omitDays;
+var daysInWeek = [{
+  day: 0,
+  label: 'Sunday'
+}, {
+  day: 1,
+  label: 'Monday'
+}, {
+  day: 2,
+  label: 'Tuesday'
+}, {
+  day: 3,
+  label: 'Wednesday'
+}, {
+  day: 4,
+  label: 'Thursday'
+}, {
+  day: 5,
+  label: 'Friday'
+}, {
+  day: 6,
+  label: 'Saturday'
+}];
+
+var MonthlyBodyContext = /*#__PURE__*/React__default.createContext({});
+function useMonthlyBody() {
+  return React.useContext(MonthlyBodyContext);
+}
+var handleOmittedDays = function handleOmittedDays(_ref) {
+  var days = _ref.days,
+      omitDays = _ref.omitDays;
   var headings = daysInWeek;
@@ -113,3 +117,2 @@ var daysToRender = days; //omit the headings and days of the week that were passed in
 
-
 var headingClasses = {
@@ -122,9 +125,9 @@ l3: 'lg:grid-cols-3',
 };
-function MonthlyBody(_ref3) {
-  var omitDays = _ref3.omitDays,
-      events = _ref3.events,
-      renderDay = _ref3.renderDay;
+function MonthlyBody(_ref2) {
+  var omitDays = _ref2.omitDays,
+      events = _ref2.events,
+      children = _ref2.children;
 
-  var _useMonthlyCalendar2 = useMonthlyCalendar(),
-      days = _useMonthlyCalendar2.days;
+  var _useMonthlyCalendar = useMonthlyCalendar(),
+      days = _useMonthlyCalendar.days;
 
@@ -158,22 +161,35 @@ var _handleOmittedDays = handleOmittedDays({
   }), daysToRender.map(function (day) {
-    var dayData = events.filter(function (data) {
-      return dateFns.isSameDay(data.date, day);
-    });
-    var dayNumber = dateFns.format(day, 'd');
-    return React__default.createElement("div", {
+    return React__default.createElement(MonthlyBodyContext.Provider, {
       key: day.toISOString(),
-      "aria-label": "Events for day " + dayNumber,
-      className: "h-48 p-2 border-b-2 border-r-2"
-    }, React__default.createElement("div", {
-      className: "flex justify-between"
-    }, React__default.createElement("div", {
-      className: "font-bold"
-    }, dayNumber), React__default.createElement("div", {
-      className: "lg:hidden block"
-    }, dateFns.format(day, 'EEEE'))), React__default.createElement("ul", {
-      className: "divide-gray-200 divide-y overflow-hidden max-h-36 overflow-y-auto"
-    }, renderDay(dayData)));
+      value: {
+        day: day,
+        events: events.filter(function (data) {
+          return dateFns.isSameDay(data.date, day);
+        })
+      }
+    }, children);
   })));
 }
+function MonthlyDay(_ref3) {
+  var renderDay = _ref3.renderDay;
 
+  var _useMonthlyBody = useMonthlyBody(),
+      day = _useMonthlyBody.day,
+      events = _useMonthlyBody.events;
+
+  var dayNumber = dateFns.format(day, 'd');
+  return React__default.createElement("div", {
+    "aria-label": "Events for day " + dayNumber,
+    className: "h-48 p-2 border-b-2 border-r-2"
+  }, React__default.createElement("div", {
+    className: "flex justify-between"
+  }, React__default.createElement("div", {
+    className: "font-bold"
+  }, dayNumber), React__default.createElement("div", {
+    className: "lg:hidden block"
+  }, dateFns.format(day, 'EEEE'))), React__default.createElement("ul", {
+    className: "divide-gray-200 divide-y overflow-hidden max-h-36 overflow-y-auto"
+  }, renderDay(events)));
+}
+
 var DefaultMonthlyEventItem = function DefaultMonthlyEventItem(_ref) {
@@ -320,2 +336,3 @@ var title = _ref.title,
 exports.MonthlyCalendar = MonthlyCalendar;
+exports.MonthlyDay = MonthlyDay;
 exports.MonthlyNav = MonthlyNav;
@@ -327,4 +344,6 @@ exports.WeeklyBody = WeeklyBody;
 exports.WeeklyResponsiveContainer = WeeklyResponsiveContainer;
+exports.handleOmittedDays = handleOmittedDays;
+exports.useMonthlyBody = useMonthlyBody;
 exports.useMonthlyCalendar = useMonthlyCalendar;
 exports.useWeeklyCalendar = useWeeklyCalendar;
 //# sourceMappingURL=react-calendar.cjs.development.js.map

dist/react-calendar.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("date-fns"),a=require("react"),r=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,n=[{day:0,label:"Sunday"},{day:1,label:"Monday"},{day:2,label:"Tuesday"},{day:3,label:"Wednesday"},{day:4,label:"Thursday"},{day:5,label:"Friday"},{day:6,label:"Saturday"}],l=r.createContext({}),d=function(){return a.useContext(l)},o={l3:"lg:grid-cols-3",l4:"lg:grid-cols-4",l5:"lg:grid-cols-5",l6:"lg:grid-cols-6",l7:"lg:grid-cols-7"},s=r.createContext({}),i=function(){return a.useContext(s)},c=function(e){var a=e.day,n=i(),l=n.week,d=n.selectedDay,o=n.changeSelectedDay,s=!!d&&t.getDay(d)===a.day,c=t.setDay(l,a.day);return r.createElement("li",{onClick:function(){return o(s?void 0:c)},className:"bg-white cursor-pointer","aria-label":"Day of Week"},r.createElement("div",{className:"rounded-lg border sm:w-36 text-center py-4 "+(s?"border-indigo-600":"border-gray-300 hover:border-gray-500")},r.createElement("p",{className:"font-medium text-sm text-gray-800"},a.label," ",t.format(c,"do"))))};exports.DefaultMonthlyEventItem=function(e){var t=e.date;return r.createElement("li",{className:"py-2"},r.createElement("div",{className:"flex text-sm flex-1 justify-between"},r.createElement("h3",{className:"font-medium"},e.title),r.createElement("p",{className:"text-gray-500"},t)))},exports.DefaultWeeklyEventItem=function(e){var t=e.date;return r.createElement("li",{className:"py-4 w-72"},r.createElement("div",{className:"text-sm flex justify-between"},r.createElement("h3",{className:"font-medium"},e.title),r.createElement("p",{className:"text-gray-500"},t)))},exports.MonthlyBody=function(e){var a=e.omitDays,l=e.events,s=e.renderDay,i=function(e){var a=e.days,r=e.omitDays,l=n,d=a;r&&(l=n.filter((function(e){return!r.includes(e.day)})),d=a.filter((function(e){return!r.includes(t.getDay(e))})));var o=t.getDay(d[0]);if(r){var s=r.filter((function(e){return e<o})).length;o-=s}return{headings:l,daysToRender:d,padding:new Array(o).fill(0)}}({days:d().days,omitDays:a}),c=i.headings,u=i.daysToRender,m=i.padding;return r.createElement("div",{className:"bg-white border-l-2 border-t-2"},r.createElement("div",{className:"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 "+o["l"+c.length]},c.map((function(e){return r.createElement("div",{key:e.day,className:"border-b-2 p-2 border-r-2 lg:block hidden","aria-label":"Day of Week"},e.label)})),m.map((function(e,t){return r.createElement("div",{key:t,className:"border-b-2 p-2 border-r-2 lg:block hidden","aria-label":"Empty Day"})})),u.map((function(e){var a=l.filter((function(a){return t.isSameDay(a.date,e)})),n=t.format(e,"d");return r.createElement("div",{key:e.toISOString(),"aria-label":"Events for day "+n,className:"h-48 p-2 border-b-2 border-r-2"},r.createElement("div",{className:"flex justify-between"},r.createElement("div",{className:"font-bold"},n),r.createElement("div",{className:"lg:hidden block"},t.format(e,"EEEE"))),r.createElement("ul",{className:"divide-gray-200 divide-y overflow-hidden max-h-36 overflow-y-auto"},s(a)))}))))},exports.MonthlyCalendar=function(e){var a=e.onCurrentMonthChange,n=e.children,d=t.startOfMonth(e.currentMonth),o=t.eachDayOfInterval({start:d,end:t.endOfMonth(d)});return r.createElement(l.Provider,{value:{days:o,onCurrentMonthChange:a,currentMonth:d}},n)},exports.MonthlyNav=function(){var e=d(),a=e.currentMonth,n=e.onCurrentMonthChange;return r.createElement("div",{className:"flex justify-end mb-4"},r.createElement("button",{onClick:function(){return n(t.subMonths(a,1))},className:"cursor-pointer"},"Previous"),r.createElement("div",{className:"ml-4 mr-4 w-32 text-center","aria-label":"Current Month"},t.format(a,t.getYear(a)===t.getYear(new Date)?"LLLL":"LLLL yyyy")),r.createElement("button",{onClick:function(){return n(t.addMonths(a,1))},className:"cursor-pointer"},"Next"))},exports.WeeklyBody=function(e){var a=e.events,n=e.renderItem,l=e.style,d=i(),o=d.week,s=d.selectedDay;return r.createElement("div",{className:"overflow-auto max-h-96",style:l},r.createElement("ul",{className:"divide-y divide-gray-200 "},a.map((function(e){return s&&!t.isSameDay(s,e.date)?null:t.isSameWeek(o,e.date)?n({item:e,showingFullWeek:void 0===s}):null}))))},exports.WeeklyCalendar=function(e){var n=e.week,l=e.children,d=a.useState(),o=d[0],i=d[1];return a.useEffect((function(){i(void 0)}),[n]),r.createElement(s.Provider,{value:{selectedDay:o,week:t.startOfWeek(n),changeSelectedDay:i}},l)},exports.WeeklyContainer=function(e){return r.createElement("div",{className:"md:flex md:justify-between"},e.children)},exports.WeeklyDays=function(e){var t=e.omitDays,a=n;return t&&(a=n.filter((function(e){return!t.includes(e.day)}))),r.createElement("ul",{className:"grid md:grid-cols-1 grid-cols-2 gap-2"},a.map((function(e){return r.createElement(c,{key:e.day,day:e})})))},exports.WeeklyResponsiveContainer=function(e){return r.createElement("div",{className:"border p-4 md:w-3/4 lg:w-1/2 w-full"},e.children)},exports.useMonthlyCalendar=d,exports.useWeeklyCalendar=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("date-fns"),r=require("react"),a=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,n=a.createContext({}),l=function(){return r.useContext(n)},o=[{day:0,label:"Sunday"},{day:1,label:"Monday"},{day:2,label:"Tuesday"},{day:3,label:"Wednesday"},{day:4,label:"Thursday"},{day:5,label:"Friday"},{day:6,label:"Saturday"}],d=a.createContext({});function s(){return r.useContext(d)}var i=function(e){var r=e.days,a=e.omitDays,n=o,l=r;a&&(n=o.filter((function(e){return!a.includes(e.day)})),l=r.filter((function(e){return!a.includes(t.getDay(e))})));var d=t.getDay(l[0]);if(a){var s=a.filter((function(e){return e<d})).length;d-=s}return{headings:n,daysToRender:l,padding:new Array(d).fill(0)}},c={l3:"lg:grid-cols-3",l4:"lg:grid-cols-4",l5:"lg:grid-cols-5",l6:"lg:grid-cols-6",l7:"lg:grid-cols-7"},u=a.createContext({}),m=function(){return r.useContext(u)},y=function(e){var r=e.day,n=m(),l=n.week,o=n.selectedDay,d=n.changeSelectedDay,s=!!o&&t.getDay(o)===r.day,i=t.setDay(l,r.day);return a.createElement("li",{onClick:function(){return d(s?void 0:i)},className:"bg-white cursor-pointer","aria-label":"Day of Week"},a.createElement("div",{className:"rounded-lg border sm:w-36 text-center py-4 "+(s?"border-indigo-600":"border-gray-300 hover:border-gray-500")},a.createElement("p",{className:"font-medium text-sm text-gray-800"},r.label," ",t.format(i,"do"))))};exports.DefaultMonthlyEventItem=function(e){var t=e.date;return a.createElement("li",{className:"py-2"},a.createElement("div",{className:"flex text-sm flex-1 justify-between"},a.createElement("h3",{className:"font-medium"},e.title),a.createElement("p",{className:"text-gray-500"},t)))},exports.DefaultWeeklyEventItem=function(e){var t=e.date;return a.createElement("li",{className:"py-4 w-72"},a.createElement("div",{className:"text-sm flex justify-between"},a.createElement("h3",{className:"font-medium"},e.title),a.createElement("p",{className:"text-gray-500"},t)))},exports.MonthlyBody=function(e){var r=e.omitDays,n=e.events,o=e.children,s=l(),u=i({days:s.days,omitDays:r}),m=u.headings,y=u.daysToRender,f=u.padding;return a.createElement("div",{className:"bg-white border-l-2 border-t-2"},a.createElement("div",{className:"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 "+c["l"+m.length]},m.map((function(e){return a.createElement("div",{key:e.day,className:"border-b-2 p-2 border-r-2 lg:block hidden","aria-label":"Day of Week"},e.label)})),f.map((function(e,t){return a.createElement("div",{key:t,className:"border-b-2 p-2 border-r-2 lg:block hidden","aria-label":"Empty Day"})})),y.map((function(e){return a.createElement(d.Provider,{key:e.toISOString(),value:{day:e,events:n.filter((function(r){return t.isSameDay(r.date,e)}))}},o)}))))},exports.MonthlyCalendar=function(e){var r=e.onCurrentMonthChange,l=e.children,o=t.startOfMonth(e.currentMonth),d=t.eachDayOfInterval({start:o,end:t.endOfMonth(o)});return a.createElement(n.Provider,{value:{days:d,onCurrentMonthChange:r,currentMonth:o}},l)},exports.MonthlyDay=function(e){var r=e.renderDay,n=s(),l=n.day,o=n.events,d=t.format(l,"d");return a.createElement("div",{"aria-label":"Events for day "+d,className:"h-48 p-2 border-b-2 border-r-2"},a.createElement("div",{className:"flex justify-between"},a.createElement("div",{className:"font-bold"},d),a.createElement("div",{className:"lg:hidden block"},t.format(l,"EEEE"))),a.createElement("ul",{className:"divide-gray-200 divide-y overflow-hidden max-h-36 overflow-y-auto"},r(o)))},exports.MonthlyNav=function(){var e=l(),r=e.currentMonth,n=e.onCurrentMonthChange;return a.createElement("div",{className:"flex justify-end mb-4"},a.createElement("button",{onClick:function(){return n(t.subMonths(r,1))},className:"cursor-pointer"},"Previous"),a.createElement("div",{className:"ml-4 mr-4 w-32 text-center","aria-label":"Current Month"},t.format(r,t.getYear(r)===t.getYear(new Date)?"LLLL":"LLLL yyyy")),a.createElement("button",{onClick:function(){return n(t.addMonths(r,1))},className:"cursor-pointer"},"Next"))},exports.WeeklyBody=function(e){var r=e.events,n=e.renderItem,l=e.style,o=m(),d=o.week,s=o.selectedDay;return a.createElement("div",{className:"overflow-auto max-h-96",style:l},a.createElement("ul",{className:"divide-y divide-gray-200 "},r.map((function(e){return s&&!t.isSameDay(s,e.date)?null:t.isSameWeek(d,e.date)?n({item:e,showingFullWeek:void 0===s}):null}))))},exports.WeeklyCalendar=function(e){var n=e.week,l=e.children,o=r.useState(),d=o[0],s=o[1];return r.useEffect((function(){s(void 0)}),[n]),a.createElement(u.Provider,{value:{selectedDay:d,week:t.startOfWeek(n),changeSelectedDay:s}},l)},exports.WeeklyContainer=function(e){return a.createElement("div",{className:"md:flex md:justify-between"},e.children)},exports.WeeklyDays=function(e){var t=e.omitDays,r=o;return t&&(r=o.filter((function(e){return!t.includes(e.day)}))),a.createElement("ul",{className:"grid md:grid-cols-1 grid-cols-2 gap-2"},r.map((function(e){return a.createElement(y,{key:e.day,day:e})})))},exports.WeeklyResponsiveContainer=function(e){return a.createElement("div",{className:"border p-4 md:w-3/4 lg:w-1/2 w-full"},e.children)},exports.handleOmittedDays=i,exports.useMonthlyBody=s,exports.useMonthlyCalendar=l,exports.useWeeklyCalendar=m;
 //# sourceMappingURL=react-calendar.cjs.production.min.js.map

dist/react-calendar.esm.js

@@ -1,27 +0,4 @@
-import { startOfMonth, eachDayOfInterval, endOfMonth, subMonths, format, getYear, addMonths, isSameDay, getDay, startOfWeek, isSameWeek, setDay } from 'date-fns';
+import { startOfMonth, eachDayOfInterval, endOfMonth, subMonths, format, getYear, addMonths, getDay, isSameDay, startOfWeek, isSameWeek, setDay } from 'date-fns';
 import React, { useContext, useState, useEffect } from 'react';
 
-var daysInWeek = [{
-  day: 0,
-  label: 'Sunday'
-}, {
-  day: 1,
-  label: 'Monday'
-}, {
-  day: 2,
-  label: 'Tuesday'
-}, {
-  day: 3,
-  label: 'Wednesday'
-}, {
-  day: 4,
-  label: 'Thursday'
-}, {
-  day: 5,
-  label: 'Friday'
-}, {
-  day: 6,
-  label: 'Saturday'
-}];
-
 var MonthlyCalendarContext = /*#__PURE__*/React.createContext({});
@@ -71,5 +48,32 @@ var useMonthlyCalendar = function useMonthlyCalendar() {
 
-var handleOmittedDays = function handleOmittedDays(_ref2) {
-  var days = _ref2.days,
-      omitDays = _ref2.omitDays;
+var daysInWeek = [{
+  day: 0,
+  label: 'Sunday'
+}, {
+  day: 1,
+  label: 'Monday'
+}, {
+  day: 2,
+  label: 'Tuesday'
+}, {
+  day: 3,
+  label: 'Wednesday'
+}, {
+  day: 4,
+  label: 'Thursday'
+}, {
+  day: 5,
+  label: 'Friday'
+}, {
+  day: 6,
+  label: 'Saturday'
+}];
+
+var MonthlyBodyContext = /*#__PURE__*/React.createContext({});
+function useMonthlyBody() {
+  return useContext(MonthlyBodyContext);
+}
+var handleOmittedDays = function handleOmittedDays(_ref) {
+  var days = _ref.days,
+      omitDays = _ref.omitDays;
   var headings = daysInWeek;
@@ -105,3 +109,2 @@ var daysToRender = days; //omit the headings and days of the week that were passed in
 
-
 var headingClasses = {
@@ -114,9 +117,9 @@ l3: 'lg:grid-cols-3',
 };
-function MonthlyBody(_ref3) {
-  var omitDays = _ref3.omitDays,
-      events = _ref3.events,
-      renderDay = _ref3.renderDay;
+function MonthlyBody(_ref2) {
+  var omitDays = _ref2.omitDays,
+      events = _ref2.events,
+      children = _ref2.children;
 
-  var _useMonthlyCalendar2 = useMonthlyCalendar(),
-      days = _useMonthlyCalendar2.days;
+  var _useMonthlyCalendar = useMonthlyCalendar(),
+      days = _useMonthlyCalendar.days;
 
@@ -150,22 +153,35 @@ var _handleOmittedDays = handleOmittedDays({
   }), daysToRender.map(function (day) {
-    var dayData = events.filter(function (data) {
-      return isSameDay(data.date, day);
-    });
-    var dayNumber = format(day, 'd');
-    return React.createElement("div", {
+    return React.createElement(MonthlyBodyContext.Provider, {
       key: day.toISOString(),
-      "aria-label": "Events for day " + dayNumber,
-      className: "h-48 p-2 border-b-2 border-r-2"
-    }, React.createElement("div", {
-      className: "flex justify-between"
-    }, React.createElement("div", {
-      className: "font-bold"
-    }, dayNumber), React.createElement("div", {
-      className: "lg:hidden block"
-    }, format(day, 'EEEE'))), React.createElement("ul", {
-      className: "divide-gray-200 divide-y overflow-hidden max-h-36 overflow-y-auto"
-    }, renderDay(dayData)));
+      value: {
+        day: day,
+        events: events.filter(function (data) {
+          return isSameDay(data.date, day);
+        })
+      }
+    }, children);
   })));
 }
+function MonthlyDay(_ref3) {
+  var renderDay = _ref3.renderDay;
 
+  var _useMonthlyBody = useMonthlyBody(),
+      day = _useMonthlyBody.day,
+      events = _useMonthlyBody.events;
+
+  var dayNumber = format(day, 'd');
+  return React.createElement("div", {
+    "aria-label": "Events for day " + dayNumber,
+    className: "h-48 p-2 border-b-2 border-r-2"
+  }, React.createElement("div", {
+    className: "flex justify-between"
+  }, React.createElement("div", {
+    className: "font-bold"
+  }, dayNumber), React.createElement("div", {
+    className: "lg:hidden block"
+  }, format(day, 'EEEE'))), React.createElement("ul", {
+    className: "divide-gray-200 divide-y overflow-hidden max-h-36 overflow-y-auto"
+  }, renderDay(events)));
+}
+
 var DefaultMonthlyEventItem = function DefaultMonthlyEventItem(_ref) {
@@ -308,3 +324,3 @@ var title = _ref.title,
 
-export { DefaultMonthlyEventItem, DefaultWeeklyEventItem, MonthlyBody, MonthlyCalendar, MonthlyNav, WeeklyBody, WeeklyCalendar, WeeklyContainer, WeeklyDays, WeeklyResponsiveContainer, useMonthlyCalendar, useWeeklyCalendar };
+export { DefaultMonthlyEventItem, DefaultWeeklyEventItem, MonthlyBody, MonthlyCalendar, MonthlyDay, MonthlyNav, WeeklyBody, WeeklyCalendar, WeeklyContainer, WeeklyDays, WeeklyResponsiveContainer, handleOmittedDays, useMonthlyBody, useMonthlyCalendar, useWeeklyCalendar };
 //# sourceMappingURL=react-calendar.esm.js.map

package.json

 {
-  "version": "0.0.3",
+  "version": "0.1.0",
   "license": "MIT",
@@ -4,0 +4,0 @@ "name": "@zach.codes/react-calendar",

README.md

@@ -24,4 +24,6 @@ # React Calendar
 ```tsx
+import { format, subHours, startOfMonth } from 'date-fns';
 import {
   MonthlyBody,
+  MonthlyDay,
   MonthlyCalendar,
@@ -49,12 +51,16 @@ MonthlyNav,
         ]}
-        renderDay={data =>
-          data.map((item, index) => (
-            <DefaultMonthlyEventItem
-              key={index}
-              title={item.title}
-              date={item.date}
-            />
-          ))
-        }
-      />
+      >
+        <MonthlyDay<EventType>
+          renderDay={data =>
+            data.map((item, index) => (
+              <DefaultMonthlyEventItem
+                key={index}
+                title={item.title}
+                // Format the date here to be in the format you prefer
+                date={format(item.date, 'k:mm')}
+              />
+            ))
+          }
+        />
+      </MonthlyBody>
     </MonthlyCalendar>
@@ -84,3 +90,3 @@ );
 ```js
-import 'react-big-calendar/dist/calendar-tailwind.css';
+import '@zach.codes/react-calendar/dist/calendar-tailwind.css';
 ```
@@ -109,2 +115,5 @@
 - `events` this is an array of events, the only thing required inside each object is a `date` field with a Date object representing the exact time of the event
+
+`MonthlyDay`
+
 - `renderDay` callback function that is passed an array of events for each day displayed, letting you render the events for the day
@@ -111,0 +120,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

120798

increased by4.66%

Number of package files

26

increased by8.33%

Lines of code

1767

increased by4.68%

Number of lines in readme file

211

increased by4.46%

No dependency changes