Topic: Bootstrap 5 Calendar Events
Hi, I'm brand new to MDB and I have some questions... :)
Where can I find more info about the Bootstrap 5 Calendar? I looked over the overview and api tabs.
I cannot find details on the event object like a list of all the event attributes. Are there more attributes than summary, description, start, end, and color? Is there an all day attribute?
I was able to see addEvent and editEvent work in a snippet. However, when I moved an event from one day to another, the editEvent didn't fire. Is there an movedEvent event?
Thank you!
Is there an easy way to raise an "editEvent.mdb.calendar" event when items are dragged to another day?
I was able to add an alert to the "_handleDrop" function but I wasn't able to trigger the even. I tried a few permutations of EventHandler.trigger:
EventHandler.trigger(this._element,'editEvent.mdb.calendar',event);
EventHandler.trigger(this._element,'editEvent.mdb.calendar',this._activeEvent);
EventHandler.trigger(this._element,'editEvent.mdb.calendar',this.events[this.activeEventIndex]);
Any suggestions? I just need the edit event to fire...
Thank you!
Thank you for the answers. I plan to ask for a refund. I paid as I could not read the docs / API info and then once I paid the documentation is lacking. Take a look at the Calendar API Events. No examples for the editEvent. No info on the Event Object attributes. I only learned about these by doing google searches.
I REALLY like the plugins, but without Docs and basic functionally it makes it hard to work with and makes me wonder if the other plugins are not flushed out.
I thought about just keeping my subscription but these issues plus taking 4 days to get a simple answer about a drop event is disappointing.
I hope my comments help...
Grzegorz Bujański staff commented 2 years ago
Thanks for the suggestion.
Exactly what example for editEvent do you mean? In the API section, we always add one example, with one event showing how to listen for it.
As for the attributes, they are actually not listed in one place, but scattered over a few examples. We will add a suitable example in which all the attributes will be collected in one place.
HalGumbert priority commented 2 years ago
Look at https://mdbootstrap.com/docs/standard/plugins/calendar/#docsTabsAPI > Events > Show Code and Edit in Sandbox. One event is not enough especially when the parameters are not listed. I only found out how to use editEvent via searching thru snippets.
Here's an example of what I would expect which shows what I need: https://api.daypilot.org/daypilot-calendar-oneventmoved/
Plus details about the Event attributes: https://api.daypilot.org/daypilot-event-data/
Thank you for caring! :)
Grzegorz Bujański staff commented 2 years ago
I see. I collect it all in one task and we will discuss in the team how to include it in the documentation
HalGumbert priority commented 2 years ago
Thank you. I just emailed to request undoing my refund request. :)
Grzegorz Bujański staff commented 2 years ago
I am very happy about it :) If you have any problems or other questions, let us know
HalGumbert priority commented 2 years ago
Yes, I desperately need dragging to raise the editEvent so I can handle the date change.
Is there an easy way to raise an "editEvent.mdb.calendar" event when items are dragged to another day? I was able to add an alert to the "_handleDrop" function but I wasn't able to trigger the event. Any chance you could point me in the right direction?
I was able to add displaying event times as show in this snippet. Your calendar rocks! https://mdbootstrap.com/snippets/standard/halgumbert/3702202
Grzegorz Bujański staff commented 2 years ago
I understand that the alert worked correctly?Try like this:- in _handleDrop before refresh() add: EventHandler.trigger(this._element, 'editEvent.calendar', { editedEvent: event });- in js to catch event: window.addEventListener('editEvent.calendar', (e) => { console.log(e.editedEvent); });
HalGumbert priority commented 2 years ago
THANK YOU SO MUCH! I was able to add this to all.min.js in the _handleDrop function and it's triggering: C.trigger(this._element,"editEvent.mdb.calendar",a), this.refresh()
:)
Grzegorz Bujański staff commented 2 years ago
You're welcome. If you have any more problems, let me know :)
Stylezst premium commented 2 years ago
hey, can you please explain me how you did in the given link. https://mdbootstrap.com/snippets/standard/halgumbert/3702202 . actually i wanted to change the default list view to the modified one that you done in the above link. can you please tell me that how you did this. Thanks and regards.
Grzegorz Bujański staff commented 2 years ago
Unfortunately, we are not able to say exactly how it was done - the snippet was made by @HalGumbert and he made these changes. It's hard for me to say whether he added only additional styles or modified the plugin src code
When an item is dragged and dropped, should the editEvent js event fire?
When I click an event and commit the changed in a dialog, the following code does run. But when I drag and drop an item the following code does not fire. Dragging an item to another day is an edit, just not via a dialog.
Is there a way to fire an event when an item is dropped?
calendarElement.addEventListener('editEvent.mdb.calendar',(e)=>{
alert(e.color.background + " / " + e.color.foreground );
alert(e.start.date + " / " + e.start.datetime + " / " + e.start.datetime );
alert(e.end.date + " / " + e.end.datetime + " / " + e.end.datetime);
alert(e.description);
alert(e.summary);
})
Grzegorz Bujański staff commented 2 years ago
Not at the moment, but it is actually an edit event action and the editEvent event should be triggered. I will add a task for fix this to our to-list
HalGumbert priority commented 2 years ago
Thank you for the clear answer.
Hi!
All information about this plugin is available on our website. This is the only documentation. If an option is not in the documentation, it means that our plugin simply does not offer such an option.
Currently, these are the only attributes for events that are supported. We plan to add the ability to customize attributes for events.
Can you send a snippet in which these events do not work for you? We'll check it.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.10.2
- Device: Snippet
- Browser: Safari
- OS: Mac OS 12.2.1
- Provided sample code: No
- Provided link: No