Develop Reference

Clicking the "add" Button within the fullcalendar cell overrides the Event's click

The click of the ADD EVENT field, inside the fullcalendar cell, is superimposing the click of the event.
I have an ADD field inside the cells of the fullcalendar, which creates a quick link to insert an event.
The problem is when the same cell (day) has an event.
I miss the event click that serves to detail.
I need the two clicks to work.
My Codepen
https://codepen.io/lucasmormilho/pen/qBXvaPj
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2021-11-07',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventClick: function(){
alert("Details Event");//click details event
},
dayCellDidMount: function (arg) {
if (!arg.el.classList.contains("fc-day-sun") && !arg.el.classList.contains("fc-day-sat") && !arg.el.classList.contains("fc-day-past")) {
var theElement = arg.el.querySelectorAll(".fc-daygrid-day-frame > .fc-daygrid-day-events")[0]
setTimeout(function () {
theElement.innerHTML = theElement.innerHTML + '<div class="text-center"><span style="color:Gray" onclick="AddEvento()" >ADD</span></div>';
}, 10)
}
},
events: [
{
title: 'All Day Event',
start: '2021-11-01'
},
{
title: 'Long Event',
start: '2021-11-07',
end: '2021-11-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2021-11-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2021-11-16T16:00:00'
},
{
title: 'Conference',
start: '2021-11-11',
end: '2021-11-13'
},
{
title: 'Meeting',
start: '2021-11-12T10:30:00',
end: '2021-11-12T12:30:00'
},
{
title: 'Lunch',
start: '2021-11-12T12:00:00'
},
{
title: 'Meeting',
start: '2021-11-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2021-11-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2021-11-19'
}
]
});
calendar.render();
});
function AddEvento() {
alert("ADD EVENT"); //click ADD event
};

Bootstrap Fullcalendar Modal for single event

I am trying to customize the bootstrap fullcalendar.
The below example the modal popup for every event on click working fine. But I want to achieve the modal for one or two specific event on click.
Comment for further clarification about the question.
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
height: 600,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent', {
title: title,
start: start,
end: end,
allDay: allDay,
title: 'the title',
content: function() {
return $("#popoverContent").html();
},
template: popTemplate,
placement: 'left',
html: 'true',
trigger: 'click',
animation: 'true',
container: 'body'
},
true
);
}
calendar.fullCalendar('unselect');
},
eventRender: function(event, element) {
element.popover({
title: element.find('.fc-title, .fc-list-item-title').html() + '<span class="popover-title"><a data-toggle="popover" data-trigger="focus" class="close">&times</a></span>',
placement: 'top',
html: true,
trigger: 'manual',
animation: true,
container: 'body',
content: function() {
setTimeout(function() {
element.popover('hide');
}, 20000);
return $('#popover-content').html();
}
}).on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
$(".close").click(function(e) {
e.stopPropagation();
$(this).trigger("click");
});
}).on("mouseleave", function() {
var _this = this;
setTimeout(function() {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
$(".close").click(function(e) {
e.stopPropagation();
$(this).trigger("click");
});
});
},
eventAfterRender: function(event, element) {
$(".popover").remove();
element.popover('hide');
},
eventClick: function(event, element, view) {
//element.popover('hide');
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href', event.url);
$('#calendarModal').modal();
},
editable: true,
events: [{
title: 'All Day Event',
start: new Date(y, m, 1),
description: 'This is a cool event'
}, {
title: 'Long Event',
url: 'http://stackoverflow.com',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2)
}, {
title: "Conference",
color: "#F6BB42",
start: "2019-06-04",
end: "2019-06-05"
}, {
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d - 3, 16, 0),
allDay: false
}, {
id: 999,
title: 'Repeating Event',
color: '#FB6E52',
start: new Date(y, m, d + 4, 16, 0),
allDay: false
}, {
title: 'Meeting',
color: "#DA4453",
start: new Date(y, m, d, 10, 30),
allDay: false
}, {
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
}, {
title: 'Birthday Party',
color: "#37BC9B",
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false
}, {
title: 'Click for Google1',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://stackoverflow.com',
}
]
});
var popoverElement;
});
.modal .modal-backdrop.in {
opacity: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div id="calendar"/>
<div id="calendarModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="modalTitle" class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
</div>
<div id="modalBody" class="modal-body"> modal content </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

For example, you want to display the model for Conference, Birthday Party and Meeting. Add the value in the array. After that check if the click event exists in array enable the model for that.
like.
eventClick: function(event, element, view) {
//Add the specific event list in array.
var event_array = ['Conference', 'Birthday Party', 'Meeting'];
var title = event.title;
//On click of event check clicked event exists in event_array or not. If exists display the model.
if($.inArray(title, event_array) !== -1){
//element.popover('hide');
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href', event.url);
$('#calendarModal').modal();
}
},

Highlight day cell as per given date

I need to highlight a specific day from the fullcalendar using JavaScript/jQuery. The date should be given by user input. I have provided my code below:
<style type="text/css">
.cellBg {
background: #000;
color: #fff;
}
</style>
$(document).ready(function() {
var today=new Date().toISOString().substring(0, 10);
var highligtDate="2017-12-05";
console.log('today',today);
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay,today,listMonth'
},
dayRender:function(date,cell){
date = new Date();
date = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
$('.fc-day[data-date="'+ date +'"]').addClass('cellBg');
},
///////// edit
dayClick: function (date, jsEvent, view) {
//alert('day click');
},
eventClick:
function (event, jsEvent) {
//alert('event clicked');
$('#eventpopup').modal({
backdrop: 'static'
});
},
///////////
defaultDate: today,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-05-01'
},
{
title: 'Long Event',
start: '2017-05-07',
end: '2017-05-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-16T16:00:00'
},
{
title: 'Conference',
start: '2017-05-11',
end: '2017-05-13'
},
{
title: 'Meeting',
start: '2017-05-12T10:30:00',
end: '2017-05-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-05-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-05-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-05-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-05-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-05-13T07:00:00'
},
{
title: 'Click for Google',
//url: 'http://google.com/',
start: '2017-05-28'
}
]
});
});
Here I have one date var highligtDate="2017-12-05" and I need to highlight this day cell from the calendar.

