Our powerful JS Calendar component


Post by ashik »

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?


Post by marcio »

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.

Best regards,
Márcio


Post by ashik »

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

Attachments
Screenshot 2023-01-04 at 11.09.07 AM.png
Screenshot 2023-01-04 at 11.09.07 AM.png (327.85 KiB) Viewed 647 times

Post by tasnim »

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.

Attachments
chrome_Ox1dLTCNf7.mp4
(1.52 MiB) Downloaded 29 times

Post by ashik »

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


Post by ashik »

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.


Post by tasnim »

I've created an Angular demo for you

Here is the output of angular demo

chrome_FiDMzmLgOO.gif
chrome_FiDMzmLgOO.gif (780.41 KiB) Viewed 618 times

Please check the attached zip

Attachments
basic.zip
(243.71 KiB) Downloaded 32 times

Post by Animal »

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
    },
dockeditor.gif
dockeditor.gif (398.42 KiB) Viewed 611 times

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

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

Post by Animal »


Post by Animal »

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


Post Reply