Skip to content

Prototype for a web calendar built with Vue 3, Vite, Pinia, and TailwindCSS, enabling event management, tag-based filtering, and light/dark mode toggling.

License

Notifications You must be signed in to change notification settings

tyronejosee/prototype_vuejs

Repository files navigation

Prototype VueJS

Deploy on Vercel

This is a Vue 3 + Vite calendar prototype.

vue-version pinia-version vite-version typescript-version tailwindcss-version date-fns-version

flowchart TD
    A[CalendarView.vue] -->|uses| B[CalendarGrid.vue]
    B -->|renders| C[DayCell.vue]
    A -->|sidebar| D[EventList.vue]
    A -->|modal| E[EventModal.vue]
    A -->|filter| F[TagFilter.vue]
    A -->|theme| G[ThemeToggle.vue]
    B -->|composable| H[useCalendar.ts]
    A -->|store| I[eventStore.ts]
    subgraph Components
        B
        C
        D
        E
        F
        G
    end
    subgraph Store & Logic
        I
        H
    end
Loading

✨ Features

  • Month grid calendar with event dots per day
  • Event creation, editing, and deletion (modal)
  • Tag filtering for events
  • Light/Dark theme toggle
  • Persistent storage (localStorage)
  • Import/Export events as JSON

⚙️ Installation

Install dependencies

pnpm install

Start the development server at http://localhost:3000/

pnpm run dev

Build the application for production.

pnpm build

Start the server in production mode.

pnpm start

Run the linter to check the code quality.

pnpm lint

⚖️ License

This project is under the MIT License.

Enjoy! 🎉

About

Prototype for a web calendar built with Vue 3, Vite, Pinia, and TailwindCSS, enabling event management, tag-based filtering, and light/dark mode toggling.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published