Compare the date with highligtDate and assign 'cellBg' class to it.There you do not have a condition to assign this class to particular date.
$(document).ready(function() {
var today=new Date().toISOString().substring(0, 10);
var highligtDate="2017-12-05";
console.log('today',today);
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay,today,listMonth'
},
dayRender:function(date,cell){
//date = new Date();
//date = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
//Compare the date with highligtDate and assign 'cellBg' class to it.
if(date.format('YYYY-MM-DD') == highligtDate)
{
$('.fc-day[data-date="'+ highligtDate +'"]').addClass('cellBg');
}
},
///////// edit
dayClick: function (date, jsEvent, view) {
//alert('day click');
},
eventClick:
function (event, jsEvent) {
//alert('event clicked');
$('#eventpopup').modal({
backdrop: 'static'
});
},
///////////
defaultDate: today,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-05-01'
},
{
title: 'Long Event',
start: '2017-05-07',
end: '2017-05-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-05-16T16:00:00'
},
{
title: 'Conference',
start: '2017-05-11',
end: '2017-05-13'
},
{
title: 'Meeting',
start: '2017-05-12T10:30:00',
end: '2017-05-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-05-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-05-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-05-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-05-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-05-13T07:00:00'
},
{
title: 'Click for Google',
//url: 'http://google.com/',
start: '2017-05-28'
}
]
});
});

Error- Full Calendar won't POST

How can we make the following work so it will POST the events?
The events can be added to the calendar just fine, we just need to POST them to our API. Fiddle: https://jsfiddle.net/H_INGRAM/9oup1jfb/4/
This is my first time working with Ajax.
$(document).ready(function()
{
/*
date store today date.
d store today date.
m store current month.
y store current year.
*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar(
{
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
selectable: true,
selectHelper: true,
select: function(start, end, allDay)
{
var title = prompt('Event Title:');
if (title)
{
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
});
$(document).ready(function () {
$('#fullcal').fullCalendar({
eventClick: function() {
alert('a day has been clicked!');
},
events: function (start, end, callback) {
$.ajax({
type: "POST", //WebMethods will not allow GET
url: "/events-truett-volunteership.html", //url of a webmethod - example below
data: "{'userID':'" + $('#<%= hidUserID.ClientID %>').val() + "'}", //this is what I use to pass who's calendar it is
//completely take out 'data:' line if you don't want to pass to webmethod - Important to also change webmethod to not accept any parameters
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (doc) {
var events = []; //javascript event object created here
var obj = $.parseJSON(doc.d); //.net returns json wrapped in "d"
$(obj.event).each(function () { //yours is obj.calevent
events.push({
title: $(this).attr('title'), //your calevent object has identical parameters 'title', 'start', ect, so this will work
start: $(this).attr('start'), // will be parsed into DateTime object
end: $(this).attr('end'),
id: $(this).attr('id')
});
});
callback(events);
}
});
}
});
});

definitely you will have a submit handler or button click to sent data, so inside, simply get all client events then serialize and sent to server using ajax.
$('.submitEvent').click(function(){
var clientEvent = JSON.stringify($('#calendar').fullCalendar( 'clientEvents'));
$.ajax({ // ajax call starts
url: url
data: clientEvent,
dataType: 'json',
success: function(data)
{
// success handler
}
});
});
HTML
<input type="button" class="btn btn-primary submitEvent" value="SUBMIT"/>
thanks

How to get fullcalendar to work with phonegap

I'm trying to get fullcalendar on a phonegap app. My code is working on a browser but on the android emulador it is just not showing the calendar.
I also tried to get it inside 'device ready' but if I do that I get Object [object Object] has no method 'fullCalendar' error.
inside device ready:
var app = {
initialize: function() {
this.bindEvents()
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false)
$(document).on("pageshow", app.onDeviceReady);
},
onDeviceReady: function() {
app.receivedEvent('deviceready')
},
receivedEvent: function(id){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
}
if i put it outside it will run fine on browser.. but not on emulator :/
demo: http://jsfiddle.net/KrZJr/86/
Is it possible to use fullcalendar on android or is it a plugin with the same effect that works on android?

found an example that works on phonegap. http://jsfiddle.net/Gajotres/ZSd2C/
had to use pageshow event
$(document).on('pageshow','#index',function(e,data)