diff --git a/package.json b/package.json index d069057..89f693d 100755 --- a/package.json +++ b/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", diff --git a/readme.md b/readme.md index b985d82..e6f27ee 100755 --- a/readme.md +++ b/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: diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue index cacdeea..e8d9a2c 100644 --- a/src/components/calendar/Calendar.vue +++ b/src/components/calendar/Calendar.vue @@ -44,6 +44,7 @@ :calendar-locale="calendarLocale" :calendar-timezone="calendarTimezone" :prevent-event-detail="preventEventDetail" + :allow-editing="allowEditing" /> @@ -60,6 +61,7 @@ :calendar-locale="calendarLocale" :calendar-timezone="calendarTimezone" :prevent-event-detail="preventEventDetail" + :allow-editing="allowEditing" /> @@ -76,6 +78,7 @@ :calendar-locale="calendarLocale" :calendar-timezone="calendarTimezone" :prevent-event-detail="preventEventDetail" + :allow-editing="allowEditing" /> @@ -92,6 +95,7 @@ :calendar-locale="calendarLocale" :calendar-timezone="calendarTimezone" :prevent-event-detail="preventEventDetail" + :allow-editing="allowEditing" /> @@ -107,6 +111,7 @@ :calendar-locale="calendarLocale" :calendar-timezone="calendarTimezone" :prevent-event-detail="preventEventDetail" + :allow-editing="allowEditing" /> diff --git a/src/components/calendar/CalendarAgenda.vue b/src/components/calendar/CalendarAgenda.vue index a47a618..73c7f00 100755 --- a/src/components/calendar/CalendarAgenda.vue +++ b/src/components/calendar/CalendarAgenda.vue @@ -56,6 +56,7 @@ :event-ref="eventRef" :calendar-locale="calendarLocale" :calendar-timezone="calendarTimezone" + :allow-editing="allowEditing" /> @@ -131,6 +132,7 @@ v-if="!preventEventDetail" :event-object="eventDetailEventObject" :event-ref="eventRef" + :allow-editing="allowEditing" /> diff --git a/src/components/calendar/CalendarAgendaEvent.vue b/src/components/calendar/CalendarAgendaEvent.vue index 10d78d6..00f4884 100755 --- a/src/components/calendar/CalendarAgendaEvent.vue +++ b/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) } diff --git a/src/components/calendar/CalendarDayColumn.vue b/src/components/calendar/CalendarDayColumn.vue index 92dea17..879d5ee 100755 --- a/src/components/calendar/CalendarDayColumn.vue +++ b/src/components/calendar/CalendarDayColumn.vue @@ -24,6 +24,7 @@ :calendar-locale="calendarLocale" :calendar-timezone="calendarTimezone" :prevent-event-detail="preventEventDetail" + :allow-editing="allowEditing" /> @@ -70,6 +71,10 @@ calendarTimezone: { type: String, default: () => { return DateTime.local().zoneName } + }, + allowEditing: { + type: Boolean, + default: false } }, components: { diff --git a/src/components/calendar/CalendarEvent.vue b/src/components/calendar/CalendarEvent.vue index 537a80c..7232ebf 100755 --- a/src/components/calendar/CalendarEvent.vue +++ b/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) } diff --git a/src/components/calendar/CalendarEventDetail.vue b/src/components/calendar/CalendarEventDetail.vue index 11f8050..acfb703 100644 --- a/src/components/calendar/CalendarEventDetail.vue +++ b/src/components/calendar/CalendarEventDetail.vue @@ -1,6 +1,11 @@ @@ -91,6 +92,7 @@ :calendar-locale="calendarLocale" :calendar-timezone="calendarTimezone" :event-ref="eventRef" + :allow-editing="allowEditing" /> diff --git a/src/components/calendar/CalendarMultiDay.vue b/src/components/calendar/CalendarMultiDay.vue index 52d5ee4..9303a51 100644 --- a/src/components/calendar/CalendarMultiDay.vue +++ b/src/components/calendar/CalendarMultiDay.vue @@ -68,6 +68,7 @@ :prevent-event-detail="preventEventDetail" :calendar-locale="calendarLocale" :calendar-timezone="calendarTimezone" + :allow-editing="allowEditing" /> @@ -82,6 +83,7 @@ :event-ref="eventRef" :calendar-locale="calendarLocale" :calendar-timezone="calendarTimezone" + :allow-editing="allowEditing" /> diff --git a/src/components/calendar/mixins/CalendarEventMixin.js b/src/components/calendar/mixins/CalendarEventMixin.js index e371077..4472778 100644 --- a/src/components/calendar/mixins/CalendarEventMixin.js +++ b/src/components/calendar/mixins/CalendarEventMixin.js @@ -14,9 +14,6 @@ export default { computed: {}, methods: { - stripObject: function (thisObj) { - return JSON.parse(JSON.stringify(thisObj)) - }, formatToSqlDate: function (dateObject) { return this.makeDT(dateObject).toISODate() }, @@ -129,8 +126,11 @@ export default { // start date thisEvent.start['dateObject'] = DateTime.fromISO(thisEvent.start.dateTime) if (dashHas(thisEvent.start, 'timeZone')) { + // convert to local timezone thisEvent.start.dateObject = thisEvent.start.dateObject .setZone(thisEvent.start.timeZone, { keepLocalTime: true }) + .toLocal() + delete thisEvent.start.timeZone thisEvent.start.dateTime = thisEvent.start.dateObject.toISO() // fix time zone } thisEvent.start.dateObject = this.moveToDisplayZone( @@ -139,8 +139,11 @@ export default { // end date thisEvent.end['dateObject'] = DateTime.fromISO(thisEvent.end.dateTime) if (dashHas(thisEvent.end, 'timeZone')) { + // convert to local timezone thisEvent.end.dateObject = thisEvent.end.dateObject .setZone(thisEvent.end.timeZone, { keepLocalTime: true }) + .toLocal() + delete thisEvent.end.timeZone thisEvent.end.dateTime = thisEvent.end.dateObject.toISO() // fix time zone } thisEvent.end.dateObject = this.moveToDisplayZone( diff --git a/src/components/calendar/mixins/CalendarParentComponentMixin.js b/src/components/calendar/mixins/CalendarParentComponentMixin.js index f3f9a07..17cf912 100644 --- a/src/components/calendar/mixins/CalendarParentComponentMixin.js +++ b/src/components/calendar/mixins/CalendarParentComponentMixin.js @@ -32,6 +32,10 @@ export default { sundayFirstDayOfWeek: { type: Boolean, default: false + }, + allowEditing: { + type: Boolean, + default: false } }, mounted () {}