Develop Reference

How to highlight the entire event on Event Click in FullCalendar

I am trying to highlight an event on my calendar when user clicks. I already have some basic code, but it's not working as i expected. The way my code works now it's just highlighting for a week and not until the end of the event as it is shown in the calendar. Here's some of my code
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var lang = document.getElementsByTagName('html')[0].getAttribute('lang');
if(lang == 'hy'){
var language = hyLocale;
}else if(lang == 'ru'){
var language = ruLocale;
}else{
var language = 'en';
}
var calendar = new Calendar(calendarEl, {
locales: [ ruLocale, hyLocale],
locale: language,
plugins: [dayGridPlugin],
events: '/events/get',
eventClick: function(info) {
// This is where it resets the highlight when user clicks on another event
$('.fc-event-container a').css('background-color', '#3788d8');
// This is where i set the background color of the event when user clicks
$(info.el).css('background-color', '#00da4a');
$('#info-container').empty();
var html = 'basic html for div';
$('#info-container').append(html);
}
});
And here's what it looks like on the front end.
I want to highlight the entire event even on the next month.

I have been doing something similar. So, I would like to share my idea for you.
See if it works for you.
What I did is to assign an id to each event at my code, like,
Id for Event 1 is: no1, for Event 2 is: no2 etc.
Than I used eventRender to assign the id of event as a class name to the event, so it will assign that to each element where the event is stretched.
The code would be as follow:
eventRender: function(info) {
info.el.className += " " + info.event.id + " ";
}
Than in eventClick, use that class to assign your css at run time, as follow:
eventClick: function (info) {
$('.'+info.event.id).css("background-color", "#00da4a");
}
Note that it assigned css but to remove that css and to apply to other event element, I will leave that logic upto you :)
UPDATE:
When next or previous clicked, and event is stretching till next or previous month, you may need to use global event id variable to store selected event id.
And on next and previous button click, you may use that selected event id to change color of that event.
For example:
var gEventId = 0;
document.addEventListener("DOMContentLoaded", function () {
// First Call the Calendar Render code here...
$('.fc-next-button, .fc-prev-button').click(function(){
if (gEventId > 0)
{
$('.'+ gEventId).css("background-color", "#00da4a");
}
});
});
The gEventId is saved in eventClick as follow:
eventClick: function (info) {
gEventId = info.event.id;
$('.'+ info.event.id).css("background-color", "#00da4a");
}
To roll back selected event id to 0, you may click that event again or provide some other mean to unselect the event. The logic is simple, you need to check if clicked event id is same as already selected event id (value stored in gEventId), than set gEventId to 0 and unselect the highlighted background else highlight the background color and set gEventId to event id.

JQuery full calendar: eventResize affecting other events

I am using JQuery fullCalendar on my project. I'll go directly to my problem.
Whenever I create a new calendar event, and successfully rendered it to the calendar view, then try to resize the newly rendered event, one event keeps resizing also.
so here's my code how I rendered the created event.
this first code is the select event where I get to highlight a range of date and time.
$('#calendar').fullCalendar({
select: function(start, end){
if (start.format("YYYY-MM-DD") == end.format("YYYY-MM-DD")) {
$('#createscheduleModal').modal('show'); // opens bootstrap modal to add title
eventData = {
id: eventCount + 1,
date : start.format("YYYY-MM-DD"),
start : start.format("YYYY-MM-DD HH:mm:ss"),
end : end.format("YYYY-MM-DD HH:mm:ss"),
teacher : auth_id
}
}else{
$('.calendar-view').fullCalendar('unselect');
}
eventCount++;
},
});
Then after selecting date ranges, a modal will pop-up so the user can enter a title for the calendar event. in the modal, there is a button with id="btn-save-sched", when the user click the button it saves the calendar event to the database and render it to the calendar. here is the code for this
$('#btn-save-sched').click(function(){
eventData.title = $('#event_name').val(); // add title to eventData object
if ($('#event_name').val() == "" || $('#event_name').val() == null) {
swal('Ooops!','Please enter an event name','error');
}else{
$.ajax({
url : teacher_ajax,
type : 'POST',
data : eventData,
success : function(res){
eventData.editable = true; //set this event to be editable
$('.calendar-view').fullCalendar('renderEvent', eventData, true);
$('#event_name').val('');
$('#createscheduleModal').modal('hide');
}
})
}
});
so the code above successfully renders the calendar event into the calendar then when I try to resize this newly created event, another event keeps resizing together with the new event.
Please see the gif below what's happening when I add a new event
Thanks guys!

Problems with click function in JQuery

