Our powerful JS Calendar component


Post by SHQK »

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

Attachments
tab.PNG
tab.PNG (7.29 KiB) Viewed 1064 times

Post by saki »

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.


Post by SHQK »

saki wrote: Tue Jun 22, 2021 3:42 pm

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.

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>

Post by saki »

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.


Post by SHQK »

I can't use external fields like: nameField, resourceField, startDateField, startTimeField,... inside tabs right?
Is there any way i can put those fields in the tab?


Post by saki »

Not directly, but you can copy&paste their configurations from Calendar/lib/Scheduler/feature/EventEdit.js


Post by SHQK »

saki wrote: Tue Jun 22, 2021 3:42 pm

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.

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


Post by saki »

Take a look at Gantt Task Editor Angular demo source please. Custom "Files" tab contains such grid.


Post Reply