Example

Assigning a CSS color keyword like black instead of #000000 to color throws error:

Expected Behavior

1. If color's value doesn't begin with a #, compare it to a dictionary of CSS colors.
2. If not in the dictionary, either throw error or use "transparent" (your choice).
3. If in the dictionary, use that keyword for the color.

Using isMilestone flag, support the creation of milestones into the data, which can be dependent tasks. They could theoretically also be parent tasks, though this does not seem typical and is not yet supported.

tasks.js data now has one sample milestone.

Example

When planning shorter duration efforts over longer time periods (think weeks in months), the bars get condensed to the point of not being legible at a glance:

Expected behavior

It would be useful to see a monthly or weekly view with a "map" of the greater whole to one side.

Mural has a feature like this, as an example of what I'm describing:

Looks like ENV_HOST and NEXT_PUBLIC_VERCEL_URL are set incorrectly for https://plannerjs.dev/ leading to mixed content warning for favicons and invalid og:url.

Thank you for making this public btw. Awesome project :tada:

It seems like Planner can generate plan-specific og:image images dynamically by rendering a Canvas on the server and then capturing a screenshot (using Puppeteer or Playwright) and returning that. Some related tweet threads:

• https://twitter.com/terrysahaidak/status/1478727805907214342
• https://twitter.com/MichaelDeBoey93/status/1478539507343441921
• https://twitter.com/anthonygarvan/status/1478512005275398148

Vercel's og-image repo might also be a nice starting point to fork: https://github.com/vercel/og-image

This would be a nice upgrade from the current behavior which is to just return the following hard-coded og:image:

Appreciate you making this public. Good to see how you guys build React apps (from the view of the rest of us). Took me a minute to realize that "loosing focus" updates the data when I type in changes. No need (IMHO) to fix, but might be helpful to add a text note to that behavior.

Includes need for in-data length units, which I wish were named durations. I'd be happy to take a hack at this. Should be able to support data inputs like:

createTask({
  id: "mile",
  name: "Bar",
  month: 2,
  length: 3d,
  dependency: "m-dep",
  owner: "susan",
});
createTask({
  name: "Foo",
  month: 2,
  length: 1w,
  isOngoing: true,
  owner: "team",
});
createTask({
  name: "Baz",
  month: 2,
  length: 3m,
  isOngoing: true,
  owner: "team",
});

👋 Fixing a small bug I noticed, if you have a key that is not all lowercase in the owners object, it leads to having duplicate entries in the legend:

Before:

(Notice how there are two "Planner" entries in the legend)

After:

(No more duplicate entries 🎉 )

• [x] Replace month-centric index+duration with start/stop date.
• [x] Scale horizontal axis (and labels) to fit the supplied tasks.
• [x] Don't mutate dates; store temporal metadata in a Map somewhere.
• [x] Auto-import and upgrade previous data format from URL.
• [x] Add e2e tests.
• [ ] Re-consider @js-temporal/polyfill usage (it's pretty large; maybe check dayjs?)

View years example

View months example

View weeks example

View days example

Hi bro, that's great ❤ i try to added new team metadata, when i changed the "name", i saw a error

i think it can be fix with "?." operator

src/utils/color.js => line 2

export function hexToRgb(hex) {
  if (hex?.length === 4) {

Relates to #25

• [x] Add horizontal and vertical pan interaction
• [x] Add zoom interaction
• [x] Write e2e tests
• [x] Update previous e2e tests
• [x] Add click-and-drag pan interaction

https://user-images.githubusercontent.com/29597/152462071-6622ce90-d41e-4bbd-9bf3-5afe07e4654d.mov

• [x] Add basic pinch/scroll support for touch devices
• [x] Support double tap to zoom in
• [ ] Add momentum scrolling style ease of when touch event ends
• [ ] Find out how to write unit tests (can Playwright do this?)