Drag to create an event also highlights the time in the day view - with fix.

[stuartpaulin]

I have been creating a day view scheduler with drag and drop for moving events and creating new events. This is all from code in the demo area. However I note that the demo code for 'drag to create' is on a week view, not a day view.

The issue is that when in day view, there isn't a separate column for the times down the left side, so when 'dragging out a new event the times get selected as well.

After trying different approaches, I have finally settled on a tweak in the CSS to stop the time text from being selected.

Take the code for 'Drag to create events' https://angular-calendar.com/#/drag-to-create-events and change the view to a
mwl-calendar-day-view.

Drag out some time to show the highlighting of the times on the left.

I fixed this by adding the following css:

.cal-time {
user-select: none; /* supported by Chrome and Opera /
-webkit-user-select: none; / Safari /
-khtml-user-select: none; / Konqueror HTML /
-moz-user-select: none; / Firefox /
-ms-user-select: none; / Internet Explorer/Edge */
}

https://angular-jnpcrj.stackblitz.io

Screenshots

Versions

• @angular/core: 11.2.0
• angular-calendar: 0.28.22
• Browser name and version: Firefox 85.0.2 64 bit

[matts-bot]

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider sponsoring me

[abdulrahman5020]

Hey Stuart Can you tell me how did you implement the drag to create in the dayViewScheduler

I have followed the approach from the demo but I cant see the event created visually
If I log the events I can see that they are created but nothing is appearing visually on the calendar

I think its because I am unable to get the column header index?