完整的日历资源时间线月历从当前日期开始日视图。或滚动到当前日期

问题描述 投票:0回答:0

我无法在当前日期的 2 天之前滚动。在日历的初始视图上。

这里我附上了屏幕截图和日历选项对象。

  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

javascript angular fullcalendar
© www.soinside.com 2019 - 2024. All rights reserved.