I have created one .html file, a full calendar and hammer.js.
It’s working on desktop and Android devices. I can see the full calendar and gesture of swipe left and swipe right. But it’s only not working on mobile Safari.
I have mailed the HTML file and am trying to open the fullCalendar.html page from my mail or from WhatsApp. But it shows a white screen only in iPhone XS Max (Safari).
In mobile Safari the normal HTML file is working fine, but with JavaScript it’s not loading anything.
Head:
! function(a) {
function f(a, b) {
if (!(a.originalEvent.touches.length > 1)) {
a.preventDefault();
var c = a.originalEvent.changedTouches[0],
d = document.createEvent("MouseEvents");
d.initMouseEvent(b, !0, !0, window, 1, c.screenX, c.screenY, c.clientX, c.clientY, !1, !1, !1, !1, 0, null), a.target.dispatchEvent(d)
}
}
if (a.support.touch = "ontouchend" in document, a.support.touch) {
var e, b = a.ui.mouse.prototype,
c = b._mouseInit,
d = b._mouseDestroy;
b._touchStart = function(a) {
var b = this;
!e && b._mouseCapture(a.originalEvent.changedTouches[0]) && (e = !0, b._touchMoved = !1, f(a, "mouseover"), f(a, "mousemove"), f(a, "mousedown"))
}, b._touchMove = function(a) {
e && (this._touchMoved = !0, f(a, "mousemove"))
}, b._touchEnd = function(a) {
e && (f(a, "mouseup"), f(a, "mouseout"), this._touchMoved || f(a, "click"), e = !1)
}, b._mouseInit = function() {
var b = this;
b.element.bind({
touchstart: a.proxy(b, "_touchStart"),
touchmove: a.proxy(b, "_touchMove"),
touchend: a.proxy(b, "_touchEnd")
}), c.call(b)
}, b._mouseDestroy = function() {
var b = this;
b.element.unbind({
touchstart: a.proxy(b, "_touchStart"),
touchmove: a.proxy(b, "_touchMove"),
touchend: a.proxy(b, "_touchEnd")
}), d.call(b)
}
}
}(jQuery);<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.7.0/fullcalendar.min.css">
</head>
<body>
<div id='calendar'></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js?v=1.1"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js?v=1.1"></script>
<script type="text/javascript">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.js?v=1.1"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.7.0/fullcalendar.js?v=1.1"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js?v=1.1"></script>
<script>
$('#widget').draggable();
</script>
<script type="text/javascript">
window.onload = function() {
(function(factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery', 'hammerjs'], factory);
} else if (typeof exports === 'object') {
factory(require('jquery'), require('hammerjs'));
} else {
factory(jQuery, Hammer);
}
}(function($, Hammer) {
function hammerify(el, options) {
var $el = $(el);
if (!$el.data("hammer")) {
$el.data("hammer", new Hammer($el[0], options));
}
}
$.fn.hammer = function(options) {
return this.each(function() {
hammerify(this, options);
});
};
// extend the emit method to also trigger jQuery events
Hammer.Manager.prototype.emit = (function(originalEmit) {
return function(type, data) {
originalEmit.call(this, type, data);
$(this.element).trigger({
type: type,
gesture: data
});
};
})(Hammer.Manager.prototype.emit);
}));
$(document).ready(function() {
// page is now ready, initialize the calendar...
var calendar = $('#calendar');
calendar.fullCalendar();
//Hammer Js swipe
calendar.hammer().on("swipeleft", function(event) {
calendar.fullCalendar('next');
});
calendar.hammer().on("swiperight", function(event) {
calendar.fullCalendar('prev');
});
});
}
</script>
</body>
</html>Above is my code for the same. How can I fix this problem?
