| 1 | <template> | = | 1 | <template> |
| 2 | <div class="ui-block"> | 2 | <div class="ui-block"> | |
| 3 | <h3 class="ui-block-heading">vue-simple-calendar</h3> | 3 | <h3 class="ui-block-heading">vue-simple-calendar</h3> | |
| 4 | <a target="_blank" href="https://github.com/richardtallent/vue-simple-calendar" class="ui-block-description">https://github.com/richardtallent/vue-simple-calendar</a> | 4 | <a target="_blank" href="https://github.com/richardtallent/vue-simple-calendar" class="ui-block-description">https://github.com/richardtallent/vue-simple-calendar</a> | |
| 5 | 5 | |||
| 6 | <div class="no-ie10" data-name="vue-simple-calendar"></div> | 6 | <div class="no-ie10" data-name="vue-simple-calendar"></div> | |
| 7 | 7 | |||
| 8 | <h4 class="ui-block-heading">Examples</h4> | 8 | <h4 class="ui-block-heading">Examples</h4> | |
| 9 | 9 | |||
| 10 | <div class="cui-example"> | 10 | <div class="cui-example"> | |
| 11 | <!-- New event modal --> | <> | 11 | <!-- New item modal --> |
| 12 | <b-modal title="Title" ref="newEventModal" @shown="$refs.newEventTitleInput.focus()" @ok.prevent="addEvent()" @hidden="clearModal()"> | 12 | <b-modal title="Title" ref="newItemModal" @shown="$refs.newItemTitleInput.focus()" @ok.prevent="addItem()" @hidden="clearModal()"> | |
| 13 | <form @submit.stop.prevent="addEvent()"> | 13 | <form @submit.stop.prevent="addItem()"> | |
| 14 | <b-form-group label="Title"> | = | 14 | <b-form-group label="Title"> |
| 15 | <b-input v-model="newEventTitle" ref="newEventTitleInput" /> | <> | 15 | <b-input v-model="newItemTitle" ref="newItemTitleInput" /> |
| 16 | </b-form-group> | = | 16 | </b-form-group> |
| 17 | <b-form-group label="Type"> | 17 | <b-form-group label="Type"> | |
| 18 | <b-form-select v-model="newEventType" :options="[ | <> | 18 | <b-form-select v-model="newItemType" :options="[ |
| 19 | { value: '', text: 'Default' }, | = | 19 | { value: '', text: 'Default' }, |
| 20 | { value: 'cv-event-secondary', text: 'Secondary' }, | <> | 20 | { value: 'cv-item-secondary', text: 'Secondary' }, |
| 21 | { value: 'cv-event-success', text: 'Success' }, | 21 | { value: 'cv-item-success', text: 'Success' }, | |
| 22 | { value: 'cv-event-info', text: 'Info' }, | 22 | { value: 'cv-item-info', text: 'Info' }, | |
| 23 | { value: 'cv-event-warning', text: 'Warning' }, | 23 | { value: 'cv-item-warning', text: 'Warning' }, | |
| 24 | { value: 'cv-event-danger', text: 'Danger' }, | 24 | { value: 'cv-item-danger', text: 'Danger' }, | |
| 25 | { value: 'cv-event-dark', text: 'Dark' } | 25 | { value: 'cv-item-dark', text: 'Dark' } | |
| 26 | ]" /> | = | 26 | ]" /> |
| 27 | </b-form-group> | 27 | </b-form-group> | |
| 28 | </form> | 28 | </form> | |
| 29 | </b-modal> | 29 | </b-modal> | |
| 30 | <!-- / New event modal --> | <> | 30 | <!-- / New item modal --> |
| 31 | = | 31 | ||
| 32 | <div class="d-flex"> | 32 | <div class="d-flex"> | |
| 33 | <calendar-view class="holiday-us-traditional holiday-us-official" style="min-height: 800px;" | 33 | <calendar-view class="holiday-us-traditional holiday-us-official" style="min-height: 800px;" | |
| 34 | :events="events" | <> | 34 | :items="items" |
| 35 | :show-date="showDate" | = | 35 | :show-date="showDate" |
| 36 | :time-format-options="{hour: 'numeric', minute:'2-digit'}" | 36 | :time-format-options="{hour: 'numeric', minute:'2-digit'}" | |
| 37 | :display-period-uom="displayPeriodUom" | 37 | :display-period-uom="displayPeriodUom" | |
| 38 | :enable-drag-drop="true" | 38 | :enable-drag-drop="true" | |
| 39 | :show-event-times="true" | <> | 39 | :show-times="true" |
| 40 | :display-period-count="1" | = | 40 | :display-period-count="1" |
| 41 | :starting-day-of-week="1" | 41 | :starting-day-of-week="1" | |
| 42 | locale="en-US" | 42 | locale="en-US" | |
| 43 | event-content-height="1.25rem" | <> | 43 | item-content-height="1.25rem" |
| 44 | :displayWeekNumbers="true" | |||
| 45 | :enable-date-selection="true" | |||
| 46 | :selection-start="selectionStart" | |||
| 47 | :selection-end="selectionEnd" | |||
| 48 | @date-selection-start="setSelection" | |||
| 49 | @date-selection="setSelection" | |||
| 50 | @date-selection-finish="finishSelection" | |||
| 44 | @drop-on-date="onDrop" | = | 51 | @drop-on-date="onDrop" |
| 45 | @click-date="onClickDay" | 52 | @click-date="onClickDay" | |
| 46 | @click-event="onClickEvent" | <> | 53 | @click-item="onClickItem" |
| 47 | @show-date-change="setShowDate"> | = | 54 | @show-date-change="setShowDate"> |
| 48 | 55 | |||
| 49 | <div slot="header" slot-scope="{ headerProps }" class="d-flex flex-wrap justify-content-center justify-content-md-between align-items-center mb-4"> | 56 | <div slot="header" slot-scope="{ headerProps }" class="d-flex flex-wrap justify-content-center justify-content-md-between align-items-center mb-4"> | |
| 50 | <div class="text-large font-weight-light"> | 57 | <div class="text-large font-weight-light"> | |
| 51 | {{ getPeriodLabel(headerProps) }} | 58 | {{ getPeriodLabel(headerProps) }} | |
| 52 | </div> | 59 | </div> | |
| 53 | <div class="w-100 w-md-auto text-center mt-3 mt-md-0"> | 60 | <div class="w-100 w-md-auto text-center mt-3 mt-md-0"> | |
| 54 | <b-btn-group> | 61 | <b-btn-group> | |
| 55 | <b-btn variant="primary" size="sm" :pressed="displayPeriodUom === 'year'" @click="displayPeriodUom = 'year'">Year</b-btn> | 62 | <b-btn variant="primary" size="sm" :pressed="displayPeriodUom === 'year'" @click="displayPeriodUom = 'year'">Year</b-btn> | |
| 56 | <b-btn variant="primary" size="sm" :pressed="displayPeriodUom === 'month'" @click="displayPeriodUom = 'month'">Month</b-btn> | 63 | <b-btn variant="primary" size="sm" :pressed="displayPeriodUom === 'month'" @click="displayPeriodUom = 'month'">Month</b-btn> | |
| 57 | <b-btn variant="primary" size="sm" :pressed="displayPeriodUom === 'week'" @click="displayPeriodUom = 'week'">Week</b-btn> | 64 | <b-btn variant="primary" size="sm" :pressed="displayPeriodUom === 'week'" @click="displayPeriodUom = 'week'">Week</b-btn> | |
| 58 | </b-btn-group> | 65 | </b-btn-group> | |
| 59 | </div> | 66 | </div> | |
| 60 | <div class="w-100 w-md-auto text-center mt-2 mt-md-0"> | 67 | <div class="w-100 w-md-auto text-center mt-2 mt-md-0"> | |
| 61 | <b-btn-toolbar class="d-inline-block"> | 68 | <b-btn-toolbar class="d-inline-block"> | |
| 62 | <b-btn variant="primary" size="sm" @click="setShowDate(headerProps.currentPeriod)">Today</b-btn> | 69 | <b-btn variant="primary" size="sm" @click="setShowDate(headerProps.currentPeriod)">Today</b-btn> | |
| 63 | <b-btn-group class="ml-1"> | 70 | <b-btn-group class="ml-1"> | |
| 64 | <b-btn variant="primary icon-btn" size="sm" :disabled="!headerProps.previousYear" @click="setShowDate(headerProps.previousYear)"><i class="ion ion-md-arrow-back scaleX--1-rtl"></i></b-btn> | 71 | <b-btn variant="primary icon-btn" size="sm" :disabled="!headerProps.previousYear" @click="setShowDate(headerProps.previousYear)"><i class="ion ion-md-arrow-back scaleX--1-rtl"></i></b-btn> | |
| 65 | <b-btn variant="primary icon-btn" size="sm" :disabled="!headerProps.previousPeriod" @click="setShowDate(headerProps.previousPeriod)"><i class="ion ion-ios-arrow-back scaleX--1-rtl"></i></b-btn> | 72 | <b-btn variant="primary icon-btn" size="sm" :disabled="!headerProps.previousPeriod" @click="setShowDate(headerProps.previousPeriod)"><i class="ion ion-ios-arrow-back scaleX--1-rtl"></i></b-btn> | |
| 66 | <b-btn variant="primary icon-btn" size="sm" :disabled="!headerProps.nextPeriod" @click="setShowDate(headerProps.nextPeriod)"><i class="ion ion-ios-arrow-forward scaleX--1-rtl"></i></b-btn> | 73 | <b-btn variant="primary icon-btn" size="sm" :disabled="!headerProps.nextPeriod" @click="setShowDate(headerProps.nextPeriod)"><i class="ion ion-ios-arrow-forward scaleX--1-rtl"></i></b-btn> | |
| 67 | <b-btn variant="primary icon-btn" size="sm" :disabled="!headerProps.nextYear" @click="setShowDate(headerProps.nextYear)"><i class="ion ion-md-arrow-forward scaleX--1-rtl"></i></b-btn> | 74 | <b-btn variant="primary icon-btn" size="sm" :disabled="!headerProps.nextYear" @click="setShowDate(headerProps.nextYear)"><i class="ion ion-md-arrow-forward scaleX--1-rtl"></i></b-btn> | |
| 68 | </b-btn-group> | 75 | </b-btn-group> | |
| 69 | </b-btn-toolbar> | 76 | </b-btn-toolbar> | |
| 70 | </div> | 77 | </div> | |
| 71 | </div> | 78 | </div> | |
| 72 | 79 | |||
| 73 | </calendar-view> | 80 | </calendar-view> | |
| 74 | </div> | 81 | </div> | |
| 75 | </div> | 82 | </div> | |
| 76 | </div> | 83 | </div> | |
| 77 | </template> | 84 | </template> | |
| 78 | 85 | |||
| 79 | <style> | 86 | <style> | |
| 80 | /* Set minimum width */ | 87 | /* Set minimum width */ | |
| 81 | .cv-wrapper { | 88 | .cv-wrapper { | |
| 82 | width: 100%; | 89 | width: 100%; | |
| 83 | overflow-x: auto; | 90 | overflow-x: auto; | |
| 84 | } | 91 | } | |
| 85 | .cv-wrapper > * { | 92 | .cv-wrapper > * { | |
| 86 | min-width: 600px !important; | 93 | min-width: 600px !important; | |
| 87 | } | 94 | } | |
| 88 | </style> | 95 | </style> | |
| 89 | 96 | |||
| 90 | <style src="@/vendor/libs/vue-simple-calendar/vue-simple-calendar.scss" lang="scss"></style> | 97 | <style src="@/vendor/libs/vue-simple-calendar/vue-simple-calendar.scss" lang="scss"></style> | |
| 91 | <style src="vue-simple-calendar/static/css/holidays-us.css" lang="css"></style> | 98 | <style src="vue-simple-calendar/static/css/holidays-us.css" lang="css"></style> | |
| 92 | 99 | |||
| 93 | <script> | 100 | <script> | |
| 94 | import { CalendarView, CalendarMathMixin } from 'vue-simple-calendar' | 101 | import { CalendarView, CalendarMathMixin } from 'vue-simple-calendar' | |
| 95 | 102 | |||
| 96 | const calendarUtils = CalendarMathMixin.methods | 103 | const calendarUtils = CalendarMathMixin.methods | |
| 97 | 104 | |||
| 98 | export default { | 105 | export default { | |
| 99 | components: { | 106 | components: { | |
| 100 | CalendarView | 107 | CalendarView | |
| 101 | }, | 108 | }, | |
| 102 | data: () => ({ | 109 | data: () => ({ | |
| 103 | lastEventId: 0, | <> | 110 | lastItemId: 0, |
| 104 | showDate: new Date(), | = | 111 | showDate: new Date(), |
| 105 | displayPeriodUom: 'month', | 112 | displayPeriodUom: 'month', | |
| 106 | 113 | |||
| 107 | newEventDate: null, | <> | 114 | newItemDate: null, |
| 108 | newEventTitle: '', | 115 | newItemTitle: '', | |
| 109 | newEventType: '', | 116 | newItemType: '', | |
| 110 | = | 117 | ||
| <> | 118 | selectionStart: null, | ||
| 119 | selectionEnd: null, | |||
| 120 | ||||
| 111 | events: [] | 121 | items: [] | |
| 112 | }), | = | 122 | }), |
| 113 | mounted () { | 123 | mounted () { | |
| 114 | this.events = [{ | <> | 124 | this.items = [{ |
| 115 | id: 'e0', | = | 125 | id: 'e0', |
| 116 | startDate: '2018-01-05' | 126 | startDate: '2018-01-05' | |
| 117 | }, { | 127 | }, { | |
| 118 | id: 'e1', | 128 | id: 'e1', | |
| 119 | startDate: this.thisMonth(15, 18, 30) | 129 | startDate: this.thisMonth(15, 18, 30) | |
| 120 | }, { | 130 | }, { | |
| 121 | id: 'e2', | 131 | id: 'e2', | |
| 122 | startDate: this.thisMonth(15), | 132 | startDate: this.thisMonth(15), | |
| 123 | title: 'Single-day event with a long title' | <> | 133 | title: 'Single-day item with a long title' |
| 124 | }, { | = | 134 | }, { |
| 125 | id: 'e3', | 135 | id: 'e3', | |
| 126 | startDate: this.thisMonth(7, 9, 25), | 136 | startDate: this.thisMonth(7, 9, 25), | |
| 127 | endDate: this.thisMonth(10, 16, 30), | 137 | endDate: this.thisMonth(10, 16, 30), | |
| 128 | class: 'cv-event-info', | <> | 138 | class: 'cv-item-info', |
| 129 | title: 'Multi-day event with a long title and times' | 139 | title: 'Multi-day item with a long title and times' | |
| 130 | }, { | = | 140 | }, { |
| 131 | id: 'e4', | 141 | id: 'e4', | |
| 132 | startDate: this.thisMonth(20), | 142 | startDate: this.thisMonth(20), | |
| 133 | title: 'My Birthday!', | 143 | title: 'My Birthday!', | |
| 134 | classes: 'cv-event-danger', | <> | 144 | classes: 'cv-item-danger', |
| 135 | url: 'https://en.wikipedia.org/wiki/Birthday' | = | 145 | url: 'https://en.wikipedia.org/wiki/Birthday' |
| 136 | }, { | 146 | }, { | |
| 137 | id: 'e5', | 147 | id: 'e5', | |
| 138 | startDate: this.thisMonth(5), | 148 | startDate: this.thisMonth(5), | |
| 139 | endDate: this.thisMonth(12), | 149 | endDate: this.thisMonth(12), | |
| 140 | title: 'Multi-day event', | <> | 150 | title: 'Multi-day item', |
| 141 | classes: 'cv-event-success' | 151 | classes: 'cv-item-success' | |
| 142 | }, { | = | 152 | }, { |
| 143 | id: 'foo', | 153 | id: 'foo', | |
| 144 | startDate: this.thisMonth(29), | 154 | startDate: this.thisMonth(29), | |
| 145 | title: 'Same day 1' | 155 | title: 'Same day 1' | |
| 146 | }, { | 156 | }, { | |
| 147 | id: 'e6', | 157 | id: 'e6', | |
| 148 | startDate: this.thisMonth(29), | 158 | startDate: this.thisMonth(29), | |
| 149 | title: 'Same day 2', | 159 | title: 'Same day 2', | |
| 150 | classes: 'cv-event-warning' | <> | 160 | classes: 'cv-item-warning' |
| 151 | }, { | = | 161 | }, { |
| 152 | id: 'e7', | 162 | id: 'e7', | |
| 153 | startDate: this.thisMonth(29), | 163 | startDate: this.thisMonth(29), | |
| 154 | title: 'Same day 3' | 164 | title: 'Same day 3' | |
| 155 | }, { | 165 | }, { | |
| 156 | id: 'e8', | 166 | id: 'e8', | |
| 157 | startDate: this.thisMonth(29), | 167 | startDate: this.thisMonth(29), | |
| 158 | title: 'Same day 4', | 168 | title: 'Same day 4', | |
| 159 | classes: 'cv-event-secondary' | <> | 169 | classes: 'cv-item-secondary' |
| 160 | }, { | = | 170 | }, { |
| 161 | id: 'e9', | 171 | id: 'e9', | |
| 162 | startDate: this.thisMonth(29), | 172 | startDate: this.thisMonth(29), | |
| 163 | title: 'Same day 5' | 173 | title: 'Same day 5' | |
| 164 | }, { | 174 | }, { | |
| 165 | id: 'e10', | 175 | id: 'e10', | |
| 166 | startDate: this.thisMonth(29), | 176 | startDate: this.thisMonth(29), | |
| 167 | title: 'Same day 6', | 177 | title: 'Same day 6', | |
| 168 | classes: 'cv-event-dark' | <> | 178 | classes: 'cv-item-dark' |
| 169 | }, { | = | 179 | }, { |
| 170 | id: 'e11', | 180 | id: 'e11', | |
| 171 | startDate: this.thisMonth(29), | 181 | startDate: this.thisMonth(29), | |
| 172 | title: 'Same day 7' | 182 | title: 'Same day 7' | |
| 173 | }] | 183 | }] | |
| 174 | }, | 184 | }, | |
| 175 | methods: { | 185 | methods: { | |
| 176 | thisMonth (d, h = 0, m = 0) { | 186 | thisMonth (d, h = 0, m = 0) { | |
| 177 | const t = new Date() | 187 | const t = new Date() | |
| 178 | return new Date(t.getFullYear(), t.getMonth(), d, h, m) | 188 | return new Date(t.getFullYear(), t.getMonth(), d, h, m) | |
| 179 | }, | 189 | }, | |
| 180 | setShowDate (d) { | 190 | setShowDate (d) { | |
| 181 | this.showDate = d | 191 | this.showDate = d | |
| 182 | }, | 192 | }, | |
| 183 | getPeriodLabel (data) { | 193 | getPeriodLabel (data) { | |
| 184 | return calendarUtils.formattedPeriod( | 194 | return calendarUtils.formattedPeriod( | |
| 185 | data.periodStart, | 195 | data.periodStart, | |
| 186 | data.periodEnd, | 196 | data.periodEnd, | |
| 187 | this.displayPeriodUom, | 197 | this.displayPeriodUom, | |
| 188 | data.monthNames | 198 | data.monthNames | |
| 189 | ) | 199 | ) | |
| 190 | }, | 200 | }, | |
| -+ | 201 | setSelection (dateRange) { | ||
| 202 | this.selectionEnd = dateRange[1] | |||
| 203 | this.selectionStart = dateRange[0] | |||
| 204 | }, | |||
| 205 | finishSelection (dateRange) { | |||
| 206 | this.setSelection(dateRange) | |||
| 207 | }, | |||
| 191 | = | 208 | ||
| 192 | onClickDay (d) { | 209 | onClickDay (d) { | |
| 193 | this.newEventDate = d | <> | 210 | this.newItemDate = d |
| 194 | this.$refs.newEventModal.show() | 211 | this.$refs.newItemModal.show() | |
| 195 | }, | = | 212 | }, |
| 196 | addEvent () { | <> | 213 | addItem () { |
| 197 | if (this.newEventDate && this.newEventTitle) { | 214 | if (this.newItemDate && this.newItemTitle) { | |
| 198 | this.events.push({ | 215 | this.items.push({ | |
| 199 | id: `ne${this.lastEventId++}`, | 216 | id: `ne${this.lastItemId++}`, | |
| 200 | startDate: this.newEventDate, | 217 | startDate: this.newItemDate, | |
| 201 | title: this.newEventTitle, | 218 | title: this.newItemTitle, | |
| 202 | classes: this.newEventType | 219 | classes: this.newItemType | |
| 203 | }) | = | 220 | }) |
| 204 | } | 221 | } | |
| 205 | this.$nextTick(() => this.$refs.newEventModal.hide()) | <> | 222 | this.$nextTick(() => this.$refs.newItemModal.hide()) |
| 206 | }, | = | 223 | }, |
| 207 | clearModal () { | 224 | clearModal () { | |
| 208 | this.newEventDate = null | <> | 225 | this.newItemDate = null |
| 209 | this.newEventTitle = '' | 226 | this.newItemTitle = '' | |
| 210 | this.newEventType = '' | 227 | this.newItemType = '' | |
| 211 | }, | = | 228 | }, |
| 212 | 229 | |||
| 213 | onClickEvent (e) { | <> | 230 | onClickItem (e) { |
| 214 | alert(`You clicked: ${e.title}`) | = | 231 | alert(`You clicked: ${e.title}`) |
| 215 | }, | 232 | }, | |
| 216 | onDrop (event, date) { | <> | 233 | onDrop (item, date) { |
| 217 | const eLength = calendarUtils.dayDiff(event.startDate, date) | 234 | const eLength = calendarUtils.dayDiff(item.startDate, date) | |
| 218 | event.originalEvent.startDate = calendarUtils.addDays(event.startDate, eLength) | 235 | item.originalItem.startDate = calendarUtils.addDays(item.startDate, eLength) | |
| 219 | event.originalEvent.endDate = calendarUtils.addDays(event.endDate, eLength) | 236 | item.originalItem.endDate = calendarUtils.addDays(item.endDate, eLength) | |
| 220 | } | = | 237 | } |
| 221 | } | 238 | } | |
| 222 | } | 239 | } | |
| 223 | </script> | 240 | </script> |