Our powerful JS Calendar component


Post by tmcuong »

Calendar can put avatar image and set border color in task cell and can customize popup new task add some field in this ?
Thanks a lot.


Post by mats »

Hello,

Sure, pretty much anything can be done. Can you please share an image of what you are looking for?


Post by tmcuong »

How can I post image in this area ?


Post by mats »

Click Full Editor and drag drop an image onto the text area.


Post by tmcuong »

Can I custom dialog popup like picture or when I create a new task in calendar it can open my dialog instead of calendar popup ?

calendar1.png
calendar1.png (60.09 KiB) Viewed 980 times
calendar2.png
calendar2.png (78.58 KiB) Viewed 980 times

It can please guide me to do it.
Thanks a lot


Post by saki »

We have the Angular custom event editor demo here: https://bryntum.com/examples/scheduler/frameworks/angular/custom-event-editor/dist/custom-event-editor/

It is not a Calendar demo but the principles are same (Calendar extends Scheduler)

This is the excerpt from app.component.ts file of that example. The key is to listen to beforeEventEdit event, open your own editor and return false from the listener.

export class AppComponent implements AfterViewInit {
    schedulerConfig: any = schedulerConfig;

    @ViewChild(BryntumSchedulerComponent, { static : true }) schedulerComponent: BryntumSchedulerComponent;
    private scheduler: Scheduler;

    constructor(public editor: MatDialog) { }

    beforeEventEdit(event: any): boolean {
        const
            { eventRecord, resourceRecord, eventEdit } = event,
            editorConfig = new MatDialogConfig();

        Object.assign(editorConfig, {
            disableClose : false,
            autoFocus    : true,
            width        : '500px',
            data         : {
                eventRecord,
                resourceRecord,
                eventStore : eventEdit.eventStore
            }
        });

        // console.log('data=', editorConfig.data);
        this.editor.open(EventEditorComponent, editorConfig);

        // suppress default event editor
        return false;
    }

    ngAfterViewInit(): void {
        // Store Scheduler instance
        this.scheduler = this.schedulerComponent.instance;
        // install beforeEventEdit listener
        this.scheduler.on('beforeEventEdit', this.beforeEventEdit.bind(this));
    }

Post by tmcuong »

That mean I can not use calendar add beforeEventEdit event to call my custom dialog and add avatar in item task ? Will you support add beforeEventEdit event to call call my custom dialog and add avatar in item task in calendar with version license ?

wait answer from you soon


Post by saki »

Can I custom dialog popup like picture or when I create a new task in calendar it can open my dialog instead of calendar popup ?

My answer was to this question.

Otherwise, I am afraid that I do not fully get what you are trying to solve.

If you want to upload an image then yes, we do have https://bryntum.com/docs/calendar/api/Core/widget/FileField that you can either add to an existing event editor as described here: https://bryntum.com/docs/calendar/api/Calendar/feature/EventEdit#config-items

You can also use FileField in your own event edit popup.


Post by tmcuong »

code.png
code.png (17.06 KiB) Viewed 940 times

I have error on it
this.editor.open(EventEditorComponent, editorConfig)

Please help me to fix bug and give me html EventEditorComponent example.

Thanks a lot :)


Post by saki »

The code above was not meant to be copy&pasted and supposed to work. this.editor is a service injected in the constructor an it part of Angular Material component library The complete example of how to use MatDialog can be found here: https://blog.angular-university.io/angular-material-dialog/

Source of EventEditorComponent is included in the mentioned demo – you can download the Scheduler trial from https://bryntum.com


Post Reply