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.38 KiB) Viewed 700 times
Capture d’écran 2022-05-27 à 15.19.00.png
Capture d’écran 2022-05-27 à 15.19.00.png (64.51 KiB) Viewed 700 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.08 KiB) Downloaded 29 times

Post by alex.l »

Thank you for the test case, now it's clear what is the problem.
That happened because we do not support recurring events for SchedulerPro product, it's available only in Scheduler.
We have a feature request here https://github.com/bryntum/support/issues/792

All the best,
Alex


Post by mriahi »

Do you know when this will be supported with scheduler pro ?


Post by tasnim »

We're not sure, maybe by the end of this year. But If you really need this urgently then you can check out our professional services to prioritize that development.

contact here for professional services: https://www.bryntum.com/services/

Best regards,
Tasnim


Post by mriahi »

Is there some sort of 'hack' we can do in the meantime to achieve a similar outcome ?


Post by alex.l »

No, it's very complex feature that requires to make changes in Scheduling Engine. Scheduler doesn't use Scheduling Engine, but SchedulerPro does. That cannot be achieved by some simple patch, unfortunately.

All the best,
Alex


Post Reply