use allow-editing throughout; fix time zone handling; update version …

…to v0.3 and docs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-calendar",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "A full display calendar for the Quasar vue.js framework",
   "keywords": [
     "vue",

readme.md

@@ -46,6 +46,7 @@ Or you can pass in parameters to customize
   :sunday-first-day-of-week="true"
   calendar-locale="fr"
   calendar-timezone="Europe/Paris"
+  :allow-editing="false"
 />
 ```
 
@@ -107,6 +108,10 @@ The event data format is meant to be a subset of the [Google Calendar v3 API](ht
 
 Each object needs to have a unique ID. The date time should be in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. A value in the optional `timeZone` field will override the timezone.
 
+## Calendar event referencing
+
+Each calendar is given a random reference string so that we can distinguish between multiple calendars on a page. You can override this and pass in a string so that you can listen for events from that calendar. In this case, if we pass in the string `MYCALENDAR`, the Vue.js event `click-event-MYCALENDAR` would fire on the [global event bus](http://quasar-framework.org/components/global-event-bus.html) when a calendar event is clicked on. 
+
 ## Custom event detail handling
 
 By default we use our own event detail popup when an event is clicked. You can override this and use your own by doing a few things:
@@ -115,8 +120,6 @@ By default we use our own event detail popup when an event is clicked. You can o
 * Prevent the default event detail from showing up
 * Listen for a click event to trigger your own detail content
 
-Each calendar is given a random reference string so that we can distinguish between multiple calendars on a page. You can override this and pass in a string so that you can listen for events from that calendar. In this case, if we pass in the string `MYCALENDAR`, the Vue.js event `click-event-MYCALENDAR` would fire on the [global event bus](http://quasar-framework.org/components/global-event-bus.html) when a calendar event is clicked on. 
-
 So to implement, be sure to have `prevent-event-detail` and `event-ref` set when you embed a calendar component:
 
 ```html
@@ -138,6 +141,19 @@ this.$root.$on(
 )
 ```
 
+## Event editing
+
+Starting with v0.3 we are setting up the framework to allow for editing individual events. By default this functionality is turned off, but you can pass a value of `true` into the `allow-editing` parameter on one of the main calendar components. The functionality if very limited to start but we expect to be adding more features in the near future.
+
+When an event is edited, a global event bus message in the format of `update-event-MYCALENDAR` is sent with the updated event information as the payload. You can listen for this to trigger a call to whatever API you are using for calendar communication. Right now when an an update is detected the passed in `events` array is updated and the array is parsed again.
+
+Only a subset of fields are currently editable:
+
+* Start / end time and date
+* Is an all-day event
+* Summary / title
+* Description
+
 ## Individual Vue components
 
 The usable components of `Calendar`, `CalendarMonth`, `CalendarMultiDay` and `CalendarAgenda` share the following properties:
@@ -150,6 +166,7 @@ The usable components of `Calendar`, `CalendarMonth`, `CalendarMultiDay` and `Ca
 | `calendar-timezone` | String | Manually set the timezone for the calendar. Many strings can be passed in including `UTC` or any valid [IANA zone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). This is better explained [here](https://moment.github.io/luxon/docs/manual/zones.html). |
 | `event-ref` | String | Give the calendar component a custom name so that events triggered on the global event bus can be watched. |
 | `prevent-event-detail` | Boolean | Prevent the default event detail popup from appearing when an event is clicked in a calendar. |
+| `allow-editing` | Boolean | Allows for individual events to be edited. See the editing section. |
 
 In addition, each individual components have the following properties:
 

src/components/calendar/Calendar.vue

@@ -44,6 +44,7 @@
           :calendar-locale="calendarLocale"
           :calendar-timezone="calendarTimezone"
           :prevent-event-detail="preventEventDetail"
+          :allow-editing="allowEditing"
         />
       </q-tab-pane>
       <q-tab-pane name="tab-week-component" class="calendar-tab-pane-week">
@@ -60,6 +61,7 @@
           :calendar-locale="calendarLocale"
           :calendar-timezone="calendarTimezone"
           :prevent-event-detail="preventEventDetail"
+          :allow-editing="allowEditing"
         />
       </q-tab-pane>
       <q-tab-pane name="tab-days-component" class="calendar-tab-pane-week">
@@ -76,6 +78,7 @@
           :calendar-locale="calendarLocale"
           :calendar-timezone="calendarTimezone"
           :prevent-event-detail="preventEventDetail"
+          :allow-editing="allowEditing"
         />
       </q-tab-pane>
       <q-tab-pane name="tab-single-day-component" class="calendar-tab-pane-week">
@@ -92,6 +95,7 @@
           :calendar-locale="calendarLocale"
           :calendar-timezone="calendarTimezone"
           :prevent-event-detail="preventEventDetail"
+          :allow-editing="allowEditing"
         />
       </q-tab-pane>
       <q-tab-pane name="tab-agenda" class="calendar-tab-pane-agenda">
@@ -107,6 +111,7 @@
           :calendar-locale="calendarLocale"
           :calendar-timezone="calendarTimezone"
           :prevent-event-detail="preventEventDetail"
+          :allow-editing="allowEditing"
         />
       </q-tab-pane>
 

src/components/calendar/CalendarAgenda.vue

@@ -56,6 +56,7 @@
                 :event-ref="eventRef"
                 :calendar-locale="calendarLocale"
                 :calendar-timezone="calendarTimezone"
+                :allow-editing="allowEditing"
               />
             </div>
           </div>
@@ -131,6 +132,7 @@
       v-if="!preventEventDetail"
       :event-object="eventDetailEventObject"
       :event-ref="eventRef"
+      :allow-editing="allowEditing"
     />
 
   </div>

src/components/calendar/CalendarAgendaEvent.vue

@@ -85,6 +85,10 @@
       calendarTimezone: {
         type: String,
         default: () => { return DateTime.local().zoneName }
+      },
+      allowEditing: {
+        type: Boolean,
+        default: false
       }
     },
     components: {
@@ -141,6 +145,7 @@
         return returnString
       },
       handleClick: function (e) {
+        this.eventObject.allowEditing = this.allowEditing
         this.$emit('click', this.eventObject)
         this.triggerEventClick(this.eventObject, this.eventRef)
       }

src/components/calendar/CalendarDayColumn.vue

@@ -24,6 +24,7 @@
         :calendar-locale="calendarLocale"
         :calendar-timezone="calendarTimezone"
         :prevent-event-detail="preventEventDetail"
+        :allow-editing="allowEditing"
       />
     </div>
 
@@ -70,6 +71,10 @@
       calendarTimezone: {
         type: String,
         default: () => { return DateTime.local().zoneName }
+      },
+      allowEditing: {
+        type: Boolean,
+        default: false
       }
     },
     components: {

src/components/calendar/CalendarEvent.vue

@@ -67,6 +67,10 @@
       calendarLocale: {
         type: String,
         default: () => { return DateTime.local().locale }
+      },
+      allowEditing: {
+        type: Boolean,
+        default: false
       }
     },
     components: {
@@ -159,6 +163,7 @@
         return this.eventObject.start.isAllDay
       },
       handleClick: function (e) {
+        this.eventObject.allowEditing = this.allowEditing
         this.$emit('click', this.eventObject)
         this.triggerEventClick(this.eventObject, this.eventRef)
       }