I am using a fullcalendar plugin to display various events.
My problem is when I change the month/week being viewed, then refresh, I get taken back to the current month/week, when I want to stay on the same month/week I was viewing beforehand. i.e. If it's August right now, and I go back to July, then refresh, I want the page to display the calendar for July and not August.
Code that gives a working calendar for the problem specified is given below. Note that I understand this calendar doesn't fully work (can't add events etc.), but it saving it as index.html and opening it will show the problem I have of not opening at the previous view after a refresh.
<!DOCTYPE html>
<html>
<head>
<title>Jquery Fullcalandar Integration with PHP and Mysql</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.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/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
allDaySlot: false,
editable:true,
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay'
},
events: [{"id":1,"title":"one","start":"2019-08-11 00:00:00","end":"2019-08-12 00:00:00", 'color': 'Fuchsia'}],
selectable:true,
selectHelper:true,
select: function(start, end, allDay)
{
var title = prompt("Enter Event Title");
if(title)
{
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url:"insert.php",
type:"POST",
data:{title:title, start:start, end:end},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Added Successfully");
}
})
}
},
editable:true,
eventResize:function(event)
{
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url:"update.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function(){
calendar.fullCalendar('refetchEvents');
alert('Event Update');
}
})
},
eventDrop:function(event)
{
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url:"update.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Event Updated");
}
});
},
eventClick:function(event)
{
if(confirm("Are you sure you want to remove it?"))
{
var id = event.id;
$.ajax({
url:"delete.php",
type:"POST",
data:{id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Event Removed");
}
})
}
},
});
});
</script>
</head>
<body>
<br />
<h2 align="center">Jquery Fullcalandar Integration with PHP and Mysql</h2>
<br />
<div class="container">
<div id="calendar"></div>
</div>
</body>
</html>
I wish to add a property somewhere (presumably after line 14 var calendar = $('#calendar').fullCalendar({ ) that makes it so after a refresh, I end up on the month/week I was previously on.
You can add this code to solve your problem
$(document).on('click', '.fc-next-button,.fc-prev-button', function () {
localStorage.setItem('savedMonth',$('#calendar').fullCalendar('getView').intervalStart._d);
});
if(localStorage.getItem('savedMonth')!=null){
$('#calendar').fullCalendar('gotoDate',localStorage.getItem('savedMonth'));
}
or you can do this using cookies instead of local storage
Related
I have a bootstrap fullcalendar, when I click on an empty day, the modal which allows to save the events is displayed well, but when I click on an event to modify it, the modal which allows to modify the event, does't display.
I have a bootstrap fullcalendar, when I click on an empty day, the modal which allows to save the events is displayed well, but when I click on an event to modify it, the modal which allows to modify the event, does't display.
I don't know where the problem comes from
this is my code :
<div class="modal fade" id="PrestUpt" role="dialog" class="modal fade task-modal-single in" tabindex="-1" aria-labelledby="myLargeModalLabel" >
<div class="modal-dialog modal-lg">
<div class="modal-content data">
<div id="jalil" ></div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// jQuery("#PrestUpt").modal('show');
var calendar = $('#calendar').fullCalendar({
locale: 'fr',
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
firstDay: 1,
editable:true,
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay'
},
events: 'event_load_new.php',
selectable:true,
selectHelper:true,
select: function (start, end, allDay) {
//do something when space selected
//Show 'add event' modal
// var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var start = $.fullCalendar.formatDate(start, "Y-MM-DD");
document.getElementById('start').value = start;
$('#exampleModal').modal('show');
},
editable:true,
eventResize:function(event)
{
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url:"event_update.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function(){
calendar.fullCalendar('refetchEvents');
alert("Mise à jour de l'événement");
}
})
},
eventClick: function(info) {
var idpr = info.event.id;
alert(idpr);
// datepr = datepr.substr(6, 4)+ '' +datepr.substr(3, 2)+ '' +datepr.substr(0, 2);
$.ajax({
type : 'post',
url : 'moadal_gool.php', //Here you will fetch records
data : 'idp='+idpr, //Pass $id
success : function(data){
$('#jalil').html(data);//Show fetched data from database
jQuery("#PrestUpt").modal('show');
}
});
},
eventDrop:function(event)
{
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url:"event_update.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Événement mis à jour");
}
});
},
});
});
</script>
This is how you do it...
eventClick: this.openModal.bind(this)
//then create a function openModal()
openModal(args:any){
jQuery("#PrestUpt").modal("show");
...
}
I'm relatively new to programming and some help would be greatly appreciated.
I am using fullcalendar and have got it to the point where I can add, remove & drag and drop events. My last requirement is to be able to clone events for quicker management.
I am using the following code to clone events (taken from a previous post). Currently this does not save to the database:
eventClick: function (event, jsEvent, ui, view) {
if (!copyKey) return;
var eClone = {
id: event.id+1,
title: event.title,
tooling: event.tooling,
start: event.start,
end: event.end
};
$('#calendar').fullCalendar('renderEvent', eClone);
},
An example piece of code I have used to update my SQL database is here:
eventDrop:function(event)
{
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var tooling = event.tooling;
var id = event.id;
$.ajax({
url:"update.php",
type:"POST",
data:{title:title, tooling:tooling, start:start, end:end, id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
}
});
},
My main confusion is how to use AJAX for my clone function, also making sure to increment the id when a new event is created.
Had to make use of insert.php rather than update.php...
Final working code:
eventClick: function (event, jsEvent, ui, view)
{
if (!copyKey) return;
var eClone = {
id: event.id,
title: event.title,
tooling: event.tooling,
start: event.start,
end: event.end
};
$('#calendar').fullCalendar('renderEvent', eClone);
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var tooling = event.tooling;
var id = event.id;
$.ajax({
url:"insert.php",
type:"POST",
data:{title:title, tooling:tooling, start:start, end:end, id:id},
success:function()
{
$('#calendar').fullCalendar('renderEvent', eClone);
calendar.fullCalendar('refetchEvents');
}
});
},
I want to be able to use the API from the code below to display data in a formatted way such as this example.
Job Title: Agricultural and Related Trades
Percentage of Occupancies in Area: 15.41%
You can find my poor attempt to display the data below. I am very new to Ajax, jQuery, JavaScript, etc.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function() {
$.ajax({
url: "http://api.lmiforall.org.uk/api/v1/census/jobs_breakdown?area=55.9895989531941,-3.796229726988194",
type: "get",
dataType: "json",
success: function(data) {
console.log(data[0].area);
outputString= data[0].description.percentage;
var paragraph = $("<p />", {
text: outputString
});
$("body").append(paragraph);
}
});
});
</script>
After successfully execute your GET request you will get your response at data variable now you can run a for loop to populate your expected outcome 'HTML' TEXT
than you can append it on your HTML body
I have used here JavaScript toFixed() Method keeping only two decimals
$(function() {
$.ajax({
url: "http://api.lmiforall.org.uk/api/v1/census/jobs_breakdown?area=55.9895989531941,-3.796229726988194",
method: "GET",
dataType: "json",
success: function(data) {
var str = "";
for(var i= 0; i < data.jobsBreakdown.length; i++){
str +='Job Title : '+data.jobsBreakdown[i].description+' and Related Trades <br> Percentage of Occupancies in Area : '+data.jobsBreakdown[i].percentage.toPrecision(2)+'% <br><br>';
}
$("body").html(str);
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Something like this is likely what you want:
<script>
$(function() {
$.ajax({
url: "http://api.lmiforall.org.uk/api/v1/census/jobs_breakdown?area=55.9895989531941,-3.796229726988194",
type: "get",
dataType: "json",
success: function(data) {
data.jobsBreakdown.forEach(function(job) {
var job_text = "Job Title: " + job.description;
var percentage_text = "Percentage of Occupancies in Area: " + job.percentage.toFixed(2) + "%"
$("body").append("<div style='margin-bottom: 10px;'><div>" + job_text + "</div><div>" + percentage_text + "</div></div>")
})
}
});
});
</script>
You can use string templates to create your paragraph content.
Use the <br /> HTML element to make a new line in the paraghraph.
let data = [{
area: 'Agricultural and Related Trades',
percentage: 15.41
}]
var paragraph = document.createElement('p');
paragraph.innerHTML = `Job Title: ${data[0].area}<br/>
Percentage of Occupancies in Area: ${data[0].percentage}%"`;
document.body.appendChild(paragraph);
You need to define a function to render a single item of description and percentage.
For parsing the percentage, you can use Number object
When you get the data back from Ajax, you need to loop on the items and pass each one of them to your render function you defined earlier (here I used forEach).
Generally, as rule of thumb, you have to split your code into functions each with single responsibility.
function renderItem(itemData) {
const title = $('<p/>').text('Job Title: ' + itemData.description);
const percentage = $('<p/>').text('Percentage of Occupancies in Area: '+ new Number(itemData.percentage).toFixed(2) + '%');
const item = $('<li/>').append(title, percentage);
$('#result').append(item);
}
$(function() {
$.ajax({
url: "http://api.lmiforall.org.uk/api/v1/census/jobs_breakdown?area=55.9895989531941,-3.796229726988194",
type: "get",
dataType: "json",
success: function(data) {
data.jobsBreakdown.forEach(renderItem);
}
});
});
Job Title: Agricultural and Related Trades
Percentage of Occupancies in Area: 15.41%
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="result"></ul>
I am trying to use fullcalendar in node.js, where the parameters for start and end time are pulled from a string with JSON.parse
I've already tried manually entering an array of objects (representing events with starting and ending times) into the events function and it works fine.
This is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-74664112-6"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-74664112-6');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- FullCalendar -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.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.4.0/fullcalendar.min.js"></script>
</head>
<body>
<h4 style="text-align:center;margin-top:0px; margin-bottom: 0px;">Heading</h4>
<div id="calendar">
</div>
<div id="availabilities">
[{"ifvID":1,"title":"testtitle","start_event":"2019-06-22T20:00:00","end_event":"2019-06-22T22:00:00"}]
</div>
<script>
$(document).ready(function() {
console.log(document.getElementById("availabilities").innerHTML);
console.log(JSON.parse(document.getElementById("availabilities").innerHTML));
console.log(JSON.parse(document.getElementById("availabilities").innerHTML)[0]);
var calendar = $('#calendar').fullCalendar({
editable:true,
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay'
},
events: JSON.parse(document.getElementById("availabilities").innerHTML),
selectable:true,
selectHelper:true,
select: function(start, end, allDay)
{
var title = prompt("Enter Event Title");
if(title)
{
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url:"insert.php",
type:"POST",
data:{title:title, start:start, end:end},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Added Successfully");
}
})
}
},
editable:true,
eventResize:function(event)
{
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url:"update.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function(){
calendar.fullCalendar('refetchEvents');
alert('Event Update');
}
})
},
eventDrop:function(event)
{
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url:"update.php",
type:"POST",
data:{title:title, start:start, end:end, id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Event Updated");
}
});
},
eventClick:function(event)
{
if(confirm("Are you sure you want to remove it?"))
{
var id = event.id;
$.ajax({
url:"delete.php",
type:"POST",
data:{id:id},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Event Removed");
}
})
}
},
});
});
</script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<!-- JQUERY -->
<!-- <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> -->
</body>
</html>
If run correctly, the event should be showing on the fullcalendar without any errors - however, when I run the code an error message saying "Cannot read property 'hasTime' of undefined TypeError: Cannot read property 'hasTime' of undefined" occurs. Here is the exact error:
jQuery.Deferred exception: Cannot read property 'hasTime' of undefined TypeError: Cannot read property 'hasTime' of undefined
at P (https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:18300)
at O (https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:18107)
at V (https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:18082)
at z (https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:17993)
at https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:15518
at Function.map (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:3309)
at p (https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:15486)
at Array.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:20605)
at Function.each (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:2715)
at constructor.Ut (https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js:6:20507) undefined
r.Deferred.exceptionHook # jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: Cannot read property 'hasTime' of undefined
at P (fullcalendar.min.js:6)
at O (fullcalendar.min.js:6)
at V (fullcalendar.min.js:6)
at z (fullcalendar.min.js:6)
at fullcalendar.min.js:6
at Function.map (jquery.min.js:2)
at p (fullcalendar.min.js:6)
at Array.<anonymous> (fullcalendar.min.js:6)
at Function.each (jquery.min.js:2)
at constructor.Ut (fullcalendar.min.js:6)
Most of the time this hastime err shows when your event property's start or end date has no value or null value in it
I have this code generate dynamically using php code:-
<div class="mailList" id="M_6">
<div class="mailListHeader" id="H_6">
<img style="float:right; display:none;" class="loaderIMG" id="LOADER_6" src="images/preloader.gif">
Sent by <strong>Admin</strong> on <strong>Oct 03 2013 02:53 PM</strong> to <strong>Received Response</strong> for Quarter <strong>3</strong> Year <strong>2013</strong>.<br>
Subject: <strong>Test Mail</strong><br>
</div>
<div class="mailListContent" id="C_6">
<div class="closeContent" id="CC_6">Close [x]</div>
<span id="SPAN_6"></span>
</div>
<div class="mailListFooter" id="F_6">
<span class="mailContentBtn" id="MCBTN_6" style="font-size:11px; color:#09C; cursor:pointer;">
View Content
</span>
<span class="mailListBtn" id="MLBTN_6" style="float:right; font-size:11px; color:#C06; cursor:pointer;">
Successfull-[0] Failed-[4]
</span>
</div>
</div>
Then, user can click View Content or Successfull-[0] Failed-[4] that will make a ajax request than display result in div mailListContent. Below is code for the jquery ajax request:-
$(".mailContentBtn, .mailListBtn").click(function(){
var currentId = $(this).attr('id');
currentId = currentId.split("_");
var actualId = currentId[1];
if($("#C_"+actualId).is(":visible")) {
$("#C_"+actualId).hide("slow","swing");
}
$("img#LOADER_"+actualId).show();
if(currentId[0]=="MCBTN") {
var dataString ="action=getMailContentByID&mailID="+actualId;
} else {
var dataString ="action=getMailListByID&mailID="+actualId;
}
$.ajax({
type: "POST",
url: "include/getMail.php",
data: dataString,
cache: false,
async: false,
success: function(html) {
$("#SPAN_"+actualId).empty();
$("#SPAN_"+actualId).append(html);
$("#C_"+actualId).show("slow","swing");
$("img#LOADER_"+actualId).hide();
}
});
});
The request and the events works fine, the problem is every time user click at View Content or Successfull-[0] Failed-[4] the loading image is not display. As you can see, I give a unique ID for every loading image than only 1 loading image will display on clik. There is no error in inspect code in Google Chrome. How can I solve this?
Thank you.
In your call to $.ajax, change the "async" option to "true". Because in your case, the $.ajax is blocking the ui thread in displaying the loading image as it is executed synchronously.
You have missed:
$(document).ready(function () {
});
try this:
<script>
$(document).ready(function () {
$(".mailContentBtn, .mailListBtn").click(function () {
var currentId = $(this).attr('id');
currentId = currentId.split("_");
var actualId = currentId[1];
if ($("#C_" + actualId).is(":visible"))
$("#C_" + actualId).hide("slow", "swing");
$("img#LOADER_" + actualId).show();
if (currentId[0] == "MCBTN") {
var dataString = "action=getMailContentByID" +
"&mailID=" + actualId;
}
else {
var dataString = "action=getMailListByID" +
"&mailID=" + actualId;
}
$.ajax({
type: "POST",
url: "include/getMail.php",
data: dataString,
cache: false,
async: false,
success: function (html) {
$("#SPAN_" + actualId).empty();
$("#SPAN_" + actualId).append(html);
$("#C_" + actualId).show("slow", "swing");
$("img#LOADER_" + actualId).hide();
}
});
});
})
</script>