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
Related
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
Please help me, in my code, Ajax and SweetAlert worked perfectly, but now I get the error on pressing submit:
The Google chrome console shows below error:
Resource interpreted as Stylesheet but transferred with MIME type
application/javascript:
"http://localhost:8000/js/jquery-3.3.1.min.js".
Any help is greatly appreciated.
Code
<link rel="stylesheet" type="text/css" href="{!! asset('js/jquery-3.3.1.min.js') !!}">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var id1 ={!! $data !!};
var hasil;
var saldo ={{$results}};
$('#jumlahUang').keyup(function () {
var yeah1 = parseInt($('#jumlahUang').val());
var yeah = parseInt($('#jenisTransaksi').val());
if (yeah == 1) {
hasil = saldo + yeah1;
} else {
hasil = saldo - yeah1;
}
if (hasil < 0) {
swal("Error", "SALDO ANDA KURANG");
} else {
$('#debugg').val(hasil);
}
});
$('#formInput').submit(function (e) {
e.preventDefault();
var id1 ={!! $data !!};
var link = "/nambahTransaksi/" + id1.id;
swal({
title: "Konfirmasi transaksi",
text: "proses transaksi?",
type: "info",
showCancelButton: true,
confirmButtonColor: "#1da1f2",
confirmButtonText: "Yakin, dong!",
closeOnConfirm: false,
showLoaderOnConfirm: true,
}, function () { //apabila sweet alert d confirm maka akan mengirim data ke simpan.php melalui proses ajax
$.ajax({
url: link,// ini salah anjing
type: 'get',
data: $('#formInput').serialize(), //serialize() untuk mengambil semua data di dalam form
dataType: "HTML",
success: function () {
setTimeout(function () {
swal({
title: "transaksi berhasil dilakukan",
text: "Terimakasih",
type: "success"
}, function () {
window.location.href = "/detailTransaksi";
});
}, 2000);
},
error: function (xhr, ajaxOptions, thrownError) {
setTimeout(function () {
swal("Error", "Tolong cek kembali SALDO anda");
}, 2000);
}
});
});
});
})
</script>
you have to use this js files,i hope its work for you.
<script src="{{ asset('assets/global/plugins/jquery.min.js') }}" type="text/javascript"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
example
$("#sub").click(function() {
var startDate = $('#fromDate').val();
var endDate = $('#toDate').val();
if (startDate !='')
{
if(endDate == '')
{
swal("Error!", "Please Select To Date field", "error");
return false;
}
}
else
{
swal("Error!", "Please Select From Date field", "error");
return false;
}
if(startDate > endDate)
{
//alert("Please Select To Date Grater Than"+startDate);
swal("Error!", "Please Select To Date Grater Than "+startDate, "error");
return false;
} });
You have this line set to be a stylesheet but it is actually a .js file.
<link rel="stylesheet" type="text/css" href="{!! asset('js/jquery-3.3.1.min.js') !!}">
Try using:
<script src="{!! asset('js/jquery-3.3.1.min.js') !!}"></script>
Also, why are you including JQuery twice? Just move your second declaration to the top, the line that says:
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
It needs to be declared before you add SweetAlert because SweetAlert is dependent on it.
EDIT: This is only a partial answer. OP still has another issue outside of this. Wanted to leave this up however as it was useful in solving part 1 of his problem.
I have show_place.php and two ajax pages photos.php and rating.php
I use this function to get content from ajax pages
function loadtab (getFile){
$.ajax({
url: getFile,
beforeSend: function() {
$(".tabcon").html('<i class="fa fa-spinner fa-spin"></i>');
},
success: function(data) {
$(".tabcon").html(data);
}
});
}
I use jQuery fancybox plugin in photos.php like this
<link rel="stylesheet" type="text/css" href="style/css/jquery.fancybox.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
and this is rating page content
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autosize.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".textarea").autosize();
$(".stars").click(function () {
var ratevalue = $(this).val();
$("#rate").val(ratevalue);
});
$("#formreview").submit(function(){
var yourname = $("#yourname").val();
var yourmail = $("#yourmail").val();
var rate = $("#rate").val();
var textrev = $("#textrev").val();
var s = {
"yourname":yourname,
"yourmail":yourmail,
"rate":rate,
"textrev":textrev
}
$.ajax({
type: "POST",
url: "ajax/send_review.php",
data: s,
beforeSend: function(){
$(".showdata").html('<i class="fa fa-spinner fa-spin"></i>');
},
success: function(data){
$(".showdata").html(data);
}
});
return false;
});
});
</script>
Notice I use the autosize jQuery plugin and I made a form to send the rate
I use tabs to get data file from contents pages my problem is when I go to tating fancybox plugin doesn't work. How can I fix that?
I'm trying to get a basic JSONP query going:
<html>
<head>
<script type="text/javascript" src="js/jquery1.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: 'http://www.bing.com/',
dataType: 'jsonp',
success: function(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
$('#text').html(len);
}
});
})
</script>
</head>
<body>
<div id = 'text'></div>
</body>
</html>
I'm using IE8 and jquery v1.11.3
Syntax error ?callback=jQuery111309915726215071462_1436849961686&_=1436849961687, line 1 character 1
What is this callback? Where is it coming from?
If I change the URL to 'https://www.bing.com/search?q=hello+world'
I get:
Syntax error search?q=hello+world&callback=jQuery11130544191867791898_1436850255384&_=1436850255385, line 1 character 1
<html>
<head>
<script type="text/javascript" src="js/jquery1.js"></script>
<script>
$(document).ready(function(event){
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
$.ajax({
url: 'http://www.bing.com/',
dataType: 'jsonp',
success: function(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
$('#text').html(len);
}
});
})
</script>
</head>
<body>
<div id = 'text'></div>
</body>
</html>
// Use event.preventDefault.
Change dataType: 'jsonp' to dataType: 'text'
I have the following code where I need do draw a table using sap ui5 JSON Model. When I run the program I'm getting no data in the output table. I json.getProperty alert I'm getting alert output as undefined.
<!DOCTYPE html>
<html>
<head>
<!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries -->
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons,sap.ui.table"></script>
<script>
jQuery.ajax({
url: "/XMII/Illuminator?QueryTemplate=ZTest/QueryTemplates/table%20list&content-type=text/json",
dataType: "json",
success: function(data, textStatus, jqXHR) { // callback called when data is received
var jsonModel = new sap.ui.model.json.JSONModel();
jsonModel.loadData(data);
sap.ui.getCore().setModel(jsonModel);
var weatherTable = new sap.ui.table.Table({
title : "Current Weather Details",
visibleRowCount : 20
});
weatherTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({text : "Tablename"}),
template : new sap.ui.commons.TextView().bindText("TableName")
}));
var oModel1 = new sap.ui.model.json.JSONModel();
var aData = jsonModel.getProperty("/Rowsets/Rowset/Row");
oModel1.setData({modelData : aData});
weatherTable.setModel(oModel1);
weatherTable.bindAggregation("rows","/modelData");
weatherTable.placeAt('content');
var dataLayout = new sap.ui.layout.HorizontalLayout({
id : "dataLayout", // sap.ui.core.ID
});
var Tablename = new sap.ui.commons.TextView({
id : "Tablename",
text : '{TableName}'
})
dataLayout.addContent(Tablename);
dataLayout.placeAt("content");
}
});
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>