The calendar-vanilla from smenjas

Allow events to be more granular

Right now, events are full days. Allow setting start and end times, with at least a granularity of 15 minutes, and no smaller than 1 minute.

Chrome doesn't accurately detect the language/locale.

I found this issue using Chrome 109.0.5414.87. See #2.

I tried:

<html lang="en-us">
<meta http-equiv="Content-Language" content="en">

See: stack overflow: Why does Chrome incorrectly determine page is in a different language and offer to translate?

Suggest/autocomplete CSS color names for categories.

Right now you have to type out the whole name.

Mark events completed from the day view.

Navigate by month, forward or backward.

Add a way to navigate forward or backward.

Suggestions:

A button or link to go back or forward one month at a time.
Bonus: A way to go to any month.

Show dates for adjacent months.

The calendar only shows dates for the current month.

Show dates for adjacent months in the empty squares.
Maybe use a different color/shade.

Show a daily view.

Clicking on a date in the monthly view should show that date, with times of day.
Allow navigating back to the monthly view.
Bonus: Allow navigating to the weekly view. See #10.
Allow navigating forward or backward to consecutive days. Is scrolling sideways a good approach, or too easy to do accidentally?
Bonus: Consider navigating to an arbitrary day. Not necessary, but might be nice to have if it's intuitive.

Allow adding, editing, and deleting events.

So far, the calendar is a static entity. It only shows dates, but doesn't allow scheduling. Let's change that.

Scope: For the first iteration, allow assigning events to a given day. Assigning start and end times with finer granularity could be something to save for later. It's more important to get events addition, editing, and deletion working than it is to assign start and end times.

We don't need to make it fancy yet. We don't have to allow marking them complete, or inviting other people, or allowing multiple fields for each event. Just a title and a date is sufficient.

Keep in mind we want to show events on each of the views that exist so far:

The monthly view must show at least whether any events exist that day.
Ideally, #10 & #11 would be implemented already, so we can show event details on those views.
If there's a yearly view, we might just mark dates with a different shade or color if any events exist that day.

Day nav form glitch

If you are viewing a day (say January 31st), and you select a month from the select box that has fewer days (say February), you will navigate to a day in the month following the month selected (in our example, March 2nd or 3rd, depending on whether it's a leap year).

Identify the current day.

Somehow differentiate the current day from the rest.

Improve color selection

It would be nice to see the category color before submitting the form.

Optimize calendar views for printing

On screens, we don't need a header, because the nav form shows the current date.

When printing a calendar view, show the date as a header, and hide the nav section.

Confirm event deletion

Improve input validation when entering category color by CSS name

Right now, the category color input indicates that valid CSS color names are invalid inputs.

Simplify CSS

The current CSS is redundant and overly specific.

Automate testing

Show a weekly view.

Allow some way to see one week at a time, with more resolution (i.e. times of day).
Allow a way to return to the monthly view.
Allow navigating forward or backward one week at a time. Scrolling may be a good way to go, or it may be too easy to do accidentally: it's up to you.
Bonus: Allow navigating to an arbitrary week, not just the week adjacent to the one shown. This is not necessary, but may be nice to have.

Generate month and day names by locale.

Show the appropriate month and day names for a given locale, starting with "en-us" (US English).

See:

Test it with other locales, for example "de" (German) & "es" (Spanish).

Improve mobile layout

Show a calendar for the current month.

Using vanilla JavaScript (no 3rd party libraries or frameworks), build a calendar showing the current month.

Show the month and year.
Each week is a row.
Each column shows a weekday, with a header row.
Show dates in the correct place.
Bonus: support dark mode.

Keep it simple for now: nothing fancy.

Navigate by year, forward or backward.

Add a way to navigate forward or backward, by a whole year. For example, from January 2023 to January 2022 or January 2024.

Suggestions:

A button or link to go back or forward one year at a time.
Bonus: A way to go to any year.

Confirm category deletion

Do we want to allow a category to be deleted if it has events?

Title attributes don't appear when hovering.

I found this issue using Chrome 109.0.5414.87. See #2.

Add event categories, with a color for each.

This feature depends on #12.

I'd like to be able to categorize events, and assign colors to categories.

It would be nice to have some categories defined by default. For example:

Exercise, green
Study, red
Music, blue
Reading, yellow
Fun, orange
Chores, purple
Work, black

There are issues with editing categories if they have events assigned to them already:

If we edit a category with events, we should ask whether to unassign those events.
If we change a category color to match another color, should we warn about that?

Other considerations:

Let's limit which colors are available for now. It's just too easy to pick unreadable color combos.
Support both light and dark modes, with dark versions of colors for light mode, and light versions of colors for dark mode.
Allow black/white as a color, with black in light mode and white in dark mode to represent the same category? (Let's call this "inverse".)
Should we allow white in light mode and black in dark mode in addition to the "inverse" scheme described above? (Let's call this "colorless".)
See #13.

Allow marking events as completed.

This feature depends on #12.

Consider implementing this as empty/filled squares on the monthly view.
On the weekly or daily views, maybe it's a checkbox.
On the yearly view, maybe it's different shades.

Fix categoryIDs in events when deleting a category

Because categories are stored in an array, categoryIDs are not stable. When we delete a category, all greater categoryIDs decrement automatically. Right now, when we delete a category, each event's categoryID stays the same, so for some events the category changes and for any event with the greatest categoryID, the category is invalid.

Set goals (e.g. exercise twice a week).

This feature depends on #14.

For each category, allow goals to be set.

Allow setting a goal of x events per category, per unit time. For example, exercise twice a week. You should be able to set the goal for any number of times (from one to several dozen at least), or any period of time (per day, per week, per month, or per year). For now, we don't need to allow arbitrary start and end times (for example, Friday through Thursday, instead of Sunday through Saturday), but we can consider that for the future.

We want to allow more complicated goals. For example with chores, we may want to empty the litter box twice a week, take the trash out once a week, do dishes every other day, do laundry every 3 days, and so on. We can handle this by requiring all tasks in a given category get done each day/week/month/year, and just create tasks as needed.

When selecting a month for an event, update the number of days to match.

For example, when I'm adding an event for February 2023, and I select March 2023, the number of days is limited to 28, although it should show 31 days.

Show a yearly view.

Show a whole year of monthly calendars at one time. Each month should be much smaller than the monthly view, so you can see the whole year on one screen.

It would be nice to still see individual days, and which day the month begins and ends on.
Whether you show individual dates is up to you.
Whether each month is displayed separately, or whether they touch one another is up to you, but you must be able to clearly differentiate between months.
You should adjust the layout for different screen sizes and orientations. You shouldn't have to scroll to see every month of the year.
Clicking on a month should take you to the monthly view for that month.
It would be nice navigate to other years. See #8.

smenjas / calendar-vanilla Goto Github PK

calendar-vanilla's People

Contributors

Watchers

calendar-vanilla's Issues

Recommend Projects

Recommend Topics

Recommend Org