I noticed that every time I tried to create an event, it always appear in the top of the page. Is it possible to make it like a pop up and appear in the middle of the page?
Unfortunately not. The current implementation of the modal dialog (the Angular version) doesn't support customization of the position. It's always fixed at the top, with the height set automatically to fit the content. The height is extended automatically until it reaches 80% of the screen height.
It's a really simple modal implementation but it's designed to work well on both desktop and mobile devices with small screens. If you need more features there are many modal dialog implementations available (check the npm repository).
You can also use DayPilot.Modal which is a traditional popup but it only displays a standalone page or HTML (not an Angular component):