When I add a comment, and hit the click-able text "Edit" the alert box doesn't pop up. First when I add the second comment, I'm able to hit the "edit" on the first one comment, and the alert box pop up.
Why that??
Live Demo
function addComment(name1) {
var container = $('#divComments');
var inputs = container.find('label');
var id = inputs.length + 1;
var div = $('<div />', {
class: 'CommentStyle'
});
$('<label />', {
id: 'comment' + id,
text: name1
}).appendTo(div);
var d = new Date();
var $fulaDate = $('<div class="floatleft">' + d.getFullYear() + "-" + monthNames[d.getMonth()] + "-" + d.getDate() + "T" + d.getHours() + ":" + d.getMinutes() + '</div>').appendTo(div);
var $edit = $('<p />', { class: 'edit', text: 'Edit' }).addClass('edit').appendTo(div);
$('.edit').click(function () {
alert('Hallo');
});
div.appendTo(container);
}

You need to use event delegation for dynamically created elements:
$('#divComments').on('click','.edit',function () {
alert('Hallo');
});
Also, as suggested by #Archer, you need to move the click handler outside of your function to avoid nested click events from firing multiple times.
Updated Fiddle

Problem with your implementation is that when you are attaching event like
var $edit = $('<p />', { class: 'edit', text: 'Edit' }).addClass('edit').appendTo(div);
$('.edit').click(function () {
alert('Hallo');
});
Edit element which you created just now is not added to DOM it is appeded to div only, which is not added to DOM. thus in short it doesn't exists in DOM, thus event is not binded with the button.
So to fix the issue instead of binding event to $('.edit') you need to bind event with $edit.
var $edit = $('<p />', { class: 'edit', text: 'Edit' }).appendTo(div);
$edit.click(function () {
alert('Hallo');
});
DEMO
However I would recommend you to use Event Delegation as
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
Code
function addComment(name1) {
}
$('#divComments').on('click', '.edit', function () {
alert('Hallo');
});
DEMO with event delegation

Fullcalendar popover

I wanna make popover for add new event when user will click to day ("select" callback in jsEvent.pageX and jsEvent.pageY parameter but Idea where is this popup still sticked on clicked element looks better.
So my working code for stick popup to some element :
$('#my-button').popover({header: '#my-popover > .headerrr', content: '#my-popover > .contenttt'});
html
<a id="my-button">Popover</a>
I already tried something like this:
select: function(start, end, allDay, jsEvent) {
element.popover({header: '#my-popover > .headerrr', content: '#my-popover > .contenttt'});
// ........
},
But isn't working.
Any help will very greatful!

You have to add,
var element = $(jsEvent.srcElement);

I have similar issue with a modal.
I bind the event over the eventRender of the calendar. And fill over the eventClick.
var calendarOptions = {
eventRender: function (event, element) {
if (event.className[0] === "someClassName") {
//here i bind, the link of the event
};
},
eventClick: function (event, jsEvent) {
if (event.className[0] === "someClassEvent") {
//or here
}
};
http://arshaw.com/fullcalendar/docs/mouse/eventClick/
http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

Passing eventobejct in jquery

I want to pass eventObject with trigger function, means when i manually trigger any event say:
$(".test").bind({ click : Testing });
$('.test').trigger("click");
function Testing(e)
{
}
When the function testing is called by mouseclick , the parameter e contains the eventobject, so i want this same thing when we trigger it manually.Can we pass eventobject when we trigger any event manually, Is this possible?

As gdoron points out (+1), jQuery will supply the event object for you. But you can create it explicitly if you like, to fill it in with information that jQuery can't fill in for you. You can create an Event object and pass it into trigger.
Here's an example of both using the default event object and creating your own: Live copy | source
jQuery(function($) {
$(".test").click(function(e) {
display("Received click on target");
display("typeof e = " + typeof e);
if (e) {
display("e.type = " + e.type);
if (e.type === "click") {
display("Coords: (" + e.pageX + "," + e.pageY + ")");
}
}
});
//Create a new jQuery.Event object without the "new" operator.
var e = $.Event("click");
// Fill in more info
e.pageX = 42;
e.pageY = 27;
// Trigger an artificial click event
display("Issuing a click via <code>$('.test').trigger('click')</code>");
$('.test').trigger("click");
// Trigger an artificial click event
display("Issuing a click creating our own event object with more info on it.");
$('.test').trigger(e);
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});

You don't need to do anything, the Event object is there already when you trigger an event as well....
The event object is always passed as the first parameter to an event handler
...
...
trigger docs
Live DEMO