Bryntum Support Forums

Hello,

The default behaviour of the editor is a pop up. I want to have the calendar on the left and the editor on the right. The default view should be calendar occupying the entire width of the screen. Upon editing an event the editor should slide in from the left resizing the calendar to 70% of the screen.

I'm thinking of setting up a splitter but I'm not sure where to start in Angular,

https://bryntum.com/products/calendar/docs/api/Core/widget/Splitter

Is this possible in the current version?

Hello ashik,

Yes, it's possible with the current Angular version. You can start with something like this (just an idea of structure):

<bryntum-calendar
    [date] = "calendarConfig.date"
    [crudManager] = "calendarConfig.crudManager"
    [eventTooltipFeature] = "calendarConfig.features.eventTooltip"
</bryntum-calendar>
<bryntum-splitter>
</bryntum-splitter>
<bryntum-calendar
    [date] = "calendarConfig.date"
    [crudManager] = "calendarConfig.crudManager"
    [eventTooltipFeature] = "calendarConfig.features.eventTooltip"
</bryntum-calendar>

And from there you can configure the sizing and stuff like that with CSS.

This code is actually showing two calendars which I don't need. You can see this in the attachment.

<bryntum-calendar
        [crudManager]="calendarConfig.crudManager"
        [eventTooltipFeature]="calendarConfig.features.eventTooltip"
        [listeners]="calendarConfig.listeners"
        [modes]="calendarConfig.modes"
        [sidebar]="calendarConfig.sidebar"
</bryntum-calendar>
<bryntum-splitter>
</bryntum-splitter>
<bryntum-calendar
        [eventEditFeature]="calendarConfig.features.eventEdit">
</bryntum-calendar>

My expectation is to show the edit event pop up on the right side without the calendar view. Just like Drawer that opens and collapses

Hi,
Here is the approach you can follow to achieve this

1. Add a https://bryntum.com/products/calendar/docs/api/Core/widget/Panel to your calendar
2. make it collapsible by setting collapsible to true
3. And then listen to https://bryntum.com/products/calendar/docs/api/Calendar/feature/EventEdit#event-beforeEventEdit event and return false from it to prevent the popup editor and open the panel by calling panel.expand()
4. set eventRecord values to the panel items

Here is an example of how you can achieve it

const calendar = new Calendar({
    // Start life looking at this date
    date : new Date(2020, 9, 12),

// CrudManager arranges loading and syncing of data in JSON form from/to a web service
crudManager : {
    transport : {
        load : {
            url : 'data/data.json'
        }
    },
    autoLoad : true
},

appendTo : 'wrapper',

listeners : {
    beforeEventEdit({ eventRecord }) {
        panel.expand();
        panel.widgetMap.nameField.value = eventRecord.name
        return false;
    }
},

// Features named by the properties are included.
// An object is used to configure the feature.
features : {
    eventTooltip : {
        // Configuration options are passed on to the tooltip instance
        // We want the tooltip's left edge aligned to the right edge of the event if possible.
        align : 'l-r'
    }
}
});

const panel = window.panel = new Panel({
    appendTo : 'wrapper',
    width : 0,
    title : 'Event Edit',
    collapsible : true,
    collapsed : true,
    items : {
        nameField : {
            type : 'text',
            label : 'name',
        }
    },
    bbar : {
        items : {
            saveButton : {
                type : 'button',
                text : 'save',
                onAction() {
                    calendar.selectedEvents[0].set('name', panel.widgetMap.nameField.value);
                    // collapse the panel
                    panel.collapse();
                    // set the fields to empty
                    panel.widgetMap.nameField.value = '';
                }
            }
        }
    }
});

And here is the output in the video attached.

Exactly what I'm looking for. Do you have a sample for Angular?

I'm unable to use panel.expand() using ViewChild decorator. What is the angular way of doing it?

I tried property binding for

[collapsed]="true"

but changing the value to false does not change the behaviour. Only the initial value true/false is taken into account.

tasnim wrote: ↑Wed Jan 04, 2023 9:33 am

Hi,
Here is the approach you can follow to achieve this

1. Add a https://bryntum.com/products/calendar/docs/api/Core/widget/Panel to your calendar
2. make it collapsible by setting collapsible to true
3. And then listen to https://bryntum.com/products/calendar/docs/api/Calendar/feature/EventEdit#event-beforeEventEdit event and return false from it to prevent the popup editor and open the panel by calling panel.expand()
4. set eventRecord values to the panel items

Here is an example of how you can achieve it

const calendar = new Calendar({
    // Start life looking at this date
    date : new Date(2020, 9, 12),

// CrudManager arranges loading and syncing of data in JSON form from/to a web service
crudManager : {
    transport : {
        load : {
            url : 'data/data.json'
        }
    },
    autoLoad : true
},

appendTo : 'wrapper',

listeners : {
    beforeEventEdit({ eventRecord }) {
        panel.expand();
        panel.widgetMap.nameField.value = eventRecord.name
        return false;
    }
},

// Features named by the properties are included.
// An object is used to configure the feature.
features : {
    eventTooltip : {
        // Configuration options are passed on to the tooltip instance
        // We want the tooltip's left edge aligned to the right edge of the event if possible.
        align : 'l-r'
    }
}
});

const panel = window.panel = new Panel({
    appendTo : 'wrapper',
    width : 0,
    title : 'Event Edit',
    collapsible : true,
    collapsed : true,
    items : {
        nameField : {
            type : 'text',
            label : 'name',
        }
    },
    bbar : {
        items : {
            saveButton : {
                type : 'button',
                text : 'save',
                onAction() {
                    calendar.selectedEvents[0].set('name', panel.widgetMap.nameField.value);
                    // collapse the panel
                    panel.collapse();
                    // set the fields to empty
                    panel.widgetMap.nameField.value = '';
                }
            }
        }
    }
});

And here is the output in the video attached.

I've created an Angular demo for you

Here is the output of angular demo

Please check the attached zip

Probably best not to throw the event editor out. It does a lot.

Try configuring the Calendar with this:

    onBeforeEventEdit() {
        const { editor } = this.features.eventEdit;

        editor.on({
            beforeShow : () => {
                editor._centered = false;
            },
            once       : true
        });
        editor.floating = false;
        editor._centered = true;
        editor.render(this.element.parentNode); // or this.contentElement
    },

Obviously the calendar.element.parentNode needs the correct CSS. Probably

display : flex;
flex-direction : row;
align-items : stretch
}

This should be easier: https://github.com/bryntum/support/issues/5873

You could render the editor to this.contentElement. That should Just Work, and then showing it does not affect the top toolbar