├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── logo.png
    │   ├── cal-screen.JPG
    │   └── logo.svg
    ├── plugins
    │   └── vuetify.js
    ├── store.js
    ├── App.vue
    ├── main.js
    └── components
    │   └── Calendar.vue
├── .gitignore
├── package.json
└── README.md


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsfanatik/vuestacks-calendar-vue-firebase/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsfanatik/vuestacks-calendar-vue-firebase/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/cal-screen.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsfanatik/vuestacks-calendar-vue-firebase/HEAD/src/assets/cal-screen.JPG


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuetify from 'vuetify/lib';
 3 | 
 4 | Vue.use(Vuetify);
 5 | 
 6 | export default new Vuetify({
 7 |   icons: {
 8 |     iconfont: 'mdi',
 9 |   },
10 | });
11 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 | 
 9 |   },
10 |   mutations: {
11 | 
12 |   },
13 |   actions: {
14 | 
15 |   }
16 | })
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-content>
 4 |       <Calendar/>
 5 |     </v-content>
 6 |   </v-app>
 7 | </template>
 8 | 
 9 | <script>
10 | import Calendar from './components/Calendar';
11 | 
12 | export default {
13 |   name: 'App',
14 |   components: {
15 |     Calendar,
16 |   },
17 |   data: () => ({
18 |     //
19 |   }),
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import vuetify from './plugins/vuetify';
 4 | import firebase from "firebase";
 5 | import VueTextareaAutosize from 'vue-textarea-autosize'
 6 | 
 7 | Vue.use(VueTextareaAutosize)
 8 | 
 9 | Vue.config.productionTip = false
10 | 
11 | firebase.initializeApp({
12 |   apiKey: "",
13 |   authDomain: "",
14 |   databaseURL: "",
15 |   projectId: "",
16 |   storageBucket: "",
17 |   messagingSenderId: "",
18 |   appId: ""
19 | });
20 | 
21 | export const db = firebase.firestore();
22 | 
23 | new Vue({
24 |   vuetify,
25 |   render: h => h(App)
26 | }).$mount('#app')
27 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vuestacks-cal</title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but vuestacks-cal doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuestacks-cal",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^2.6.5",
12 |     "firebase": "^6.5.0",
13 |     "vue": "^2.6.10",
14 |     "vue-moment": "^4.0.0",
15 |     "vue-textarea-autosize": "^1.0.4",
16 |     "vuetify": "^2.0.11",
17 |     "vuex": "^3.0.1"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "^3.11.0",
21 |     "@vue/cli-plugin-eslint": "^3.11.0",
22 |     "@vue/cli-service": "^3.11.0",
23 |     "babel-eslint": "^10.0.1",
24 |     "eslint": "^5.16.0",
25 |     "eslint-plugin-vue": "^5.0.0",
26 |     "node-sass": "^4.9.0",
27 |     "sass": "^1.17.4",
28 |     "sass-loader": "^7.1.0",
29 |     "vue-cli-plugin-vuetify": "^0.6.3",
30 |     "vue-template-compiler": "^2.6.10",
31 |     "vuetify-loader": "^1.2.2"
32 |   },
33 |   "eslintConfig": {
34 |     "root": true,
35 |     "env": {
36 |       "node": true
37 |     },
38 |     "extends": [
39 |       "plugin:vue/essential",
40 |       "eslint:recommended"
41 |     ],
42 |     "rules": {},
43 |     "parserOptions": {
44 |       "parser": "babel-eslint"
45 |     }
46 |   },
47 |   "postcss": {
48 |     "plugins": {
49 |       "autoprefixer": {}
50 |     }
51 |   },
52 |   "browserslist": [
53 |     "> 1%",
54 |     "last 2 versions"
55 |   ]
56 | }
57 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vuestacks-calendar-vue-firebase
 2 | 
 3 | ![alt text](https://raw.githubusercontent.com/jsfanatik/vuestacks-calendar-vue-firebase/master/src/assets/cal-screen.JPG)
 4 | 
 5 | ## Project setup
 6 | ```
 7 | npm install
 8 | ```
 9 | 
10 | ### Compiles and hot-reloads for development
11 | ```
12 | npm run serve
13 | ```
14 | 
15 | ### Compiles and minifies for production
16 | ```
17 | npm run build
18 | ```
19 | 
20 | ### Run your tests
21 | ```
22 | npm run test
23 | ```
24 | 
25 | ### Lints and fixes files
26 | ```
27 | npm run lint
28 | ```
29 | 
30 | ### Customize configuration
31 | See [Configuration Reference](https://cli.vuejs.org/config/).
32 | 
33 | ### Overview
34 | 
35 | The VueStacks calendar demo utilizes general Vue.js + Firebase CRUD functions to enable creating, updating, and deleting of events in a modified Vuetify calendar component (see the following to learn more about Vuetify calendars: https://vuetifyjs.com/en/components/calendars).
36 | 
37 | See full component in ```components/Calendar.vue```
38 | 
39 | ### Addition Dependencies
40 | 
41 | This demo uses ```vue-textarea-autosize``` as a dependency. See the following for installation instructions: https://www.npmjs.com/package/vue-textarea-autosize
42 | 
43 | ### Setting Up Firebase
44 | 
45 | 1. Set up a new project in Firebase with Database enabled.
46 | 2. Implement the following Firebase SDK scripts in main.js:
47 | 
48 | ```
49 | import firebase from "firebase";
50 | firebase.initializeApp({
51 |   apiKey: "",
52 |   authDomain: "",
53 |   databaseURL: "",
54 |   projectId: "",
55 |   storageBucket: "",
56 |   messagingSenderId: "",
57 |   appId: ""
58 | });
59 | 
60 | export const db = firebase.firestore();
61 | ```
62 | Enjoy the demo! Submit an issue if you see anything that could be improved!
63 | 


--------------------------------------------------------------------------------
/src/components/Calendar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-row class="fill-height">
  3 |     <v-col>
  4 |       <v-sheet height="64">
  5 |         <v-toolbar flat color="white">
  6 |           <v-btn color="primary" dark @click.stop="dialog = true">
  7 |             New Event
  8 |           </v-btn>
  9 |           <v-btn outlined class="mr-4" @click="setToday">
 10 |             Today
 11 |           </v-btn>
 12 |           <v-btn fab text small @click="prev">
 13 |             <v-icon small>mdi-chevron-left</v-icon>
 14 |           </v-btn>
 15 |           <v-btn fab text small @click="next">
 16 |             <v-icon small>mdi-chevron-right</v-icon>
 17 |           </v-btn>
 18 |           <v-toolbar-title>{{ title }}</v-toolbar-title>
 19 |           <div class="flex-grow-1"></div>
 20 |           <v-menu bottom right>
 21 |             <template v-slot:activator="{ on }">
 22 |               <v-btn outlined v-on="on">
 23 |                 <span>{{ typeToLabel[type] }}</span>
 24 |                 <v-icon right>mdi-menu-down</v-icon>
 25 |               </v-btn>
 26 |             </template>
 27 |             <v-list>
 28 |               <v-list-item @click="type = 'day'">
 29 |                 <v-list-item-title>Day</v-list-item-title>
 30 |               </v-list-item>
 31 |               <v-list-item @click="type = 'week'">
 32 |                 <v-list-item-title>Week</v-list-item-title>
 33 |               </v-list-item>
 34 |               <v-list-item @click="type = 'month'">
 35 |                 <v-list-item-title>Month</v-list-item-title>
 36 |               </v-list-item>
 37 |               <v-list-item @click="type = '4day'">
 38 |                 <v-list-item-title>4 days</v-list-item-title>
 39 |               </v-list-item>
 40 |             </v-list>
 41 |           </v-menu>
 42 |         </v-toolbar>
 43 |       </v-sheet>
 44 | 
 45 |       <v-dialog v-model="dialog" max-width="500">
 46 |         <v-card>
 47 |           <v-container>
 48 |             <v-form @submit.prevent="addEvent">
 49 |               <v-text-field v-model="name" type="text" label="event name (required)"></v-text-field>
 50 |               <v-text-field v-model="details" type="text" label="detail"></v-text-field>
 51 |               <v-text-field v-model="start" type="date" label="start (required)"></v-text-field>
 52 |               <v-text-field v-model="end" type="date" label="end (required)"></v-text-field>
 53 |               <v-text-field v-model="color" type="color" label="color (click to open color menu)"></v-text-field>
 54 |               <v-btn type="submit" color="primary" class="mr-4" @click.stop="dialog = false">
 55 |                 create event
 56 |               </v-btn>
 57 |             </v-form>
 58 |           </v-container>
 59 |         </v-card>
 60 |       </v-dialog>
 61 | 
 62 |       <v-dialog v-model="dialogDate" max-width="500">
 63 |         <v-card>
 64 |           <v-container>
 65 |             <v-form @submit.prevent="addEvent">
 66 |               <v-text-field v-model="name" type="text" label="event name (required)"></v-text-field>
 67 |               <v-text-field v-model="details" type="text" label="detail"></v-text-field>
 68 |               <v-text-field v-model="start" type="date" label="start (required)"></v-text-field>
 69 |               <v-text-field v-model="end" type="date" label="end (required)"></v-text-field>
 70 |               <v-text-field v-model="color" type="color" label="color (click to open color menu)"></v-text-field>
 71 |               <v-btn type="submit" color="primary" class="mr-4" @click.stop="dialog = false">
 72 |                 create event
 73 |               </v-btn>
 74 |             </v-form>
 75 |           </v-container>
 76 |         </v-card>
 77 |       </v-dialog>
 78 | 
 79 | <v-sheet height="600">
 80 |   <v-calendar
 81 |   ref="calendar"
 82 |   v-model="focus"
 83 |   color="primary"
 84 |   :events="events"
 85 |   :event-color="getEventColor"
 86 |   :event-margin-bottom="3"
 87 |   :now="today"
 88 |   :type="type"
 89 |   @click:event="showEvent"
 90 |   @click:more="viewDay"
 91 |   @click:date="setDialogDate"
 92 |   @change="updateRange"
 93 |   ></v-calendar>
 94 |   <v-menu
 95 |   v-model="selectedOpen"
 96 |   :close-on-content-click="false"
 97 |   :activator="selectedElement"
 98 |   full-width
 99 |   offset-x
100 |   >
101 |   <v-card color="grey lighten-4" :width="350" flat>
102 |     <v-toolbar :color="selectedEvent.color" dark>
103 |       <v-btn @click="deleteEvent(selectedEvent.id)" icon>
104 |         <v-icon>mdi-delete</v-icon>
105 |       </v-btn>
106 |       <v-toolbar-title v-html="selectedEvent.name"></v-toolbar-title>
107 |       <div class="flex-grow-1"></div>
108 |     </v-toolbar>
109 | 
110 |     <v-card-text>
111 |       <form v-if="currentlyEditing !== selectedEvent.id">
112 |         {{ selectedEvent.details }}
113 |       </form>
114 |       <form v-else>
115 |         <textarea-autosize
116 |         v-model="selectedEvent.details"
117 |         type="text"
118 |         style="width: 100%"
119 |         :min-height="100"
120 |         placeholder="add note">
121 |       </textarea-autosize>
122 |     </form>
123 |   </v-card-text>
124 | 
125 |   <v-card-actions>
126 |     <v-btn text color="secondary" @click="selectedOpen = false">
127 |       close
128 |     </v-btn>
129 |     <v-btn v-if="currentlyEditing !== selectedEvent.id" text @click.prevent="editEvent(selectedEvent)">
130 |       edit
131 |     </v-btn>
132 |     <v-btn text v-else type="submit" @click.prevent="updateEvent(selectedEvent)">
133 |       Save
134 |     </v-btn>
135 |   </v-card-actions>
136 | </v-card>
137 | </v-menu>
138 | </v-sheet>
139 | </v-col>
140 | </v-row>
141 | </template>
142 | 
143 | <script>
144 | import { db } from '@/main'
145 | export default {
146 |   data: () => ({
147 |     today: new Date().toISOString().substr(0, 10),
148 |     focus: new Date().toISOString().substr(0, 10),
149 |     type: 'month',
150 |     typeToLabel: {
151 |       month: 'Month',
152 |       week: 'Week',
153 |       day: 'Day',
154 |       '4day': '4 Days',
155 |     },
156 |     name: null,
157 |     details: null,
158 |     start: null,
159 |     end: null,
160 |     color: '#1976D2', // default event color
161 |     currentlyEditing: null,
162 |     selectedEvent: {},
163 |     selectedElement: null,
164 |     selectedOpen: false,
165 |     events: [],
166 |     dialog: false,
167 |     dialogDate: false
168 |   }),
169 |   mounted () {
170 |     this.getEvents()
171 |   },
172 |   computed: {
173 |     title () {
174 |       const { start, end } = this
175 |       if (!start || !end) {
176 |         return ''
177 |       }
178 |       const startMonth = this.monthFormatter(start)
179 |       const endMonth = this.monthFormatter(end)
180 |       const suffixMonth = startMonth === endMonth ? '' : endMonth
181 |       const startYear = start.year
182 |       const endYear = end.year
183 |       const suffixYear = startYear === endYear ? '' : endYear
184 |       const startDay = start.day + this.nth(start.day)
185 |       const endDay = end.day + this.nth(end.day)
186 |       switch (this.type) {
187 |         case 'month':
188 |         return `${startMonth} ${startYear}`
189 |         case 'week':
190 |         case '4day':
191 |         return `${startMonth} ${startDay} ${startYear} - ${suffixMonth} ${endDay} ${suffixYear}`
192 |         case 'day':
193 |         return `${startMonth} ${startDay} ${startYear}`
194 |       }
195 |       return ''
196 |     },
197 |     monthFormatter () {
198 |       return this.$refs.calendar.getFormatter({
199 |         timeZone: 'UTC', month: 'long',
200 |       })
201 |     }
202 |   },
203 |   methods: {
204 |     async getEvents () {
205 |       let snapshot = await db.collection('calEvent').get()
206 |       const events = []
207 |       snapshot.forEach(doc => {
208 |         let appData = doc.data()
209 |         appData.id = doc.id
210 |         events.push(appData)
211 |       })
212 |       this.events = events
213 |     },
214 |     setDialogDate( { date }) {
215 |       this.dialogDate = true
216 |       this.focus = date
217 |     },
218 |     viewDay ({ date }) {
219 |       this.focus = date
220 |       this.type = 'day'
221 |     },
222 |     getEventColor (event) {
223 |       return event.color
224 |     },
225 |     setToday () {
226 |       this.focus = this.today
227 |     },
228 |     prev () {
229 |       this.$refs.calendar.prev()
230 |     },
231 |     next () {
232 |       this.$refs.calendar.next()
233 |     },
234 |     async addEvent () {
235 |       if (this.name && this.start && this.end) {
236 |         await db.collection("calEvent").add({
237 |           name: this.name,
238 |           details: this.details,
239 |           start: this.start,
240 |           end: this.end,
241 |           color: this.color
242 |         })
243 |         this.getEvents()
244 |         this.name = '',
245 |         this.details = '',
246 |         this.start = '',
247 |         this.end = '',
248 |         this.color = ''
249 |       } else {
250 |         alert('You must enter event name, start, and end time')
251 |       }
252 |     },
253 |     editEvent (ev) {
254 |       this.currentlyEditing = ev.id
255 |     },
256 |     async updateEvent (ev) {
257 |       await db.collection('calEvent').doc(this.currentlyEditing).update({
258 |         details: ev.details
259 |       })
260 |       this.selectedOpen = false,
261 |       this.currentlyEditing = null
262 |     },
263 |     async deleteEvent (ev) {
264 |       await db.collection("calEvent").doc(ev).delete()
265 |       this.selectedOpen = false,
266 |       this.getEvents()
267 |     },
268 |     showEvent ({ nativeEvent, event }) {
269 |       const open = () => {
270 |         this.selectedEvent = event
271 |         this.selectedElement = nativeEvent.target
272 |         setTimeout(() => this.selectedOpen = true, 10)
273 |       }
274 |       if (this.selectedOpen) {
275 |         this.selectedOpen = false
276 |         setTimeout(open, 10)
277 |       } else {
278 |         open()
279 |       }
280 |       nativeEvent.stopPropagation()
281 |     },
282 |     updateRange ({ start, end }) {
283 |       this.start = start
284 |       this.end = end
285 |     },
286 |     nth (d) {
287 |       return d > 3 && d < 21
288 |       ? 'th'
289 |       : ['th', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th'][d % 10]
290 |     }
291 |   }
292 | }
293 | </script>
294 | 


--------------------------------------------------------------------------------