diff --git a/packages/embeds/embed-core/src/ui/skeleton.ts b/packages/embeds/embed-core/src/ui/skeleton.ts
index 2d33841b78..67864b4548 100644
--- a/packages/embeds/embed-core/src/ui/skeleton.ts
+++ b/packages/embeds/embed-core/src/ui/skeleton.ts
@@ -42,28 +42,57 @@ const generateDatePickerSkeleton = () => {
() => `
+
`
)
.join("");
- const datesToRender = 7 * 5; // columns * rows in a month view
- const dates = Array.from({ length: datesToRender })
- .map(
- () => `
+ const now = new Date();
+ const currentMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+ const weekStart = 0;
+
+ const firstDayOfMonth = currentMonth.getDay();
+
+ const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
+
+ const leadingEmptyCells = (firstDayOfMonth - weekStart + 7) % 7;
+
+ const totalCells = 42;
+ const trailingEmptyCells = totalCells - leadingEmptyCells - daysInMonth;
+
+ let dates = "";
+
+ // Leading empty cells
+ for (let i = 0; i < leadingEmptyCells; i++) {
+ dates += `
+ `;
+ }
+
+ // Filled cells for actual days in the month
+ for (let i = 1; i <= daysInMonth; i++) {
+ dates += `
-
`
- )
- .join("");
+ `;
+ }
+
+ for (let i = 0; i < trailingEmptyCells; i++) {
+ dates += `
+ `;
+ }
+
+ const formattedMonth = `${currentMonth.getFullYear()}-${String(currentMonth.getMonth() + 1).padStart(
+ 2,
+ "0"
+ )}`;
return `
-