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.
Support Forum
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));
}
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.
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