calendar with custom nav buttons - still bugs

This commit is contained in:
Julie Lenaerts 2022-11-23 09:33:39 +01:00
parent 9dcee26901
commit b8341484d4
2 changed files with 36 additions and 37 deletions

View File

@ -183,14 +183,22 @@ const baseOptions = ref<CalendarOptions>({
},*/ },*/
selectMirror: false, selectMirror: false,
editable: true, editable: true,
/* customButtons: { customButtons: {
prevWeek: { prevWeek: {
text: '<', text: '<',
click: goPrevious click: function() {
navigate('prev')
}
},
nextWeek: {
text: '>',
click: function() {
navigate('next')
}
} }
},*/ },
headerToolbar: { headerToolbar: {
left: 'prev,next today prevWeek', left: 'prevWeek,nextWeek today',
center: 'title', center: 'title',
right: 'timeGridWeek,timeGridDay' right: 'timeGridWeek,timeGridDay'
}, },
@ -269,43 +277,35 @@ function onDateSelect(event: DateSelectArg): void {
store.dispatch('calendarRanges/createRange', {start: event.start, end: event.end, location: pickedLocation.value}); store.dispatch('calendarRanges/createRange', {start: event.start, end: event.end, location: pickedLocation.value});
} }
/*function goPrevious() { function navigate(direction: string) {
const viewType = calendarRef.value.getApi().view.type; const viewType = calendarRef.value.getApi().view.type;
const currentStartObj = store.state.fullCalendar.currentView.start; const currentStart = store.state.fullCalendar.currentView.start;
const currentEndObj = store.state.fullCalendar.currentView.end; const currentEnd = store.state.fullCalendar.currentView.end;
let prevDates = {}; let newDates = {};
if (currentStartObj != null && currentEndObj != null) { if (currentStart != null && currentEnd != null) {
if (viewType === "timeGridWeek") { let daysBetween = (currentEnd?.getTime() - currentStart?.getTime())/(1000 * 60 * 60 * 24);
console.log(typeof(currentStartObj)); if (daysBetween === 5) {
prevDates = { daysBetween = 7;
start: new Date(new Date(currentStartObj).setDate(currentStartObj.getDate() - 7)),
end: new Date(currentEndObj.setDate(currentEndObj.getDate() - 7))
}
} else {
prevDates = {
start: new Date(currentStartObj).setDate(currentStartObj.getDate() - 1),
end: currentEndObj.setDate(currentEndObj.getDate() - 1)
}
} }
store.dispatch('calendarRanges/createRange', prevDates); if (direction === 'prev') {
} newDates = {
calendarRef.value.getApi().setOption('visibleRange', {start: '2022-11-14', end: '2022-11-19'}); start: new Date(new Date(currentStart).setDate(currentStart.getDate() - daysBetween)),
}*/ end: new Date(new Date(currentEnd).setDate(currentEnd.getDate() - daysBetween))
}
/*function goNext() { } else if (direction === 'next') {
const viewType = calendarRef.value.getApi().view.type; console.log(daysBetween);
const currentStartObj = store.state.fullCalendar.currentView.start; newDates = {
const currentEndObj = store.state.fullCalendar.currentView.end; start: new Date(new Date(currentStart).setDate(currentStart.getDate() + daysBetween)),
end: new Date(new Date(currentEnd).setDate(currentEnd.getDate() + daysBetween))
if (currentStartObj != null && currentEndObj != null) { }
const prevDates = { console.log(newDates);
start: new Date(currentStartObj).setDate(currentStartObj.getDate() + 7),
end: currentEndObj.setDate(currentEndObj.getDate() + 7)
} }
store.dispatch('calendarRanges/createRange', prevDates);
} }
}*/
store.dispatch('fullCalendar/setCurrentDatesView', newDates);
calendarRef.value.getApi().changeView('timeGrid', newDates);
}
/** /**
* When a calendar range is deleted * When a calendar range is deleted

View File

@ -31,7 +31,6 @@ export default {
}, },
actions: { actions: {
setCurrentDatesView(ctx: Context, {start, end}: {start: Date|null, end: Date|null}): Promise<null> { setCurrentDatesView(ctx: Context, {start, end}: {start: Date|null, end: Date|null}): Promise<null> {
console.log('dispatch setCurrentDatesView', {start, end});
if (ctx.state.currentView.start !== start || ctx.state.currentView.end !== end) { if (ctx.state.currentView.start !== start || ctx.state.currentView.end !== end) {
ctx.commit('setCurrentDatesView', {start, end}); ctx.commit('setCurrentDatesView', {start, end});