Related
I have put the devexpress map to my application. It refreshes every 20 seconds, and the map moves to a certain location.
However, when it refreshes, I want it to stay in the same location. I tried changing the longitude/latitude and auto refresh, but it just goes to different locations, not the one I am at.
The code of the auto refresh:
var query = {
iType: eType
};
$.ajax({
type: "POST",
url: "WebMethods.aspx/GetLiveMapData",
//headers: { "Accept-Encoding": "gzip" },
data: JSON.stringify(query),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (result) {
if (AppPopup == null) { return; }
var map = $("#PopupContainer").dxForm("instance").getEditor("MapField");
var markers = [];
var sData;
var oData;
var fisShown = false;
sData = eval('(' + result.d + ')');
oData = JSON.parse(sData.data);
for (var item in oData) {
if (oData[item]['SHOWTOOLTIP'] == 1) {
fisShown = true;
} else {
fisShown = false;
}
markers.push({
location: { lat: oData[item]['ML_LATITUDE'], lng: oData[item]['ML_LONGITUDE'] },
iconSrc: oData[item]['ICON'], //"Content/Icons/map-marker.png",
onClick: function (args) { },
tooltip: {
isShown: fisShown,
text: oData[item]['TOOLTIP']
}
});
}
map.beginUpdate();
if (e == 0) {
map.option("autoAdjust", true);
map.option("zoom", 10);
} else {
map.option("autoAdjust", false);
//map.resetOption("autoAdjust");
}
map.option("markers", markers);
map.endUpdate();
setTimeout(function () {
LiveMapRefresh(1);
}, 20000);
},
failure: function (msg) {
},
error: function (a, b, c) {
ODAlertError(c + ' - ' + a.responseText);
}
});
};
var showCallback = function (e) {
var iMapHeight = $(window).height();
iMapHeight = iMapHeight - 160;
$("#PopupContainer").dxForm({
labelLocation: "top",
//height: $(window).height(),
items: [
{
itemType: "group",
colCount: 1,
items: [
{
itemType: "group",
colCount: 2,
colSpan: 2,
caption: "",
items: [
]
},
{
colSpan: 2,
template: "<div class='legends-div' id='LegendsDiv'></div>"
},
{
itemType: "group",
cssClass: "MapGroup",
colCount: 1,
colSpan: 2,
caption: ODGetMsg(1661),
items: [
{
colSpan: 1,
dataField: "MapField",
label: { visible: false, text: ODGetMsg(10434) },
editorType: "dxMap",
editorOptions: {
provider: "google",
type: "roadmap",
controls: true,
zoom: 10,
autoAdjust: false,
width: "100%",
height: iMapHeight,
onReady: function (e) {
setTimeout(function () {
var map = $("#PopupContainer").dxForm("instance").getEditor("MapField");
var markers = [];
markers.push({
location: { lat: 39.0742, lng: 21.8243 },
iconSrc: "Content/Icons/map-marker.png",
onClick: function (args) { },
tooltip: {
isShown: false
}
});
map.option("zoom", 5);
map.option("markers", markers);
LiveMapRefresh(0);
}, 0);
},
apiKey: {
bing: "",
google: "AIzaSyADwkYePzXKCgV0GoUvEiMgunuzxBBHh3w",
googleStatic: ""
}
}
}
]
}
]
}]
});
$("#PopupContainer").dxForm("instance").validate();
}
OpenPopup(ODGetMsg(4412), oPopupContent, OkCallback, showCallback, null, true, false, validateCallback)
}```
After 3hours of searching, I couldn't find the answer to my problem.
I've created a fullcalendar V3 an now i'm updating to V5. I thought it will be easy but, no, its not easy at all for my actual level. (i've started to code at 4 months, i'm a really rookie).
So, the code that works:
<head>
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
locale: 'fr',
defaultView: 'listWeek',
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
events: 'load.php',
eventColor: 'red',
selectable: true,
selectHelper: true,
//try to make data request from input
//see documents in Montauban/Calendar and try to modify this lignes
select: function(start, end, allDay) {
var title = prompt("Entrez l'evenement");
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("Evenement créé avec succès");
}
})
}
},
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('Evenement mis a jour');
}
})
},
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("Evenement mis a jour");
}
});
},
eventClick: function(event) {
if (confirm("Êtes-sur sûr de vouloir supprimer?")) {
var id = event.id;
$.ajax({
url: "delete.php",
type: "POST",
data: {
id: id
},
success: function() {
calendar.fullCalendar('refetchEvents');
alert("Evenement supprimé");
}
})
}
},
});
});
</script>
</head>
And the code that do not work with the follows errors:
Uncaught TypeError: Cannot read property 'nodeName' of null
Uncaught TypeError: calendar.FullCalendar is not a function at Object.success ((index):106) at c (jquery.min.js:2)at Object.fireWith [as resolveWith] (jquery.min.js:2)at l (jquery.min.js:2)at XMLHttpRequest. (jquery.min.js:2)
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
locale: 'fr',
editable: true,
themeSystem: 'bootstrap',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
events: 'load.php',
eventColor: 'red',
selectable: true,
editable: true,
eventResize: function(event) {
var start = FullCalendar.formatDate(event.start, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var end = FullCalendar.formatDate(event.end, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var title = event.title;
var id = event.id;
console.log('hey')
$.ajax({
url: "update.php",
type: "POST",
data: {
title: title,
start: start,
end: end,
id: id
},
success: function() {
calendar.FullCalendar('refetchEvents');
alert('Evenement mis a jour');
}
})
},
eventDrop: function(event) {
var start = FullCalendar.formatDate(event.start, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
var end = FullCalendar.formatDate(event.end, {
month: "long",
year: "numeric",
day: 'numeric',
locale: 'fr',
});
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("Evenement mis a jour");
}
});
},
eventClick: function(event) {
if (confirm("Êtes-sur sûr de vouloir supprimer?")) {
var id = event.id;
$.ajax({
url: "delete.php",
type: "POST",
data: {
id: id
},
success: function() {
calendar.FullCalendar('refetchEvents');
alert("Evenement supprimé");
}
})
}
},
});
calendar.render();
});
</script>
</head>
In the first example (fulcalendar V3) everything works and the database its update when we "drop events, delete events". In the second example (fullcalendar V5), we can click and drop in the events, but the data base its not updated with the new info.
Can you please try to help me?
Sorry for my bad English. :)
I just want to addclass name for bootstrap fullcalendar popover. I have tried the $(".popover").addClass('fc-ctpopover'); in below script in many places. Its not working for this code.
Comment for further clarification.
$(".popover").addClass('fc-ctpopover');
My expected output <div class="popover fc-ctpopover">
$(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">×</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() {
$(".popover").addClass('fc-ctpopover');
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
}
]
});
var popoverElement;
});
<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"/>
I try to integrate a calendar template in my system.
At demo js file, example events are written like this:
events: [
{
id: 1,
title: 'Title 1',
start: ('2016-01-02'),
end: ('2016-01-05'),
color: 'orange',
url: 'http://google.com'
},
{
id: 2,
title: 'Title 2',
start: ('2016-01-02'),
end: ('2016-01-05'),
color: 'orange',
url: 'http://google.com'
}
I need to get this data from mysql. I wrote the php script, it gives me the result at json format. But I don't know the way of loading results into .js file.
I know it's a simple question. Thanks for your time.
Here is the all .js file:
$(function() {
// fullcalendar
fullcalendar.calendar_selectable();
});
fullcalendar = {
calendar_selectable: function() {
var $calendar_selectable = $('#ajanda'),
calendarColorsWrapper = $('<div id="calendar_colors_wrapper"></div>');
var calendarColorPicker = helpers.color_picker(calendarColorsWrapper).prop('outerHTML');
if($calendar_selectable.length) {
$calendar_selectable.fullCalendar({
header: {
left: 'title today',
center: '',
right: 'month,agendaWeek,agendaDay prev,next'
},
buttonIcons: {
prev: 'md-left-single-arrow',
next: 'md-right-single-arrow',
prevYear: 'md-left-double-arrow',
nextYear: 'md-right-double-arrow'
},
buttonText: {
today: ' ',
month: ' ',
week: ' ',
day: ' '
},
aspectRatio: 2.1,
defaultDate: moment(),
selectable: true,
selectHelper: true,
select: function(start, end) {
UIkit.modal.prompt('' +
'<h3 class="heading_b uk-margin-medium-bottom">Etkinlik Ekle</h3><div class="uk-margin-medium-bottom" id="calendar_colors">' +
'Etkinlik Rengi:' +
calendarColorPicker +
'</div>' +
'Etkinlik:',
'', function(newvalue){
if($.trim( newvalue ) !== '') {
var eventData,
eventColor = $('#calendar_colors_wrapper').find('input').val();
eventData = {
title: newvalue,
start: start,
end: end,
color: eventColor ? eventColor : ''
};
//kaydediyorum
var datastring='do=kayit&title='+eventData.title+'&start='+(eventData.start)+'&end='+(eventData.end)+'&color='+(eventData.color);
$.ajax({
type: "POST",
data: datastring,
url: "script/ajax_calendar.php",
dataType: "html"
});
$calendar_selectable.fullCalendar('renderEvent', eventData, true); // stick? = true
$calendar_selectable.fullCalendar('unselect');
}
}, {
labels: {
Ok: 'Kaydet'
}
});
},
editable: true,
eventLimit: true,
timeFormat: '(HH)(:mm)',
events: [
{
title: 'Tüm Gün Aktivitesi',
start: ('2016-01-01')
},
{
id: 1,
title: 'Uzun Aktivite',
start: ('2016-01-02'),
end: ('2016-01-05'),
color: 'orange',
url: 'http://google.com'
},
{
id: 1,
title: 'Saatli olan',
start: ('2016-01-07 15:00'),
color: 'brown'
},
{
id: 999,
title: 'Tekrarlayan Aktivite',
start: moment().startOf('month').add(8, 'days').format('YYYY-MM-DD'),
color: '#689f38'
},
{
id: 999,
title: 'Tekrarlayan Aktivite',
start: moment().startOf('month').add(15, 'days').format('YYYY-MM-DD'),
color: '#689f38'
},
{
title: 'Konferans',
start: moment().startOf('day').add(14, 'hours').format('YYYY-MM-DD HH:mm'),
end: moment().startOf('day').add(15, 'hours').format('YYYY-MM-DD HH:mm')
},
{
title: 'Meeting',
start: moment().startOf('month').add(14, 'days').add(10, 'hours').format('YYYY-MM-DD HH:mm'),
color: '#7b1fa2'
},
{
title: 'Lunch',
start: moment().startOf('day').add(11, 'hours').format('YYYY-MM-DD HH:mm'),
color: '#d84315'
},
{
title: 'Meeting',
start: moment().startOf('day').add(8, 'hours').format('YYYY-MM-DD HH:mm'),
color: '#7b1fa2'
},
{
title: 'Happy Hour',
start: moment().startOf('month').add(1, 'days').format('YYYY-MM-DD')
},
{
title: 'Dinner',
start: moment().startOf('day').add(19, 'hours').format('YYYY-MM-DD HH:mm')
},
{
title: 'Birthday Party',
start: moment().startOf('month').add(23, 'days').format('YYYY-MM-DD')
},
{
title: 'NEW RELEASE (link)',
url: 'http://themeforest.net/user/tzd/portfolio',
start: moment().startOf('month').add(10, 'days').format('YYYY-MM-DD'),
color: '#0097a7'
}
]
});
}
}
};
The easiest way is to change your php script to output the JSON data as a js variable.
// output the data like this
header("Content-Type: application/javascript");
$data = json_encode($data_array);
echo "var events_json = $data;";
exit;
Then include the php script as a javascript in your webpage, above the main code.
<script src="myScript.php"></script>
Then you can just use the variable name in your main javascript without loading anything async.
events: events_json
You could try this:
$(document).ready(function () {
var = 'test';
$.ajax({
type: "POST",
url: "yourservice.php",
data: {
var: var
},
success: function (response) {
console.log(response);
var decodedJson = JSON.parse(response);
console.log(decodedJson);
}
});
});
I have to generate a string in Jquery by looping the List as follows
events: [
{
title: 'All Day Event',
start: '2014-11-01'
},
{
title: 'Long Event',
start: '2014-11-07',
end: '2014-11-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2014-11-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2014-11-16T16:00:00'
},
{
title: 'Conference',
start: '2014-11-11',
end: '2014-11-13'
},
{
title: 'Meeting',
start: '2014-11-12T10:30:00',
end: '2014-11-12T12:30:00'
},
{
title: 'Lunch',
start: '2014-11-12T12:00:00'
},
{
title: 'Meeting',
start: '2014-11-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2014-11-12T17:30:00'
}
]
The list contain these elements but I'm unable to generate this kind of string .I've tried in two ways
for(var i=0; i<customers.length; i++)
{
"{"
"title:" +customers[i].Column1+","
"start:"+customers[i].Column3
"}"
if(i!=customers.length-1)
{
","
}
}
and
$.each(eventList, function (index, employee) {
{
title:employee.name,
start:employee.date
}
,
});
but I'm unable to get proper result please give me solution for this .To get list I'm using the following coe
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'ProjectedYieldCalender.aspx/GetData',
data: '{}',
success:
function (data) {
var eventList = data.d
eventList=demo(eventList);
initCalendar(eventList);
}
});
});
function initCalendar(eventList) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
//defaultDate: '2014-08-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
eventList
]
});
}
Thank you
Do you want all the events to be on a single event. Then this may help.
var string;
$.each(events, function() {
string += "{title:" + this.title + "start:" + this.start + "}" ;
});