Add custom hyperlink after jquery fullcalendar load on each day & stop prevent / propogation on click of hyperlink

Question

I am using jquery fullcalendar with ASP.NET MVC.

I have implemented successfully but I want to display a hyperlink after calendar load on each day.

I have set the link as well but I got a problem when I click on it because I have also done the dayClick event as well so when I click on the link that click fire dayclick event not the hyperlink.

I want to open new tab on click of that link not the dayclick event.

How should I do this?

Anyone if done help me with this problem.

Thanks in advance.

Here is a Code sample:

Use [event.stopPropagation()](https://api.jquery.com/event.stoppropagation/) — Anupam, Dec 28 '16 at 07:20
Should I give this on the anchor tag that I have used on each day? — 3 rules, Dec 28 '16 at 07:21
Possible duplicate of [jquery stop child triggering parent event](http://stackoverflow.com/questions/2364629/jquery-stop-child-triggering-parent-event) — Anupam, Dec 28 '16 at 07:21
You can create an object which contain id of event as well as href link and on click of event iterate that object compare id and using window.location.href to redirect to the repetid link. it may help you — black_pottery_beauty, Dec 28 '16 at 07:26
@padhiyar do you have event id and url where you want to redirect? — black_pottery_beauty, Dec 28 '16 at 07:40
@Console.log I have link of href on which I want to redirect the page in new tab not existing page. — 3 rules, Dec 28 '16 at 07:41
Can you add some code which you have tried in your question. Add relevant html and the click handler of the link — Anupam, Dec 28 '16 at 08:08
Where is thehyper link click handler in your code? I am unable to locate it — Anupam, Dec 28 '16 at 10:04
@anu it is inside the second function at $(".fc-day-number"... last third line — 3 rules, Dec 28 '16 at 10:05
Try my answer. Put it outside this calendar code maybe inside `$(document).ready()` function — Anupam, Dec 28 '16 at 10:16

Anupam · Accepted Answer · 2016-12-28T12:00:13.760

1

As per your updated post and comments following should work

$(document).on('click','.schedulelink',function(e){
   e.stopPropagation();
});

DEMO

This will prevent click event on your link to bubble up to its parents.

Read more about stopPropagation() here

Note: I have added document in selector as example, replace with appropriate parent, read more about on()

DEMO .In this demo clicking in box will show alert but clicking on link will open new tab

EDIT: Since this is not working in your environment(for some reason which you need to figure out), here is an alternate approach. check for the target element in your dayClick handler and based on that perform action.

dayClick: function(date, allDay, jsEvent, view) { 
  if (!$(jsEvent.target).hasClass('schedulelink')) { 
    //do your task
  } 
}

DEMO

edited Dec 28 '16 at 12:00

answered Dec 28 '16 at 10:13

Anupam

7,966
3
41
63

No you get me wrong I want to open the page on new tab on click of hyperlink now click is not opening the tab it prevents to open because of above code. And I don't want to trigger dayClick event on click of hyperlink as well. – 3 rules Dec 28 '16 at 10:19
Check the demo in my edited answer. There might be some other error in your code. Check your console, are you getting any error when you click the link. Put some `console.log()` in the function I posted and check if it is being printed – Anupam Dec 28 '16 at 10:31
Yes exactly the same what I wanted thanks. Can you explain me how it not triggered back event in little bit explanation? – 3 rules Dec 28 '16 at 10:35
Read about [stopPropagation()](https://api.jquery.com/event.stoppropagation/) in the jquery docs. This fucntion prevents the current event to bubble up to DOM tree. – Anupam Dec 28 '16 at 10:38
No no no sorry it remains the same. it calles the dayclick event. – 3 rules Dec 28 '16 at 10:38
I want to stop calling the dayclick event may be not stoppropogation. – 3 rules Dec 28 '16 at 10:40
Have you checked your console? As suggested earlier put some console.log in this handler and check response. – Anupam Dec 28 '16 at 10:41
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/131686/discussion-between-padhiyar-and-anu). – 3 rules Dec 28 '16 at 10:44

Add custom hyperlink after jquery fullcalendar load on each day & stop prevent / propogation on click of hyperlink

1 Answers1