Linking a json file with events to fullcalendar - json

I have a json file with specified events in there. The basic code which calls calendar is this. I can list the events from within the calendar itself but they want it as a json file so that events can be changed on the fly without touching anything else. I tried several appproach but it did not work well.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true,

Related

Google Charts - Not Drawing - JSON Response

I would like to lead with google charts is brand new to me and I could be making a really dumb mistake. I have been working on this all day and no matter what I do, I can't get my google chart to draw using my json data. I think it has something to do with the columns and rows. I've made alot of changes different ways and I've given up at the below information. I'm not getting any errors but my chart isn't loading. I've looked at so many threads and examples now that nothing is making sense. Any help is appreciated!
<div class="col-lg-12">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="pieDisconnectReasonsChart" style="min-height:271px"></div>
</div>
<script>
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawDisconnectReasonsChart);
function drawDisconnectReasonsChart() {
var jsonData = $.ajax({
url: "/Reports/RunDisconnectReasonsReport",
type: "POST",
dataType: "json",
data: {
openDate: #Html.Raw(Json.Encode(Model.OpenDate)),
closeDate: #Html.Raw(Json.Encode(Model.CloseDate)),
},
})
.done(function (jsonData) {
var data = new google.visualization.DataTable(jsonData);
data.addColumn("string", "SY_OPEN_LBL");
data.addColumn("string", "SY_DESCRIPTION");
data.addColumn("number", "TOTAL");
data.addColumn("number", "PERCTWODEC");
data.addColumn("number", "PERC");
data.addColumn("number", "ErrMsg");
Object.keys(jsonData).forEach(function (row) {
data.addRow([
row.SY_DESCRIPTION,
row.SY_OPEN_LBL,
row.TOTAL,
row.PERCTWODEC,
row.PERC,
row.ErrMsg
]);
});
var options = {
title: 'Disconnect Reasons',
titleTextStyle: { color: 'black', fontSize: 22, bold: true },
legend: {
position: 'bottom', textStyle: { fontSize: 8 }, alignment: 'center'
},
chartArea: {
width: '98%', height: '80%'
}
};
var chart = new google.visualization.PieChart(document.getElementById('pieDisconnectReasonsChart'));
debugger;
chart.draw(data, options);
});
};
</script>
the data format for a pie chart only allows for two data table columns.
one string and one number.
unless you're providing a custom tooltip, then a third string column is allowed.
next, you're manually adding columns and rows to the data table,
so you need to remove the jsonData variable from the constructor, here...
from...
var data = new google.visualization.DataTable(jsonData); // <-- remove jsonData
to...
var data = new google.visualization.DataTable();
if you want to create the data table directly from json,
the json must be in a specific format, found here...
Format of the Constructor's JavaScript Literal data Parameter
with the above method, you would not need to manually add columns and rows,
and the chart would be faster, depending on the amount of data anyway...
try removing the extra columns and correcting the constructor,
and it should work, similar to the following working snippet...
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawDisconnectReasonsChart);
function drawDisconnectReasonsChart() {
var data = new google.visualization.DataTable();
data.addColumn("string", "SY_OPEN_LBL");
data.addColumn("number", "TOTAL");
data.addRow([
'CAT A',
2
]);
data.addRow([
'CAT B',
6
]);
var options = {
title: 'Disconnect Reasons',
titleTextStyle: { color: 'black', fontSize: 22, bold: true },
legend: {
position: 'bottom', textStyle: { fontSize: 8 }, alignment: 'center'
},
chartArea: {
width: '98%', height: '80%'
}
};
var chart = new google.visualization.PieChart(document.getElementById('pieDisconnectReasonsChart'));
chart.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="pieDisconnectReasonsChart" style="min-height:271px"></div>
EDIT
in the done method,
it appears your looping on the keys of your json object.
Object.keys(jsonData).forEach(function (row) {
instead, loop on the json object itself.
jsonData.forEach(function (row) {
see following snippet...
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawDisconnectReasonsChart);
function drawDisconnectReasonsChart() {
var jsonData = $.ajax({
url: "/Reports/RunDisconnectReasonsReport",
type: "POST",
dataType: "json",
data: {
openDate: #Html.Raw(Json.Encode(Model.OpenDate)),
closeDate: #Html.Raw(Json.Encode(Model.CloseDate)),
},
}).done(function (jsonData) {
var data = new google.visualization.DataTable();
data.addColumn("string", "SY_OPEN_LBL");
data.addColumn("number", "TOTAL");
jsonData.forEach(function (row) {
data.addRow([
row.SY_DESCRIPTION,
row.TOTAL
]);
});
var options = {
title: 'Disconnect Reasons',
titleTextStyle: { color: 'black', fontSize: 22, bold: true },
legend: {
position: 'bottom', textStyle: { fontSize: 8 }, alignment: 'center'
},
chartArea: {
width: '98%', height: '80%'
}
};
var chart = new google.visualization.PieChart(document.getElementById('pieDisconnectReasonsChart'));
chart.draw(data, options);
});
};

Problem with fullCalendar : today's day disappears

i have a problem with fullcalendar. i don't know why but when i reload my page, i wait 2 seconds and today's day disappears and the line is shifting.
I do not know where the problem may come from.
Tanks a lot for your help
Edit: sorry for not having put code.
I thought it might be a classic problem that many had. Sorry again
Here is my code :
<!-- language: lang-js -->
document.addEventListener('DOMContentLoaded', function () {
var events = <?php echo json_encode($events) ?>;
var date = new Date();
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'fr',
plugins: ['interaction', 'dayGrid', 'list', 'googleCalendar', 'bootstrap', 'moment'],
themeSystem: 'bootstrap',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,listYear'
},
navLinks: true,
selectable: true,
selectMirror: true,
select: function (arg) {
var start = moment(arg.start).format('YYYY/MM/DD HH:mm:ss');
console.log(start);
$("#date").val(start);
$('#addModal').modal();
if ($('#addModal').modal()) {
calendar.addEvent({
start: arg.start,
end: arg.end,
allDay: arg.allDay
});
$.ajax({
url: '<?= base_url(); ?>index.php/Admin/add_event',
data: {start: arg.start, end: arg.end},
type: "POST",
success: function (response) {
displayMessage("Updated Successfully");
}
});
}
calendar.unselect();
},
editable: true,
eventLimit: true,
displayEventTime: false,
events: events
});
calendar.render();
});
a screen capture
The problem is solved.
I found that it had a conflict between my bootstrap file and my js file where I had a :
window.setTimeout (function () {
$ (". alert"). slideUp (500, function () {
$ (This) .remove ();
});
}, 2000);
I think there was a class "alert" on the current day
Thanks a lot to ADyson

How to change active marker icon in vue by clicking

I'm using vue2-google-maps and it would be perfect - to change the marker icon by click on it. I try to write some code but it doesn't work correctly.
Template:
<gmap-map
ref="mainMap"
:center="startLocation"
:zoom="6"
map-type-id="roadmap"
style="width: 100%; height: 100%"
:options="{
zoomControl: false,
scaleControl: false,
mapTypeControl: false,
fullscreenControl: false,
streetViewControl: false,
disableDefaultUi: false
}"
>
<gmap-marker
v-for="(item, key) in coordinates"
:key="key"
:position="getPosition(item)"
:clickable="true"
:icon="markerOptions"
#click="toggleInfo(item, key)"
></gmap-marker>
</gmap-map>
Script:
...
let mapMarker = require('../images/ic-map-marker.svg'),
mapMarkerActive = require('../images/ic-map-marker-active.svg');
...
startLocation: {
lat: 49.0384,
lng: 33.4513
},
coordinates: {
0: {
city: City 0,
lat: '50.4021702',
lng: '30.3926088'
},
1: {
city: City 1,
lat: '49.9543502',
lng: '36.1241697'
}
},
infoOpened: false,
infoCurrentKey = null,
markerOptions: {
url: mapMarker
}
...
toggleInfo: function (marker, key) {
if (this.infoCurrentKey == key) {
if (this.infoOpened) {
this.infoOpened = false;
this.markerOptions = this.mapMarker;
} else {
this.infoOpened = true;
this.markerOptions = this.mapMarkerActive;
}
} else {
this.infoOpened = true;
this.infoCurrentKey = key;
this.markerOptions = this.mapMarkerActive;
}
}
All the markers are changed to active icon by click. Could someone help me please?
Thanks in advance!
Whole code here: https://codesandbox.io/s/map-vue-template-mv33z
all the map markers are referencing the same marker options object. When you change that object then it affects all the map markers.
you can have a data property called
selectedKey: null
have a method like:
getMarkers(key) {
if (this.selectedKey === key) return this.mapMarkerActive;
return this.mapMarker;
},
then you can have
:icon="getMarkers(key)"
or whatever logic you want to identify the selected marker (personally i'd put an id on the marker coordinate object and then have a selectedMarker data property)
in my example i have modified your example and the icons now display as you require.
https://codesandbox.io/s/map-vue-template-q67u0

EXTJS Google Map are blank

I am using GmapPanelv3.js. I can see the zooming and everything, but how come the map is blank? Here is an example http://jsfiddle.net/anthor/4aAKL/3/
Ext.onReady(function() {
var w = Ext.create('Ext.window.Window', {
title: 'Gmap',
height: 400,
width: 600,
layout: 'border',
items: [
{
title: 'Message List',
region: 'south',
height: 50,
split: true,
collapsible: true,
margins: '0 5 5 5',
collapsed: true
},{
region: 'west',
title: 'Tree',
collapsible: true,
width: 100,
items: [
{
xtype: 'button',
text: 'add',
handler: addInfoWindow // reference to event handler function
}]
},{
xtype: 'gmappanel',
region: 'center',
cls: 'reset-box-sizing',
mapConfOpts:['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
lat: 3.951941,
long: 102.052002
}
}
]
});
/**
* Just example, do not write code like this!
* GMApPanel source code
* http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js
*/
// get the map reference
var map = w.down('gmappanel');
function openInfoWindow(content, marker) {
// create a info window
var infowindow = new google.maps.InfoWindow({
content: content,
size: new google.maps.Size(50,50)
});
infoBubble = new InfoBubble({
content: '<div class="example">Some label</div>',
//position: new google.maps.LatLng(53.5267, newlong),
shadowStyle: 1,
padding: 10,
borderRadius: 5,
minWidth: 200,
borderWidth:1,
//borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: false,
backgroundClassName: 'example',
//arrowSize: 0,
//arrowPosition:7,
//arrowStyle:3
});
infoBubble.open(map.gmap,marker);
var div = document.createElement('DIV');
div.innerHTML = 'Hello';
infoBubble.addTab('A Tab', div);
infoBubble.addTab('A Tab', div);
// All GMapPanel instances has the reference to the underlying googlemap object
// porperty name `gmap`.
//infowindow.open(map.gmap, marker);
}
function addInfoWindow() {
// uses GMapPanel `addMarker` method to create a marker and attached it to tree.
// Detailes - look at the source code of GMapPanel
var marker = map.addMarker({
lat: 53.5267,
lng: -1.13330,
title: 'Marker',
// listeners can be added via configuration or after create
// using standard google maps API, i.e.
// google.maps.event.addListener(marker, 'click', function() {...})
listeners: {
click: function() {
openInfoWindow('hello', marker);
}
}
});
}
w.show();
});
i just change
setCenter: {
'lat': 3.951941,
'lng': 102.052002,
}
all problem are solved!

Google Maps toggle button

I have been struggling with this all day. I have made new buttons to actually go on my map that match the Google Maps buttons sit on the map better. I have been trying to get them to work with the current buttons above the map so I can remove those but I can't seem to get them to work. What am I missing.
Here is a link to the page so you can see. The buttons above the map work and I am going to remove them. The buttons on the map don't work which I am trying to get to work.
DEMO LINK
Here is the code. The var radarButton and var satButton is the new ones. The ones below that is to the current buttons.
jQuery(document).ready(function($) {
var mapTypeId = wundermap.getMapTypeId("hyb");
var googlemap = new google.maps.Map($("#map")[0], {
center: new google.maps.LatLng(32.782878, -96.609862),
panControl: false,
zoom: 6,
mapTypeId: mapTypeId,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
});
var radarOptions = {
gmap: googlemap,
name: 'Radar',
position: google.maps.ControlPosition.TOP_RIGHT,
action: function(){
if (wundermap.map.overlayMapTypes.length==0) {
wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
wundermap.map.overlayMapTypes.setAt("1",Radar);
}
else {
wundermap.map.overlayMapTypes.clear();
}
}
}
var radarButton = new buttonControl(radarOptions);
var satOptions = {
gmap: googlemap,
name: 'Satellite',
position: google.maps.ControlPosition.TOP_RIGHT,
action: function(){
if (wundermap.map.overlayMapTypes.length==0) {
wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
wundermap.map.overlayMapTypes.setAt("1",Satellite);
}
else {
wundermap.map.overlayMapTypes.clear();
}
}
}
var satButton = new buttonControl(satOptions);
wundermap.setOptions({
map: googlemap,
refreshPeriod: 60000,
units: "english",
debug: 0,
source: "wxmap",
StreetsOverlay: true,
layers: [
{
layer: "Radar",
active: "on",
opacity: 70,
type: "N0R",
type2: "",
animation: {
num: 6,
max: 10,
delay: 25
},
stormtracks: "off",
smooth: "on",
subdomain: "radblast-aws"
},
{
layer: "Satellite",
defaultUI: 0,
opacity: "85",
source: "",
active: "off",
animation: {
num: 1,
max: 8,
delay: 25
}
},
],
});
wundermap.initialize();
});
Here is the link to the code for the actual layer. The code is to long to post but the overlay is called Radar.
RADAR CODE
The place to start is the JavaScript console. The error messages there tell you what the problems are.
First, when the page is loaded you have an error on line 286 of wxgr3radar.php:
<body onload="initialize()">
Where is your initialize() function defined? I don't see it in your code.
Then, when I click the Satellite button it stops on line 41 of imap.js because map.overlayMapTypes is undefined:
if (map.overlayMapTypes.length==0) {
Here you're expecting map to be a Maps API object, but map is not what you think it is. Look at it in the debugger. It's a DOM element, not a Maps API map. Your Maps API map is in a variable called googlemap, which you create in line 3 of imap.js.