Vue Scheduler

├── .eslintrc.js ├── .gitignore ├── .prettierrc.json ├── .vscode ├── extensions.json └── settings.json ├── README.md ├── images ├── logo.svg └── screenshot.png ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── github.svg └── vite.svg ├── src ├── App.vue ├── assets │ └── style.css ├── components │ ├── VueScheduler.vue │ └── VueSchedulerV2.vue ├── main.ts ├── types │ └── VueScheduler.ts └── vite-env.d.ts ├── tailwind.config.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: [ 7 | "plugin:vue/vue3-essential", 8 | "eslint:recommended", 9 | "@vue/typescript/recommended", 10 | ], 11 | parserOptions: { 12 | ecmaVersion: 2020, 13 | }, 14 | rules: { 15 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 16 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", 17 | "vue/multi-word-component-names": "off", 18 | "vue/no-reserved-component-names": [ 19 | "error", 20 | { 21 | disallowVueBuiltInComponents: false, 22 | disallowVue3BuiltInComponents: false, 23 | }, 24 | ], 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | !.vscode/settings.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.customData": [".vscode/tailwind.json"], 3 | "editor.formatOnSave": true, 4 | "editor.codeActionsOnSave": { 5 | "source.fixAll.eslint": "explicit" 6 | }, 7 | "vetur.validation.template": false, 8 | "[vue]": { 9 | "editor.defaultFormatter": "esbenp.prettier-vscode" 10 | }, 11 | "[javascript]": { 12 | "editor.defaultFormatter": "esbenp.prettier-vscode" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 | 5 | 6 | 7 |

Vue3 Scheduler

8 | 9 |

10 | Essential Timelines Made Easy: Vue Timeline Scheduler for Your Basic Needs. 11 |
12 |
13 | Explore the docs » 14 |
15 |
16 | View Demo 17 | . 18 | Report Bug 19 | . 20 | Request Feature 21 |

22 |

23 | 24 | ## Table Of Contents 25 | 26 | - [About the Project](#about-the-project) 27 | - [Features](#features) 28 | - [Getting Started](#getting-started) 29 | - [Usage](#usage) 30 | - [License](#license) 31 | 32 | ## About The Project 33 | 34 | ![Screen Shot](images/screenshot.png) 35 | 36 | Vue3 Scheduler simplifies time management in your Vue.js projects. No elaborate features or unnecessary complexity – just a straightforward tool for handling events and timelines. 37 | 38 | #### Features 39 | 40 | - Display events on a timeline with adjustable scales. 41 | - Customizable styling for events and the timeline. 42 | - Responsive design for various screen sizes. 43 | - Easily integrate with Vue.js applications. 44 | 45 | ## Getting Started 46 | 47 | This is an example of how to list things you need to use the software and how to install them. 48 | 49 | ```sh 50 | npm install npm@latest -g 51 | ``` 52 | 53 | ```sh 54 | npm run dev 55 | ``` 56 | 57 | ### 58 | 59 | ## Usage 60 | 61 | ```js 62 | 68 | 93 | 94 | ``` 95 | 96 | ```js 97 | /** 98 | * Timeline data 99 | */ 100 | const timelineData = ref([ 101 | { 102 | row: 0, 103 | background: "bg-emerald-500", 104 | text: "text-white", 105 | start: "17/02/2024 01:00", 106 | end: "17/02/2024 02:00", 107 | meta: { title: "Event 1", description: "Event 1 description" }, 108 | }, 109 | { 110 | row: 1, 111 | background: "bg-orange-500", 112 | text: "text-white", 113 | start: "17/02/2024 01:00", 114 | end: "17/02/2024 02:15", 115 | meta: { title: "Event 2", description: "Event 2 description" }, 116 | }, 117 | { 118 | row: 1, 119 | background: "bg-purple-500", 120 | text: "text-white", 121 | start: "17/02/2024 02:00", 122 | end: "17/02/2024 03:15", 123 | meta: { title: "Event 3", description: "Event 3 description" }, 124 | }, 125 | { 126 | row: 3, 127 | background: "bg-orange-500", 128 | text: "text-white", 129 | start: "17/02/2024 02:24", 130 | end: "17/02/2024 03:27", 131 | meta: { title: "Event 4", description: "Event 4 description" }, 132 | }, 133 | { 134 | row: 4, 135 | background: "bg-orange-500", 136 | text: "text-white", 137 | start: "18/02/2024 02:24", 138 | end: "18/02/2024 03:27", 139 | meta: { title: "Event 5", description: "Event 5 description" }, 140 | }, 141 | { 142 | row: 5, 143 | background: "bg-orange-500", 144 | text: "text-white", 145 | start: "18/02/2024 02:24", 146 | end: "19/02/2024 03:27", 147 | meta: { title: "Event 6", description: "Event 6 description" }, 148 | }, 149 | ]); 150 | 151 | /** 152 | * Timeline headers 153 | */ 154 | const timelineHeaders = ref(["Route", "Start time"]); 155 | 156 | /** 157 | * Generate row data 158 | */ 159 | const timelineItems = [ 160 | ["BMON-A", "08:00am"], 161 | ["BMON-B", "08:00am"], 162 | ["BMON-C", "08:00am"], 163 | ["BMON-D", "08:00am"], 164 | ["BMON-E", "08:00am"], 165 | ["BMON-F", "08:00am"], 166 | ["BMON-G", "08:00am"], 167 | ]; 168 | 169 | /** 170 | * Timeline options 171 | */ 172 | const timelineOptions = ref({ 173 | cellWidth: 50, 174 | row: { 175 | height: 80, 176 | marginTop: 4, 177 | }, 178 | scale: 0.5, 179 | start: "17/02/2024 00:00", 180 | end: "19/02/2024 23:59", 181 | }); 182 | ``` 183 | 184 | ## License 185 | 186 | Distributed under the MIT License. See [LICENSE](https://github.com/tony-nz/vue3-scheduler/blob/main/LICENSE.md) for more information. 187 | -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 61 | -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tony-nz/vue3-scheduler/d48f2e9f314d935b7ac75d6ccb92106f3c7c234d/images/screenshot.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Scheduler 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-scheduler", 3 | "private": true, 4 | "version": "0.0.1", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vue-tsc && vite build", 8 | "preview": "vite preview", 9 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src", 10 | "format": "prettier . --write" 11 | }, 12 | "dependencies": { 13 | "vue": "^3.2.47" 14 | }, 15 | "devDependencies": { 16 | "@typescript-eslint/eslint-plugin": "^5.50.0", 17 | "@typescript-eslint/parser": "^5.50.0", 18 | "@vitejs/plugin-vue": "^4.1.0", 19 | "@vue/cli-plugin-babel": "~5.0.8", 20 | "@vue/cli-plugin-eslint": "~5.0.8", 21 | "@vue/cli-plugin-typescript": "~5.0.8", 22 | "@vue/cli-service": "~5.0.8", 23 | "@vue/eslint-config-typescript": "^11.0.2", 24 | "autoprefixer": "^10.4.17", 25 | "eslint": "^8.39.0", 26 | "eslint-config-prettier": "^8.8.0", 27 | "eslint-plugin-vue": "^9.11.0", 28 | "interactjs": "^1.10.26", 29 | "postcss": "^8.4.35", 30 | "prettier": "2.8.8", 31 | "tailwindcss": "^3.4.1", 32 | "typescript": "^5.0.2", 33 | "vite": "^4.3.0", 34 | "vite-plugin-eslint": "^1.8.1", 35 | "vue-tsc": "^1.2.0" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 253 | -------------------------------------------------------------------------------- /src/assets/style.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | body { 6 | @apply bg-white; 7 | @apply items-center; 8 | @apply overflow-hidden; 9 | } -------------------------------------------------------------------------------- /src/components/VueScheduler.vue: -------------------------------------------------------------------------------- 1 | 185 | 186 | 592 | -------------------------------------------------------------------------------- /src/components/VueSchedulerV2.vue: -------------------------------------------------------------------------------- 1 | 168 | 501 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import "./assets/style.css"; 3 | import App from "./App.vue"; 4 | 5 | const app = createApp(App); 6 | 7 | app.mount("#app"); 8 | -------------------------------------------------------------------------------- /src/types/VueScheduler.ts: -------------------------------------------------------------------------------- 1 | interface TimelineItem { 2 | row: number; 3 | background: string; 4 | text: string; 5 | start: string; 6 | end: string; 7 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 8 | meta?: any; 9 | } 10 | 11 | interface TimelineRow { 12 | height: number; 13 | marginTop: number; 14 | } 15 | 16 | interface TimelineOptions { 17 | cellWidth: number; 18 | row: TimelineRow; 19 | scale: number; 20 | start: string; 21 | end: string; 22 | } 23 | 24 | export type { TimelineItem, TimelineOptions }; 25 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | important: true, 4 | content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], 5 | theme: { 6 | extend: {}, 7 | }, 8 | plugins: [], 9 | }; 10 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "node", 11 | // "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "preserve", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import eslintPlugin from "vite-plugin-eslint"; 3 | import vue from "@vitejs/plugin-vue"; 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue(), eslintPlugin()], 8 | define: { 9 | __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false, 10 | }, 11 | }); 12 | --------------------------------------------------------------------------------