shadcn.io is not affiliated with official shadcn/ui
Meal Planner Calendar Block for Vue
Seven days of breakfast, lunch and dinner plus a spare column, swapped by pressing two meals of a kind, with a kcal total for each day and a merged shopping list you can copy.
Installation
Overview
Plan a week of food with this meal planner calendar for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a table of the next seven days, Wednesday 14 to Tuesday 20 October, with breakfast, lunch and dinner on shared hairlines and an eighth column of spare meals. Each meal is a button showing its name and kcal. Press one, then another meal of the same kind, and the two swap places; the swap is announced, and a press on a different kind says why nothing moved. A row of day totals works out the kcal against a typed target of 1,800, and the shopping list under the grid is derived from the week's meals, the same ingredient merged ("Eggs, 6", "Oats, 110 g"), so a meal swapped in from the spare column changes it. The copy button puts the list on the clipboard for real, through CopyButton. On a phone the days become chips over one day's three meals. The bands are ruled by Guides, and the entrance is CSS only. For meal prep apps, family planners and any week that ends in a shopping trip.
FAQ
How do I add my own meals?
Edit MEALS: each one has a name, its kcal and a list of needs, each an item, a quantity and a unit. START_PLAN is the 24 meal ids by column and kind, and the totals and the shopping list are worked out from it; the quantities are summed per ingredient.
How does the swap work?
Press a meal and it is marked as picked; press another meal of the same kind and the two exchange places. Pressing the picked meal again cancels. Swapping across kinds is refused with a spoken reason, because a dinner in the breakfast row would break the daily totals' meaning.
Why does the shopping list change only sometimes?
Swapping two days' meals leaves the week's ingredients the same, so the list does not move. Swapping a meal with one from the spare column changes what the seven days contain, and the list and the totals follow. The spare column is not counted.
Does the copy button really copy?
Yes. It writes one line per ingredient to the clipboard and announces "Shopping list copied" in a polite status line. The list scrolls inside a focusable region, so it keeps its height as it grows or shrinks.