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,
editable: true,
/* customButtons: {
customButtons: {
prevWeek: {
text: '<',
click: goPrevious
click: function() {
navigate('prev')
}
},
nextWeek: {
text: '>',
click: function() {
navigate('next')
}
}
},*/
},
headerToolbar: {
left: 'prev,next today prevWeek',
left: 'prevWeek,nextWeek today',
center: 'title',
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});
}
/*function goPrevious() {
function navigate(direction: string) {
const viewType = calendarRef.value.getApi().view.type;
const currentStartObj = store.state.fullCalendar.currentView.start;
const currentEndObj = store.state.fullCalendar.currentView.end;
let prevDates = {};
const currentStart = store.state.fullCalendar.currentView.start;
const currentEnd = store.state.fullCalendar.currentView.end;
let newDates = {};
if (currentStartObj != null && currentEndObj != null) {
if (viewType === "timeGridWeek") {
console.log(typeof(currentStartObj));
prevDates = {
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)
}
if (currentStart != null && currentEnd != null) {
let daysBetween = (currentEnd?.getTime() - currentStart?.getTime())/(1000 * 60 * 60 * 24);
if (daysBetween === 5) {
daysBetween = 7;
}
store.dispatch('calendarRanges/createRange', prevDates);
}
calendarRef.value.getApi().setOption('visibleRange', {start: '2022-11-14', end: '2022-11-19'});
}*/
/*function goNext() {
const viewType = calendarRef.value.getApi().view.type;
const currentStartObj = store.state.fullCalendar.currentView.start;
const currentEndObj = store.state.fullCalendar.currentView.end;
if (currentStartObj != null && currentEndObj != null) {
const prevDates = {
start: new Date(currentStartObj).setDate(currentStartObj.getDate() + 7),
end: currentEndObj.setDate(currentEndObj.getDate() + 7)
if (direction === 'prev') {
newDates = {
start: new Date(new Date(currentStart).setDate(currentStart.getDate() - daysBetween)),
end: new Date(new Date(currentEnd).setDate(currentEnd.getDate() - daysBetween))
}
} else if (direction === 'next') {
console.log(daysBetween);
newDates = {
start: new Date(new Date(currentStart).setDate(currentStart.getDate() + daysBetween)),
end: new Date(new Date(currentEnd).setDate(currentEnd.getDate() + daysBetween))
}
console.log(newDates);
}
store.dispatch('calendarRanges/createRange', prevDates);
}
}*/
store.dispatch('fullCalendar/setCurrentDatesView', newDates);
calendarRef.value.getApi().changeView('timeGrid', newDates);
}
/**
* When a calendar range is deleted

View File

@ -31,7 +31,6 @@ export default {
},
actions: {
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) {
ctx.commit('setCurrentDatesView', {start, end});