Our pure JavaScript Scheduler component


Post by mriahi »

Hello,

We are having trouble getting reoccurring events to render properly.

The reoccurrence of events is being done vertically instead of horizontally, keeping the same dates for each new event.

It seems that instead of applying the rule into the future when duplicating the events, it is simply duplicating it exactly as is. From the screenshots you can see that the events are being generated, but not into the future. And when we zoom out, it generates more events, but the start date and end date stay the same, as evidenced by the second screenshot.

// events setup
userPeriods?.results.forEach(i => {
      _events.push({
        id: 'period_' + String(i.id),
        name:
          i.project_display +
          ' ' +
          (i.phase_display || i.annex_display || '') +
          ' ' +
          (i.description || ''),
        role: i.role_display || '',
        hours_per_day: i.hours_per_day,
        eventColor: i.orguser ? '#0062FF' : '#8B8A93',
        photo: i.orguser_photo || '',
        description: i.description || '',
        startDate:
          i.start_date.length > 0
            ? formatISO(unformatDate(i.start_date), 'yyyy-MM-dd')
            : null,
        endDate:
          i.end_date.length > 0
            ? formatISO(unformatDate(i.end_date), 'yyyy-MM-dd')
            : null,
        recurrenceRule: 'FREQ=WEEKLY;'
      })
    })

// resources setup
usersList?.results.forEach(e => {
      var item = {
        id: e.pk,
        name: e?.display,
        role: e?.role || '',
        imageUrl: e?.photo || ''
      }
    })

// assignments setup
var _assignments = _events.map(e => ({
      id: e.id,
      resource: e.parentId,
      event: e.id
    }))

const schedulerConfig = {
  project,
  flex: '1 1 50%',
  barMargin: 10,
  hideHeaders: false, // set to false due to toggle
  viewPreset: 'dayAndWeek', //weekAndMonth, year, manyYears
  // maxZoomLevel: 11,
  // minZoomLevel: 1,
  zoomOnMouseWheel: true,
  zoomOnTimeAxisDoubleClick: true,
  eventStyle: 'rounded', // hollow, rounded, dashed, plain, minimal
  eventColor: '#0062FF', //'#0062FF', // "indigo",
  eventLayout: 'stack',
  tickSize: 70,
  rowHeight: 50,
  eventDragSelectFeature: false,
  dependenciesFeature: false, // show/hide deps
  timeRangesFeature: {
    showCurrentTimeLine: true,
    currentDateFormat: 'DD/MM',
    showHeaderElements: true,
    enableResizing: true
  },
  headerZoomFeature: true,
  columnLinesFeature: true,
  eventEditFeature: false,
  cellMenuFeature: false,
  scheduleMenuFeature: false,
  createEventOnDblClick: false,
  eventDragCreateFeature: false,
  panFeature: true, // incompatible with eventDragCreateFeature
  cellEditFeature: false,
  sortFeature: false,
  resourceTimeRangesFeature: true,
  percentBarFeature: {
    disabled: false,
    allowResize: false,
    showPercentage: true
  },
  nonWorkingTimeFeature: true,
  resourceNonWorkingTimeFeature: true,
  enableRecurringEvents: true,
  scheduleTooltipFeature: false,
  // groupFeature: 'role',
  columns: [
    // { type : 'resourceCollapse' },
    {
      type: 'resourceInfo',
      text: ' ',
      field: 'name',
      width: '12em',
      htmlEncode: false,
      renderer: ({ record }) =>
        `
          <div class="b-resource-info" role="presentation">
            ${
              record.imageUrl
                ? `<img class="b-resource-avatar b-resource-image" src="${record.imageUrl}" role="presentation">`
                : ` 
                	<div class="scheduler-avatar">
                      ${record.name?.charAt(0)}
                    </div>
                `
            }
            ${record.name} 
          </div>`,
      editor: {
        type: 'combo',
        // items: Scheduler.eventColors,
        editable: false,
        listItemTpl: item =>
          `<div class="color-box b-sch-${item.value}"></div><div>${item.value}</div>`
      }
    }
  ],
  eventRenderer({ renderData, eventRecord }) {
    renderData.iconCls = eventRecord.isRecurring
      ? 'b-fa b-fa-star'
      : eventRecord.isOccurrence
      ? 'b-fa b-fa-sync'
      : 'b-fa b-fa-calendar'
    return `${eventRecord.name}`
  },

  eventMenuFeature: false
}
Attachments
Capture d’écran 2022-05-27 à 15.19.24.png
Capture d’écran 2022-05-27 à 15.19.24.png (43.47 KiB) Viewed 136 times
Capture d’écran 2022-05-27 à 15.19.00.png
Capture d’écran 2022-05-27 à 15.19.00.png (64.7 KiB) Viewed 136 times

Post by alex.l »

Hi mriahi,

We need a runnable test case to check that, with data sample to reproduce it. Could you please prepare it for us and attach here?

All the best,
Alex


Post by mriahi »

Hello,

I have attached a case test.

Thank you in advance for your help.

Best,
Max

Attachments
bryntum_test_case_template.zip
(198.92 KiB) Downloaded 4 times

Post Reply