fullcalendar function on load

Question

With the agenda view, 7 days are displayed on my screen and i have buttons to navigate trough the month (ie go to next day). I have a function that give me on click the start and end of the timeslot i clicked. It works fine on the 7 days but only on the loaded page, but if i click to go to the next day and i click on a timeslot it don't work anymore. I check the html structure it still the same but my function don't work.

here is my code :

$("div.fc-slats table tbody tr").click(function () {
                var borne_sup = $(this).attr("data-time");
                var borne_inf = $(this).next().attr("data-time");
                console.log(borne_sup);
                console.log(borne_inf);
            });

Can you help me please ?

score 1 · Answer 1 · answered Feb 28 '19 at 23:13

1

If you are only adding the click event when the calendar is first rendered it will be attached to each row at that point. When you click next new elements will be added to the DOM so if you don't run the code again the elements won't have the click events attached.

Fixing that should solve the problem however an alternative approach would be to use the FullCalendar callback eventClick, this gives you access to the event you have clicked on and you don't have to manually attach a click handler.

eventClick(event, jsEvent, view) {
  console.log(event.start, event.end);
}

Example Codepen

answered Feb 28 '19 at 23:13

Ally Murray

599
1
6
16

Thanks for the reply , So i should use $(document).change ? – fabi1 Mar 01 '19 at 13:09
The best thing to do would be to use the provided click event call back when initialising the calendar. Is there a reason you don't want to use that? Change is for input, textarea or select elements. https://stackoverflow.com/a/12495240/3891834 – Ally Murray Mar 01 '19 at 13:45

score 0 · Accepted Answer · answered Mar 01 '19 at 15:26

0

I am new in web developement so i'm not sure how to do it, but i found another way to do it :

$("body").on("click", "div.fc-slats table tbody tr", function () {
                borne_sup = $(this).attr("data-time");
                borne_inf = $(this).next().attr("data-time");
                console.log(borne_sup);
                console.log(borne_inf);

            });

Thank you for your help.

answered Mar 01 '19 at 15:26

fabi1

11
3

Not sure how to do what? If you are talking about using the eventClick callback there was a demonstration of using that in the CodePen example I created. – Ally Murray Mar 01 '19 at 17:10
I'm sorry i didn't see that you sent me the codepen example. – fabi1 Mar 07 '19 at 13:58
That's ok, I would still suggest checking it out. Lots of libraries provide callbacks like this to give you hooks into the library. It saves you trying to attach events to random DOM elements and when they are re-rendered having to ensure the events are re-attached. – Ally Murray Mar 07 '19 at 17:10

fullcalendar function on load

2 Answers2