[REACT] recurrence rules not rendering properly
Posted: Fri May 27, 2022 8:22 pm
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
}