I am using the Fullcalendar library, scheduler module.
I use minTime properties and set it to: '06:00:00' inside of view definition (so that "day is not start with midnight").
But when I that, the calendar elements that starts before 6h has a class fc-not-start even when they are in the middle of the calendar...
How to handle this?
EDIT :
Some additional information:
Fullcalendar version: v3.9.0
fc-not-start : This class should have calendar (scheduled) elements that are not started in this view. (The start is invisible). This is needed because, if element has some rounded corners, border,... it should't have on the left side if start is not visible. (Or if you want to display icon, that you are not looking at full element)
Example:
Inside the red square, this is a right use of fc-not-start
This is the wrong use of the fc-not-start
The fc-not-start should calculate itself inside fullcalendar library and it is working, until I add the parameter minTime in view.
EDIT 2:
I create minimal code to see the problem
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel='stylesheet' href='css/fullcalendar.css' />
<link rel='stylesheet' href='css/scheduler.css' />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel='stylesheet' href='css/style.css' />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id='calendar'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src='js/moment.js'></script>
<script src='js/fullcalendar.js'></script>
<script src='js/scheduler.js'></script>
<script src='js/my_script.js'></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>
JS
var resources = [
{
id: 'A',
title: 'A',
sortOrder: 1
},
{
id: 'B',
title: 'B',
sortOrder:2
},
{
id: 'C',
title: 'C',
sortOrder:3
}
];
$('#calendar').fullCalendar({
// height: 550,
// eventColor: '#428bca',
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
defaultView: 'timelineFourDays',
views: {
timelineFourDays: {
type: 'timeline',
minTime: '07:00:00',
duration: { days: 4 }
},
},
resources: resourcesFunc,
nowIndicator: true,
events: [
{
id: '1',
resourceId: 'A',
title: 'Meeting',
start: '2019-07-13T00:20:00',
end: '2019-07-14T02:20:00',
},
{
id: '2',
resourceId: 'A',
title: 'Meeting2',
start: '2019-07-13T00:20:00',
end: '2019-07-14T02:20:00',
}
],
displayEventTime: true,
});
function resourcesFunc(callback) {
callback(resources);
}
The < should be only if the element is not whole visible on screen. In this case this class is wrongly calculated...
https://jsfiddle.net/Ly9rsoc1/2/
You said
"The < should be only if the element is not whole visible on screen"
However: Your events start before the specified minTime value. This means that the start point of the event can never be visible on your calendar. Therefore the < icon is displayed.
I think you have misunderstood the nature of this functionality. It's not about whether the start of the HTML element is visible, it's about whether the start of the event (which is represented by that HTML element) is visible. And since you removed some of the times covered by that event from your display, then it displays the icon so that this fact is clear to the user.
In conclusion: The calendar is behaving exactly as it should. There is no bug here.
As an aside, I would point out that if you routinely have events which cover these times of day, then in my opinion it's not very logical or very user-friendly to make those times invisible, because it hides what might be useful information. But if these particular events are an anomaly, and most of your events are after 7am then you might just have to tolerate these ones as an unusual case.
Related
I'm trying to add event markers to my stock chart, but as soon as I add them I get this error:
anychart-stock.min.js:286 Uncaught TypeError: Cannot read properties of undefined (reading 'o')
I have added event markers on other pages of my application without an issue, and I have tried every single example I could find. Here is my current code to add the marker:
var eventMarkers = chart.plot(0).eventMarkers();
console.log(eventMarkers);
// set markers data
eventMarkers.data([
{ date: quotes[1].date, description: '9-11 attacks' },
{ date: quotes[1].date, description: 'Iraq War' },
{ date: quotes[1].date, description: 'Global financial collapse' },
{
date: quotes[1].date,
description: 'OPEC cuts production targets 4.2 mmbpd'
},
{ date: quotes[1].date, description: 'Greece\'s debt crisis' },
{ date: quotes[1].date, description: 'Japan earthquake' },
{ date: quotes[1].date, description: 'Russian financial crisis' },
{
date: quotes[1].date,
description: 'OPEC production quota unchanged'
}
]);
Here is what I am currently including:
<script src='https://code.jquery.com/jquery-3.5.1.js'></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<script src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js'></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js" charset="utf-8"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-stock.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-data-adapter.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-annotations.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-ui.min.js"></script><!-- Data adapter -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
This is driving me crazy, should be something simple that I have already done but something is going on and I can't figure it out.
Figured it out after hours of trial and error. The code to create the event markers needed to be before I created the mapping. No idea why this mattered here since that was not required on any other pages in which I created event markers.
I want to integrate Shutterstock Image Editor in my simple HTML app. So I make a developer account in Shutterstock and create my API Key. Below is my API:
Now I am using above API Key (Consumer Key) in my HTML as describe here. Below is my HTML file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://s.picdn.net/editor/image/assets/integration.js"></script>
<script>
window.editorInstance = window.Editor({
apiKey: 'e1818-c5e61-74ce1-7ee31-6c7f8-7fb6d',
language: 'en',
image: 'https://www2.shutterstock.com/blog/wp-content/uploads/sites/5/2015/05/volcano-header-1440x960.jpg',
excludeFeatures: ['filters'],
initialPanel: 'text',
logo: true,
logoUrl: 'https://www2.shutterstock.com/base/public/images/logos/logo-shutterstock-de64a370ef.png',
primaryActionText: 'Save and close',
container: document.querySelector('#editor'),
canvas: {
height: 500,
width: 500,
fill: 'rgb(62, 69, 79)'
},
presets: [{
name: 'Icon',
height: 128,
width: 128
}, {
name: 'Book Cover',
height: 1600,
width: 2400
}],
onPrimaryAction: function() {
window.editorInstance.getBase64({
format: 'jpg',
quality: .91
}).then(function(base64) {
// Handle base64 image data
window.editorInstance.hide();
});
}
});
// Launch instance of Editor
window.editorInstance.launch().then(function(editor) {
// Actions
}).catch(function(err) {
// Handle error
});
</script>
After running my above HTML page Editor doesn't render. Below is my console log showing:
Failed to load resource: the server responded with a status of 403 (Forbidden)
and below screen is showing.
Also I visit Fiddle to integrate editor in HTML but this API is using JSFiddle Client. My question is how I implement Shutterstock photo editor in my HTML app. Please let me know what I'm doing wrong in my above code.
You need to contact api [at] shutterstock.com in order to access the Editor - they'll need to manually enable your api key for it.
update: It appears that everything has been solved by including the bootstrap.min.js in the html file itself (even though the bootstrap file is extended from layout, it must have been included after the other dependent scripts are, as its components weren't being accessed by them). I'll post as an answer when I can unless someone else can do so (I may not understand the problem as well as you).
I'm trying to use Web2py to test a simple MetricsGraphics example, but no graph loads in the browser.
Current error preventing graph from being displayed:
TypeError: $(args.target+' h2.chart_title').popover is not a function. (In '$(args.target+' h2.chart_title').popover', '$(args.target+' h2.chart_title').popover' is undefined)
The error occurs in metricsgraphics.min.js
HTML file:
{{extend 'layout.html'}}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="{{=URL('static','js/d3/d3.min.js')}}"></script>
<link href="{{=URL('static','js/metric-graphics/css/metricsgraphics.css')}}" rel='stylesheet' type="text/css">
<script src="{{=URL('static','js/metric-graphics/js/metricsgraphics.min.js')}}"></script>
<h3>Graph</h3>
<div class="result text-center col-xs-5">
<script>
data_graphic({
title: "UFO Sightings",
description: "Yearly UFO sightings from 1945 to 2010.",
data: [{'year':1964, 'sightings':6}] // JSON.parse({{=sample}}), // also tried as JSON.parse([{"year":1945, "sightings":"6"}])
markers: [{'year': 1964, 'label': '"The Creeping Terror" released'}],
width: 600,
height: 250,
target: ".result",
x_accessor: "year",
y_accessor: "sightings",
});
</script>
{{#=BEAUTIFY(response._vars)}}
Python controller function:
def chart_view():
'''This will show the graph for a feed (axes)'''
# sample = [{"year": "1945", "count": 6}, {"year": "1950", "sightings": 35}, {"year": "1964", "sightings": 6}]
return dict()
To write a Python object into a view, it must be preceded by an equals sign:
{{=sample}}
There may be other errors, as it is not clear how you are getting sample to that view.
I'm a new developer and im trying the framework Dojo-Toolkit and especially d-grid .
So i follow the tutorial (http://dgrid.io/tutorials/1.0/hello_dgrid/) here is my index :
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello dgrid!</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" href="djgrid.css">
<link rel="stylesheet" href="claro.css">
</head>
<body class="claro">
<div id="grid"></div>
<!-- load Dojo -->
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="dojoconfig.js"></script>
<script>
require([ 'dgrid/Grid', 'dojo/domReady!' ], function (Grid) {
var data = [
{ first: 'Bob', last: 'Barker', age: 89 },
{ first: 'Vanna', last: 'White', age: 55 },
{ first: 'Pat', last: 'Sajak', age: 65 }
];
var grid = new Grid({
columns: {
first: 'First Name',
last: 'Last Name',
age: 'Age'
}
}, 'grid');
grid.renderArray(data);
});
</script>
</body>
</html>
So when i run on "localhost/DOJO/index.html" i get this error :
http://localhost/DOJO/dgrid/Grid.js Failed to load resource: the server responded with a status of 404 (Not Found)
I dont understand why it search on this location ... and also i get 2 :
Error: scriptError(…)
If someone can tell me how that work that ll be lovely :)
Even if the problem seems solved, this answer will clarify Ken's comments and help other people who try to integrate DGrid to Dojo.
Your code require a dgrid/Grid module the same way it require the dojo\domReady
require([ 'dgrid/Grid','dojo/domReady!'], ...);
so your dgrid folder have to be at the same level as your dojo folder.
DOJO
app
dgrid
dijit
dojo
dojox
In your dojoConfig.js, you should have a line like :
packages: ['dojo', 'dijit', 'dojox', 'app', 'dgrid'],
After having tried a couple of ways to solve the issue, I decided to ask for some help. The thing is, that I provide information on a website, which users in most cases don’t look too much. On the other hand this information needs to be a click away if needed. So I am using a Shield UI JavaScript chart, that binds to remote data. What I need is to initialize the chart, but not to show the data. This needs to be postponed until (and if) the user clicks on the chart.
Is there a way to bind the data later (asynchronously). How can this be achieved?
Below is some code I worked on, for testing purposes it is local data.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../../../css/shieldchart.css" />
<script src="../../../../external/jquery-1.8.2.min.js" type="text/javascript">//</script>
<script src="../../../../external/jquery.mousewheel/jquery.mousewheel.js" type="text/javascript">//</script>
<script src="../../../../external/canvg-1.2/rgbcolor.js" type="text/javascript">//</script>
<script src="../../../../external/canvg-1.2/canvg.js" type="text/javascript">//</script>
<script src="../../../../external/globalize/globalize.js" type="text/javascript">//</script>
<script src="../../../../common/core.js" type="text/javascript">//</script>
<script src="../../../js/shieldchart.js" type="text/javascript">//</script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: auto;"></div>
<script type="text/javascript">
$(document).ready(function () {
var Information= [12,22,22,12,32,44,34 ];
$("#container").shieldChart({
events: {
seriesClick: function pointSelectHandler(args) {
var containterproducts = $("#container").swidget();
containterproducts.destroy();
$("#container").shieldChart({
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: "Electricity prices"
},
dataSeries: [
{
seriesType: 'pie',
collectionAlias: "User Information",
data: Information
},
]
});
}
},
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: "Click to show data"
},
});
});
You are on a right way to solve the problem. You initially create a chart that contains no data and eventually bind it to the data source.
However you may not use the seriesClick event, since you don’t have any series that the user can click on.
If you want to use that event, than you need to add for instance a single value, let’s say 1, so that the user is able to click on the pie:
dataSeries: [
{
seriesType: 'pie',
collectionAlias: "Logins",
data: [1]
},
]
or alternatively, you can have your code and only change the event used:
click: function pointSelectHandler(args) {}
In this case you will show the data when the user clicks on the chart and won’t be in need of any series.
This is the more comfortable strategy, because with the pie chart type it is easy to visualize a sample data series. But if you are using line type chart it will be more complicated for the user to get to know that he needs to click on a data series to get the actual data.