-
|
I would like to have an X in the top right, to the right of ec-event-time, so a user can click it to delete the event. Is that possible? If not what is the best way to handle deleting events? |
Beta Was this translation helpful? Give feedback.
Replies: 8 comments 4 replies
-
|
I figured it out in case anyone is wondering.
.cal-container { .cal-header { .cal-body { |
Beta Was this translation helpful? Give feedback.
-
|
One of the earlier examples is also available at the link in this comment. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks. Is there a way to know when an event is removed from the DOM. Right
now I wait 1 second to save it to the db.
…On Thu, Mar 9, 2023 at 2:12 AM Vladimir ***@***.***> wrote:
One of the earlier examples is also available at the link in this comment
<#25 (comment)>.
—
Reply to this email directly, view it on GitHub
<#91 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAQIE7QYJTVW2FEBFKSAENLW3F7EZANCNFSM6AAAAAAVT4WAAA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
Sorry, what's stopping you from sending a request right away? |
Beta Was this translation helpful? Give feedback.
-
|
If I send right away it doesn't pick up the change because, I assume, it
reads the DOM and the DOM has not finished updating.
…On Thu, Mar 9, 2023 at 8:45 AM Vladimir ***@***.***> wrote:
Right now I wait 1 second to save it to the db.
Sorry, what's stopping you from sending a request right away?
—
Reply to this email directly, view it on GitHub
<#91 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAQIE7RZJIJYSR46DKIILH3W3HNJNANCNFSM6AAAAAAVT4WAAA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
It's hard to understand how your code works, but something is clearly wrong with it if it depends on the DOM structure. In general, the sequence of actions should be as follows:
That is, the |
Beta Was this translation helpful? Give feedback.
-
|
In the demo you pointed to
JS Bin - Collaborative JavaScript Debugging
<https://jsbin.com/ximakozife/edit?js,output>
it says
eventClick: function(info) {
if (info.event.display === 'auto') {
let btn = info.el.querySelector('button');
if (info.jsEvent.target === btn) {
ec.removeEventById(info.event.id);
}
}
}
…On Thu, Mar 9, 2023 at 9:00 AM Vladimir ***@***.***> wrote:
It's hard to understand how your code works, but something is clearly
wrong with it if it depends on the DOM structure.
In general, the sequence of actions should be as follows:
1. The calendar loads events from the server (see eventSources
<https://github.com/vkurko/calendar#eventsources>)
2. When you click on Delete, you send a delete request to the server
3. At the end of delete request, you call refetchEvents()
<https://github.com/vkurko/calendar#refetchevents> and the actions are
repeated again
That is, the removeEventById() is not present at all in these actions.
—
Reply to this email directly, view it on GitHub
<#91 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAQIE7W26CN6HXOVI7FDLRLW3HPAFANCNFSM6AAAAAAVT4WAAA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
Yes, but this is a demo. It does not interact with the server and the database 😄 |
Beta Was this translation helpful? Give feedback.
-
|
Should I do something like this?
eventClick: function(info) {
if (info.event.display === 'auto') {
let btn = info.el.querySelector('button');
if (info.jsEvent.target === btn) {
ec = ec.removeEventById(info.event.id);
let events = ec.getEvents();
// save events to the db here?
}
}
}
…On Thu, Mar 9, 2023 at 9:06 AM Vladimir ***@***.***> wrote:
Yes, but this is a demo. It does not interact with the server and the
database 😄
—
Reply to this email directly, view it on GitHub
<#91 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAQIE7QMM6OXDLZJVWQQUJ3W3HPVHANCNFSM6AAAAAAVT4WAAA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
That way I dont need to grab all the events from the db
…On Thu, Mar 9, 2023 at 9:08 AM Bob Mancarella ***@***.***> wrote:
Should I do something like this?
eventClick: function(info) {
if (info.event.display === 'auto') {
let btn = info.el.querySelector('button');
if (info.jsEvent.target === btn) {
ec = ec.removeEventById(info.event.id);
let events = ec.getEvents();
// save events to the db here?
}
}
}
On Thu, Mar 9, 2023 at 9:06 AM Vladimir ***@***.***> wrote:
> Yes, but this is a demo. It does not interact with the server and the
> database 😄
>
> —
> Reply to this email directly, view it on GitHub
> <#91 (reply in thread)>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AAQIE7QMM6OXDLZJVWQQUJ3W3HPVHANCNFSM6AAAAAAVT4WAAA>
> .
> You are receiving this because you authored the thread.Message ID:
> ***@***.***>
>
|
Beta Was this translation helpful? Give feedback.
-
|
I get what you're saying. I will relook at how I'm saving to the db.
Thanks
…On Thu, Mar 9, 2023 at 9:11 AM Bob Mancarella ***@***.***> wrote:
That way I dont need to grab all the events from the db
On Thu, Mar 9, 2023 at 9:08 AM Bob Mancarella ***@***.***> wrote:
> Should I do something like this?
>
> eventClick: function(info) {
> if (info.event.display === 'auto') {
> let btn = info.el.querySelector('button');
> if (info.jsEvent.target === btn) {
> ec = ec.removeEventById(info.event.id);
> let events = ec.getEvents();
> // save events to the db here?
> }
> }
> }
>
> On Thu, Mar 9, 2023 at 9:06 AM Vladimir ***@***.***> wrote:
>
>> Yes, but this is a demo. It does not interact with the server and the
>> database 😄
>>
>> —
>> Reply to this email directly, view it on GitHub
>> <#91 (reply in thread)>,
>> or unsubscribe
>> <https://github.com/notifications/unsubscribe-auth/AAQIE7QMM6OXDLZJVWQQUJ3W3HPVHANCNFSM6AAAAAAVT4WAAA>
>> .
>> You are receiving this because you authored the thread.Message ID:
>> ***@***.***>
>>
>
|
Beta Was this translation helpful? Give feedback.
-
|
No problem. Just remember that my recommendations are not the ultimate truth. Choose the method that best suits your case. |
Beta Was this translation helpful? Give feedback.
I figured it out in case anyone is wondering.
calendar.eventCalendar.setOption('eventContent', (info) => { return {html: '<div class="cal-container"><div class="cal-header"><div>' + info.timeText + '</div><div>X</div></div><div class="cal-body">BODY</div></div>'}; }); calendar.eventCalendar.setOption('eventClick', (info) => { if ((info.jsEvent.layerX > info.el.offsetWidth - 20) && (info.jsEvent.layerY < 20)) { calendar.eventCalendar.removeEventById(info.event.id); setTimeout(() => { calendar.saveCalendarEvents(); }, 1000); } });.cal-container {
height: 100%;
display: grid;
grid-template-rows:20px 1fr;
}
.cal-header {
display: flex;
justify-content: space-between;
align-items: center;
p…