I wanted to create Full Calendar. FullCalendar is in modal when website opens in phone. So I created Two div tag and hiding one tag depending on phone screen.
Once User select on full Calendar, Event will be added.
longPressDelay: 1,
selectAllow: function(selectInfo){
return true;
},
selectOverlap: function(event) {
return true;
},
select: function(info){
var myid = makeid(8); // create random string
calendar.addEvent({
title: "test",
start: info.startStr + "+09:00",
end: info.endStr + "+09:00",
editable: true,
color: "#0000FF",
id: myid,
});
},
Now To add, cross button on each event I used EventDidMount and I wanted to add cross button when event background color is #0000FF.
Once Cross button is added, I used onClick event to remove event.
eventDidMount: function(event){
var v = event.event;
if(event.backgroundColor === "#0000FF"){
var myid = v.id;
var v = event.el;
let find = v.querySelector('.fc-event-main-frame');
let myhtml = `<i class="fa fa-times float-right" aria-hidden="true"></i>`;
let mydiv = document.createElement('div');
mydiv.className = 'close-event float-right';
mydiv.innerHTML = myhtml;
find.insertBefore(mydiv,find.firstChild);
mydiv.onclick = function(){
console.log("cross clicked");
myevent = calendar.getEventById(myid);
myevent.remove();
}
}
},
Removing event is working perfectly on PC screen size but when I am switching to SP screen, Cross button is not getting removed.
So On PC screen size, cross clicked is in console on clicking cross but on SP screen size onClick event is not firing.
I can not see any problem in code, How can I fix it?
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
defaultView: "month",
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: false,
editable: true,
eventLimit: true, // allow "more" link when too many events
select: function(start, end) {
var title = prompt("Event Content:");
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end,
color: $("#colorPicker").val()
};
$("#calendar").fullCalendar("renderEvent", eventData, true); // stick? = true
}
$("#calendar").fullCalendar("unselect");
},
eventRender: function(event, element) {
element
.find(".fc-content")
.prepend("<span class='closeBtn material-icons'></span>");
element.find(".closeBtn").on("click", function() {
$("#calendar").fullCalendar("removeEvents", event._id);
});
},
eventClick: function(calEvent) {
var title = prompt("Edit Event Content:", calEvent.title);
calEvent.title = title;
$("#calendar").fullCalendar("updateEvent", calEvent);
},
});
});body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
#wrap {
width: 1100px;
margin: 0 auto;
}
.closeBtn {
border-radius: 5px;
}<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
</head>
<body>
<div id='calendar'></div>
<span><input type='color' id='colorPicker'></span>
</body>
</html>