Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

How can I view the resourceTimelineMonth calendar starting from the current date or scroll to the current date?

Currently, I am experiencing difficulty scrolling back more than two days when viewing the calendar initially. To provide further context, I have included a screenshot and the calendar Option object below. To resolve the issue, you may need to adjust the calendar options and plugins. Here's an example:

  this.calendarOptions = { 
   plugins: [resourceTimelinePlugin],
      initialView: 'resourceTimelineMonth',
      nowIndicator: true,
      aspectRatio: 2,
      now: new Date().toISOString(),
      initialDate: this.initialCalendarDate,
      headerToolbar: {
        left: 'prev',
        center: 'title',
        right: 'next',
      },
      views: {
        resourceTimelineMonth: {
          slotLabelFormat: [
            { weekday: 'short', day: '2-digit' }, // lower level of text
          ],
          initialDate: new Date().toISOString()
        },
      },
    
      resourceAreaHeaderContent: 'Team Members',
      resources: [
        ...this.allEmployee.map((ele) => {
          return { id: ele.id.toString(), title: ele.name };
        }),
      ],
      resourceOrder: 'title',
      resourcesSet: (resources: ResourceApi[]) => {
        resources.sort((a, b) => {
          return a.id.localeCompare(b.id);
        });
      },
      eventContent: this.renderEventContent,
      datesSet: (event: any) => {
        this.onCalendarMonthChangeEvent.emit(event.start);
      },
      events: [
      
      ],
      resourceAreaWidth: '15%',
      slotMinWidth: 100,
      resourceLabelClassNames: ['employee-name-label'],
    
      // calendar header day and date section
      slotLabelContent: (arg: any) => {
        const _date = arg.text.split(' ')[0] || '-';
        const _day = arg.text.split(' ')[1] || '-';
        return {
          html: `
            <div class="calendar-header-day-date">
              <span class="day-text">${_day}</span>
              <span class="date-number">${_date}</span>
            </div>
          `,
        };
      },
    
      // employee listing section
      resourceLabelContent: (arg) => {},
    }
};
Screenshot

Answers(2)
avatar
Vogi
a month ago
Verified Answer
Thank you for providing the screenshot and the calendar Option object. It seems that you are experiencing difficulty scrolling back more than two days when viewing the calendar initially. To resolve this issue, you may need to adjust the calendar options and plugins. I would recommend checking the following: - Ensure that the initialDate property is set to the correct date. - Check if there are any plugins that may be interfering with the calendar's functionality. - Check if there are any errors in the console that may be related to this issue. If you are still experiencing issues after checking these items, please let me know and I will do my best to assist you further.
avatar
Tolerim
a month ago
It seems that the issue is related to the initialDate property in the calendarOptions object. Currently, it is set to this.initialCalendarDate, which might not be allowing you to scroll back beyond 2 days from the current date. You could try setting it to a date that is further in the past to allow for more scrolling. For example, you could set it to a date that is a month ago from the current date by using the Date constructor and subtracting the number of milliseconds in a month:
This will set the initial date to a month ago from the current date and should allow for more scrolling in the calendar.
;