The Week View Scroll Between Weeks Automatically without any event

[srephaniejoyce]

Im using the library ionic2-calendar and i want to display just by week view

calendar = {
mode: 'week' as CalendarMode,
currentDate: new Date(),
locale: '',
lockSwipeToPrev: true, // I've added this option but doesnt resolve the bug
};

In html, i've add the calendar like this :

<calendar
[eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
startHour="6"
endHour="20"
step="30"
startingDayWeek="1"
[locale]="calendar.locale"
[lockSwipeToPrev]="lockSwipeToPrev"
>

The calendar is displayed with week view but the week change automatically without any action. How to correct this please ?

[twinssbc]

@srephaniejoyce What do you mean the week changes automatically? The week changes only when you swipe or you set the current date to a new date. Is it possible you have some code logic that will update the current date?

[srephaniejoyce]

I mean, when the current week appear, the next weeks appears also by swipping automaticalyy without any action
(it swipes for 2 or 3 times)

In my code logic, i set the current date just in declaration and i don't swipe, here is the full logic code :

calendar = {
    mode: "week" as CalendarMode,
    step: 30 as Step,
    currentDate: new Date(),
    dateFormatter: {
      formatMonthViewDay: function(date: Date) {
        return date.getDate().toString();
      },
      formatMonthViewDayHeader: function(date: Date) {
        return "MonMH";
      },
      formatWeekViewDayHeader: function(date: Date) {
        return "MonWH";
      },
    }
  }

constructor(
    private openingHoursService: OpeningHoursService,
    private menu: MenuController,
    @Inject(LOCALE_ID) locale: string,
    private store: Store<AppState>
  ) {
    console.log('Constructor --> OpeningHoursComponent');
    this.locale =  locale;
    this.getOpeningHours();
  }

public getOpeningHours(): void {
   this.openingHoursService.getOpeningHours().forEach((value, index, array) => {
        this.eventSource.push({
          startTime: new Date(value.start),
          endTime: new Date(value.end),
          allDay: false,
        });
   });
}

onEventSelected(event) {
  console.log(
    "Event selected:" +
      event.startTime +
      "-" +
      event.endTime +
      "," +
      event.title
  );
}

changeMode(mode) {
  this.calendar.mode = mode;
}

onTimeSelected(ev) {
  console.log(
    "Selected time: " +
      ev.selectedTime +
      ", hasEvents: " +
      (ev.events !== undefined && ev.events.length !== 0) +
      ", disabled: " +
      ev.disabled
  );
}

onCurrentDateChanged(event: Date) {
  var today = new Date();
  today.setHours(0, 0, 0, 0);
  event.setHours(0, 0, 0, 0);
  this.isToday = today.getTime() === event.getTime();
}

createRandomEvents() {
  var events = [];
  for (var i = 0; i < 3; i += 1) {
    var date = new Date();
    var eventType = Math.floor(Math.random() * 2);
    var startDay = Math.floor(Math.random() * 90) - 45;
    var endDay = Math.floor(Math.random() * 2) + startDay;
    var startTime;
    var endTime;
    if (eventType === 0) {
      startTime = new Date(
        Date.UTC(
          date.getUTCFullYear(),
          date.getUTCMonth(),
          date.getUTCDate() + startDay
        )
      );
      if (endDay === startDay) {
        endDay += 1;
      }
      endTime = new Date(
        Date.UTC(
          date.getUTCFullYear(),
          date.getUTCMonth(),
          date.getUTCDate() + endDay
        )
      );
      events.push({
        title: "All Day - " + i,
        startTime: startTime,
        endTime: endTime,
        allDay: true
      });
    } else {
      var startMinute = Math.floor(Math.random() * 24 * 60);
      var endMinute = Math.floor(Math.random() * 180) + startMinute;
      startTime = new Date(
        date.getFullYear(),
        date.getMonth(),
        date.getDate() + startDay,
        0,
        date.getMinutes() + startMinute
      );
      endTime = new Date(
        date.getFullYear(),
        date.getMonth(),
        date.getDate() + endDay,
        0,
        date.getMinutes() + endMinute
      );
      events.push({
        title: "Event - " + i,
        startTime: startTime,
        endTime: endTime,
        allDay: false
      });
    }
  }
  return events;
}

onRangeChanged(ev) {
  console.log(
    "range changed: startTime: " + ev.startTime + ", endTime: " + ev.endTime
  );
}

markDisabled = (date: Date) => {
  var current = new Date();
  current.setHours(0, 0, 0);
  return date < current;
};

And in html the same previous code :

<calendar [eventSource]="eventSource"
                [calendarMode]="calendar.mode"
                [currentDate]="calendar.currentDate"
                [step]="calendar.step"
                >
        </calendar>
    

[twinssbc]

@srephaniejoyce I didn't spot any thing wrong from the code you provided. If you remove all the unnecessary code, for example, not loading events, just displaying an empty calendar, will this auto swipe still happen?