Skip to content
This repository was archived by the owner on Feb 16, 2021. It is now read-only.

WIP: Fullcalendar 4.0.0 #123

Open
wants to merge 17 commits into
base: master
Choose a base branch
from
Open

WIP: Fullcalendar 4.0.0 #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
d5f5908
Use alpha build of fullcalendar
BrockReece Jun 8, 2018
dd0af2c
Update dev package for yarn link to work
BrockReece Jun 8, 2018
3756333
Remove jquery and move all fullcalendar wrapper code over to 4.0.0 alpha
BrockReece Jun 8, 2018
834a5f4
3.0.0-0
BrockReece Jun 9, 2018
8ad374d
4.0.0-0
BrockReece Jun 9, 2018
ba6f6f5
merge in bili changes
BrockReece Jun 21, 2018
dc05f88
rebuild dist
BrockReece Jun 21, 2018
25547b8
4.0.0-1
BrockReece Jun 21, 2018
74014fa
refactor(4.0.0): Adapted to the new fullcalendar-4.0.0 alpha release
Jan 9, 2019
a3bba2f
refactor(4.0.0): Build
Jan 9, 2019
0a3569c
refactor(4.0.0): upgrade package.json
Jan 9, 2019
431aa19
feat(4.0.0): Update select method for 4.0.0
Jan 10, 2019
1f58b2a
reafactor(4.0.0): Build
Jan 10, 2019
c35b96c
fix(4.0.0): remove-event doesn't work with hasOwnProperty check
Jan 11, 2019
25f1c0c
refactor(4.0.0): check if eventobj exist before delete
Jan 27, 2019
5283984
refactor(4.0.0): build
Jan 27, 2019
075fa58
Merge pull request #180 from CodeDredd/fullcalendar-4.0.0
BrockReece Jan 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
node_modules/
.idea
79 changes: 44 additions & 35 deletions components/FullCalendar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@

<script>
import defaultsDeep from 'lodash.defaultsdeep'
import 'fullcalendar'
import $ from 'jquery'
const FullCalendar = require('fullcalendar/dist/fullcalendar')

export default {
props: {
Expand Down Expand Up @@ -33,7 +32,7 @@
},
},

selectHelper: {
selectMirror: {
default() {
return true
},
Expand Down Expand Up @@ -69,6 +68,12 @@
},
},

data() {
return {
calendar: null,
}
},

computed: {
defaultConfig() {
const self = this
Expand All @@ -77,22 +82,22 @@
defaultView: this.defaultView,
editable: this.editable,
selectable: this.selectable,
selectHelper: this.selectHelper,
selectMirror: this.selectMirror,
aspectRatio: 2,
timeFormat: 'HH:mm',
events: this.events,
eventSources: this.eventSources,

eventRender(...args) {
if (this.sync) {
self.events = cal.fullCalendar('clientEvents')
self.events = self.calendar.getEvents()
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just wondering if we can remove duplicates here by add lodash.uniq on

self.events = lodash.uniq(self.calendar.getEvents())

and everywhere this is required.

Reason: I see people using older version of Vue and the reactivity of an array is at stake sometimes as in those versions, Vue does not watch when a small change is made. Also removing dependency on Vue watch altogether as watch is expensive.

Thanks.

}
self.$emit('event-render', ...args)
},

eventDestroy(event) {
if (this.sync) {
self.events = cal.fullCalendar('clientEvents')
self.events = self.calendar.getEvents()
}
},

Expand All @@ -112,73 +117,77 @@
self.$emit('event-resize', ...args)
},

dayClick(...args){
self.$emit('day-click', ...args)
dateClick(...args){
self.$emit('date-click', ...args)
},
select(start, end, jsEvent, view, resource) {
self.$emit('event-created', {
start,
end,
allDay: !start.hasTime() && !end.hasTime(),
view,
resource
})
select(info) {
self.$emit('event-created', info)
}
}
},
},

mounted() {
const cal = $(this.$el),
self = this
const cal = this.$el

this.$on('remove-event', (event) => {
if(event && event.hasOwnProperty('id')){
$(this.$el).fullCalendar('removeEvents', event.id);
}else{
$(this.$el).fullCalendar('removeEvents', event);
if(event && event.id){
let eventObj = this.calendar.getEventById(event.id);
eventObj.remove();
}
})

this.$on('rerender-events', () => {
$(this.$el).fullCalendar('rerenderEvents')
this.calendar.rerenderEvents()
})

this.$on('refetch-events', () => {
$(this.$el).fullCalendar('refetchEvents')
this.calendar.refetchEvents()
})

this.$on('render-event', (event) => {
$(this.$el).fullCalendar('renderEvent', event)
this.$on('add-event', (event) => {
this.calendar.addEvent(event)
})

this.$on('reload-events', () => {
$(this.$el).fullCalendar('removeEvents')
$(this.$el).fullCalendar('addEventSource', this.events)
this.$on('reload-events', (events) => {
events = events || this.events
this.removeEvents();
this.calendar.addEventSource(events)
})

this.$on('rebuild-sources', () => {
$(this.$el).fullCalendar('removeEventSources')
this.removeEvents();
this.eventSources.map(event => {
$(this.$el).fullCalendar('addEventSource', event)
this.calendar.addEventSource(event)
})
})

cal.fullCalendar(defaultsDeep(this.config, this.defaultConfig))
this.calendar = new FullCalendar.Calendar(cal, defaultsDeep(this.config, this.defaultConfig))
this.calendar.render()
},

methods: {
fireMethod(...options) {
return $(this.$el).fullCalendar(...options)
return this.calendar[options.shift()](...options)
},
removeEvents() {
this.calendar.batchRendering(() => {
this.events.forEach(event => {
let eventObj = this.calendar.getEventById(event.id)
if (eventObj) {
eventObj.remove()
}
});
});
}
},

watch: {
events: {
deep: true,
handler(val) {
$(this.$el).fullCalendar('removeEvents')
$(this.$el).fullCalendar('addEventSource', this.events)
this.removeEvents()
this.calendar.addEventSource(this.events)
},
},
eventSources: {
Expand Down
Loading