I have a calendar like this defined:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'list' ],
defaultView: 'dayGridMonth',
events: '/activities/calendar.json?view=' + 'dayGridMonth', //calendarEl.view.title,
I am trying to customize the events JSON feed to the view - way easier to do this on the server side then adding a bunch of JavaScript logic. All I want to do is append the current view to the json url. In my code above I just manually coded 'dayGridMonth' but looking to make it dynamic. Tried calendarEl.view.title but that returns undefined. Read the docs but can't make sense of this. Perhaps I am looking at this the wrong way.
Related
I need to fetch events every time a view is switched, and need to pass the view to the server.
However, the old view is still set at the time the events are requested from the server.
For example, the following alerts the view I am switching from, not the new view.
var calendar = new FullCalendar.Calendar(calendarEl, {
lazyFetching: false,
events:
{
url: '/events/get-events',
extraParams: function(){
alert(calendar.view.type);
}
}
}
Switch views in the following codepen
https://codepen.io/bestrong89/pen/RwPVmdY?editors=0010
Any ideas on a workaround?
I am confused on how to refetch the resources by url (json feed).
This renders my calendar resources -
$('#calendar').fullCalendar({
...
resources: 'example.json?id=1',
...
});
This documentation (https://fullcalendar.io/docs/refetchResources) says "If the resources option was specified as a JSON feed it will be requested again."
So I have a button that I want to click to change the resource url and reload the resource feed -
$('.resource-button').on('click', function() {
link = $(this).attr('href');
$('#calendar').fullCalendar('refetchResources', {
resources: link
});
});
Any idea why it doesn't reload the new resource link? The list of resources refreshes like it is doing something but the data stays the same.
Thanks
This code
$('#calendar').fullCalendar('refetchResources', {
resources: link
});
makes no sense. As per the documentation you linked to, the "refetchResources" method does not accept any extra arguments. The { resources: link } object you supply to it is not expected, and is consequently ignored by fullCalendar. I'm not sure what gave you the idea that you could pass more arguments to this function.
The phrase you quoted:
"If the resources option was specified as a JSON feed it will be requested again."
means it will re-fetch existing resource data from the existing specified sources (hence the word "again"). I think you have misunderstood this explanation.
In other words all it does is refresh the already-specified sources. If you wish to change the list of resource dynamically, then you need to set the resources option first using the separate method to set options.
Here's an example which switches the resources from one URL to another when a button is clicked. You can of course adjust this to your needs, but the key thing to note is the use of the separate "option" method to change the Resource URL before calling "refetchResources".
HTML:
<button type="button" id="changeResources">
Click to Change Resources
</button>
<div id='calendar'></div>
JavaScript:
var resources = [
"https://api.myjson.com/bins/m7blz",
"https://api.myjson.com/bins/cqj3b"
]
var currentResourceIndex = 0;
$(document).ready(function() {
$('#calendar').fullCalendar({
resources: resources[currentResourceIndex],
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
defaultView: 'timelineDay',
header : {
left: 'prev, today',
center: 'title',
right: 'next'
},
});
$("#changeResources").click(function() {
if (currentResourceIndex == 0) currentResourceIndex = 1;
else currentResourceIndex = 0;
$('#calendar').fullCalendar('option', 'resources', resources[currentResourceIndex]);
$("#calendar").fullCalendar("refetchResources");
});
});
See http://jsfiddle.net/toytd26b/57/ for a working demonstration of switching the resources using a button (as per the code above).
See https://fullcalendar.io/docs/dynamic-options for documentation of how to set calendar options after the calendar has been initialised.
$('.resource-button').on('click', function() {
link = $(this).attr('href');
$('#calendar').fullCalendar('option', 'resources', link);
$('#calendar').fullCalendar('refetchResources');
});
The FullCalendar docs show the following for multiple Google calendars:
eventSources: [
{
googleCalendarId: 'abcd1234#group.calendar.google.com'
},
{
googleCalendarId: 'efgh5678#group.calendar.google.com',
className: 'nice-event'
}
]
This does not work:
eventObject.push({
googleCalendarId
});
eventSources: [ eventObject ]
How do I turn this into an array that will show multiple google calendars that I would dynamically be able to add?
What does work is:
eventObject.push({
id: eventId[i],
title: name[i],
start: startTime[i],
end: endTime[i],
description: evDes[i].description
});
eventSources:
[
{
events: eventObject
}
]
But this is not the same thing. Importantly, I want to be able to use both and have both the google calendar and the json source that I'm parsing out this way. How do I do that?
Ok, figured it out. So if I'm iterating through a list of google calendars, I would have this: (I'm using C# and MVC to get the list of calendars into the Javascript - that's what "model" refers to here)
CalendarId = model.data[i].calendar_source;
gcalObject.push({
googleCalendarId: CalendarId,
And then, in the calendar init, I'd have this:
eventSources: gcalObject,
And then I can separately have events that do not come from a Google calendar in the regular events object:
events: eventsObject
So problem solved. Google calendar events go in eventSources and other events go in events. And eventSources sits at the same hierarchical level as events.
I am struggling with including a custom map with custom data into Highmaps. I am sure it's a pretty dumb thing, but I just can't find any examples and explanations on the web.
I have a JSON file with the data, and a GeoJSON file with the map. So, it could look like this:
$(function ()
{
$.getJSON('http://xxx/data/P_.json', function (data)
{
// Initiate the chart
$('#container').highcharts('Map',
{
series : [
{
data : data,
mapData: 'http://www/data/countries.geojson',
joinBy: ['Name', 'Countries'],
}]
});
});
});
But something is quite obviously wrong. How do I add then the custom mapData?
Thanks for your help!
There is a instruction about how to create custom geoJSON: http://www.highcharts.com/docs/maps/custom-geojson-maps
In 9. there is link to jsFiddle that show how geoJSON file should be parsed to be used by Highcharts as mapData: http://jsfiddle.net/highcharts/xbzxfx2L/
$('#run').click(function () {
var geojson = $.parseJSON($('#geojson').val());
// Initiate the chart
$('#container').slideDown().highcharts('Map', {
series: [{
mapData: geojson
}]
});
});
I am trying to implement a search form where the results would be displayed via a dojo 1.6 data grid. I have the rendering working, I make an ajax call on form submit and then build a Datagrid in the call back function using the ItemFileWriteStore.
function search()
{
var action = './search.json';
dojo.xhrPost({url: action, form:"searchForm",
load: function(result) {
var newStore = new dojo.data.ItemFileWriteStore({
data: {
identifier: "id",
items: JSON.parse(result),
url:'./search.json'
}
});
var grid = dijit.byId("searchResultsGrid");
if(grid == null) {
var layout = [[
{'name': 'Id', 'field': 'id', 'width': '50px'},
{'name': 'Name', 'field': 'name', 'width': '50px',editable: true,},
{'name': 'Source', 'field': 'source', 'width': '50px',editable: true,},
{'name': 'Version', 'field': 'version', 'width': '50px',editable: true,}
]];
var grid = new dojox.grid.DataGrid({
id: 'searchResultsGrid',
store: newStore,
structure: layout,
autoHeight:true, autoWidth:true, editable:true, columnReordering:true,
rowSelector: '20px'
});
grid.placeAt("gridDiv");
grid.startup();
}
else {
grid.setStore(newStore);
}
}
});
}
Now, when I try to make the grid editable and persist the changes to server, nothing happens with the ItemFileWriteStore. So I want to switch to JsonRestStore so that I can persist.
But the question is, how do I tie my form submit to the JsonRestStore or in other words is there a way to pass a dynamic query to the JsonRestStore ?
I want the JsonRestStore to fetch data on submit of my search form and based on the values in the search form.
Thanks in advance!
I would use the dojo.store.JsonRest store. In order to use the JsonRest store with dojox.grid.DataGrid, you will need to wrap it in a dojo.data.ObjecStore like below:
var newStore = new dojo.store.JsonRest({
target: '/search/',
idProperty: 'id'
});
newStore = new dojo.data.ObjectStore({
objectStore: newStore
});
Now the /search/ target should be your REST url. Your backend for /search/ should be able to support REST, which means you should be able to support GET, PUT, POST, DELETE requests. Take a look at http://dojotoolkit.org/reference-guide/1.10/quickstart/rest.html its for Dojo 1.10, but the method for implementing the backend should be similar.
Once you have the REST backend implemented to be able to retrieve and update data. You can send query parameters to the REST backend by setting the query parameter in the grid.
grid.setQuery({
param1: 1,
param2: 2
});
This will trigger the JsonRest store to use the url /search/?param1=1¶m2=2 to load the refresh set of data in the grid.