How can I using Tabs in Event Editor
I remember I already see a demo with Tabs in Event Editor
But now I can not found it anymore
Support Forum
We do not have demo with tabbed customized event editor in Calendar. You may have seen it in other products, for example, Gantt uses tabbed task editor by default. You can download Gantt trial and see how it is done there. The Angular demo is here: https://bryntum.com/examples/gantt/frameworks/angular/taskeditor/dist/taskeditor/index.html
Generally, you would configure https://bryntum.com/docs/calendar/#Scheduler/feature/EventEdit to add TabPanel with the desired tabs.
saki wrote: ↑Tue Jun 22, 2021 3:42 pmWe do not have demo with tabbed customized event editor in Calendar. You may have seen it in other products, for example, Gantt uses tabbed task editor by default. You can download Gantt trial and see how it is done there. The Angular demo is here: https://bryntum.com/examples/gantt/frameworks/angular/taskeditor/dist/taskeditor/index.html
Generally, you would configure https://bryntum.com/docs/calendar/#Scheduler/feature/EventEdit to add TabPanel with the desired tabs.
Please describe to me more detail how to apply in Angular
I try this but it not working
tabPanel: {
items: [
{
title: 'First',
items: [
{ type: 'textfield', label: 'Name' }
]
}, {
title: 'Settings',
tab : {
// Show an icon in the tab
icon : 'b-fa b-fa-cog'
},
items: [
]
}
]
}
<bryntum-calendar
#calendar
[events] = "events"
[resources] = "resources"
[eventTooltipFeature] = "calendarConfig.features.eventTooltip"
[eventMenuFeature] = "eventMenu"
[date] = "calendarConfig.date"
[modes] = "calendarConfig.modes"
[sidebar] = "sidebar"
[eventEditFeature] = "eventEdit"
[listeners] = "listeners"
[tabPanel] = "tabPanel"
</bryntum-calendar>
You can start with this:
features : {
eventEdit : {
items : {
nameField : null,
resourceField : null,
startDateField : null,
startTimeField : null,
endDateField : null,
endTimeField : null,
recurrenceCombo : null,
editRecurrenceButton : null,
allDay : null,
myTabs : {
type : 'tabpanel',
items : {
firstTab : {
title : 'First Tab'
},
secondTab : {
title : 'Second Tab'
}
}
}
}
}
Replace features
in app.config.ts
of calendar filtering demo with the above. The tabs are empty, you need to fill them with your fields.
saki wrote: ↑Tue Jun 22, 2021 3:42 pmWe do not have demo with tabbed customized event editor in Calendar. You may have seen it in other products, for example, Gantt uses tabbed task editor by default. You can download Gantt trial and see how it is done there. The Angular demo is here: https://bryntum.com/examples/gantt/frameworks/angular/taskeditor/dist/taskeditor/index.html
Generally, you would configure https://bryntum.com/docs/calendar/#Scheduler/feature/EventEdit to add TabPanel with the desired tabs.
Hi Saki,
How can I create table like "Predecessors" in your Gantt demo above in my Calendar's Tabs,
If possible, please give me code example to apply to filtering demo
Take a look at Gantt Task Editor Angular demo source please. Custom "Files" tab contains such grid.