I'm attempting to add functionality to my full calendar app where when a user clicks on an event, it will duplicate it (to be moved around later on).
The problem is that the duplicated event, while existing, does not display.
At first I thought it might be a resourceID issue; however, I quelled that fear by adding the resource ID property. I'm really not sure what the problem is at this point as both elements are functionally the same (although they are made with differing ID's).
An example of my code is (with the duplication block is marked //Duplication):
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../packages/core/main.css' rel='stylesheet' />
<link href='../packages/daygrid/main.css' rel='stylesheet' />
<link href='../packages/timegrid/main.css' rel='stylesheet' />
<link href='../packages/list/main.css' rel='stylesheet' />
<link href='../packages/timeline/main.css' rel='stylesheet' />
<link href='../packages/resource-timeline/main.css' rel='stylesheet' />
<script src='../packages/core/main.js'></script>
<script src='../packages/interaction/main.js'></script>
<script src='../packages/daygrid/main.js'></script>
<script src='../packages/timegrid/main.js'></script>
<script src='../packages/list/main.js'></script>
<script src='../packages/timeline/main.js'></script>
<script src='../packages/resource-common/main.js'></script>
<script src='../packages/resource-timeline/main.js'></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ["resourceTimeline"],
now: "2019-03-19",
header: {
left: "today prev,next",
center: "title",
right: "resourceTimelineDay,resourceTimelineWeek"
},
aspectRatio: 1.6,
defaultView: "resourceTimelineDay",
resources: [
{ id: "a", title: "Auditorium A" },
{ id: "b", title: "Auditorium B" }
],
events: [
{
id: "1",
resourceId: "a",
start: "2019-03-19T08:00:00",
end: "2019-03-07T07:00:00",
title: "event 1"
},
{
id: "2",
resourceId: "b",
start: "2019-03-19T10:00:00",
end: "2019-03-07T22:00:00",
title: "event 2"
}
],
// Duplication
eventClick: function(arg) {
dupedEvent = calendar.addEvent({
title: arg.event.title,
start: arg.event.start,
end: arg.event.end,
id: Math.random(),
resourceIds: arg.event.resourceIds
});
console.log("Orginial: ", arg.event);
console.log("Duplicate: ", dupedEvent)
}
});
calendar.render();
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
A working codepen if anyone would like to take a look:
https://codepen.io/anon/pen/JzBwwj?editors=0010
If you take a look at the objects you are logging the duplicate has no resourceIds, if you try logging arg.event.resourceIds it is undefined so isn't being set on the duplicate. That the reason they aren't being rendered. They aren't associated to a resource.
You can get the resources from the event using getResources, a method on the event object. That would be the correct way to do it, however I did manage to get it to render setting the resourceIds from arg.event._def.resourceIds.
Suggested solution:
dupedEvent = calendar.addEvent({
title: arg.event.title,
start: arg.event.start,
end: arg.event.end,
id: Math.random(),
resourceIds: arg.event.getResources().map(resource => resource.id)
});
}
Related
I am trying to setup a cytoscape.js graph, which includes links in node labels and also expandable/collapsable parent nodes. After some research I decided to use the cytoscape-node-html-label extension in combination with the expand-collapse extension.
I played around with both extensions separately and they do what I want. However, when trying to combine them, HTML links are not clickable any more. It seems like the expand/collapse extension adds a layer, which does not propagate mouse events to the HTML extension.
{
enablePointerEvents: true
}
is already set for the HTML label extension but does not solve the problem. Please find a minimum working example below.
I am happy to get your support on
how to propagate clicks to the HTML label or
how to move the HTML labels "on top" of the expand/collapse layer.
Thank you in advance :-)
code.js
document.addEventListener('DOMContentLoaded', function() {
var cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'fcose'
},
elements: {
nodes: [
{ data: { id: 'node1', type: 2 } },
{ data: { id: 'node1.1', parent: 'node1' } },
{ data: { id: 'node2' } },
],
edges: [
{ data: { source: 'node1', target: 'node2' } },
]
},
});
cy.nodeHtmlLabel([{
query: 'node[type=2]',
valign: "top",
valignBox: "top",
tpl: function() {
return '<p>Test label 1. link</p>'
}
}], {
enablePointerEvents: true
});
// If the following block is commented, the HTML link above works
var api = cy.expandCollapse({
layoutBy: {
name: "fcose",
animate: true,
randomize: false,
fit: true
},
fisheye: true,
animate: true,
undoable: false,
});
});
demo.html
<!DOCTYPE>
<html>
<head>
<title>cytoscape-expand-collapse.js demo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<script src="https://unpkg.com/layout-base/layout-base.js"></script>
<script src="https://unpkg.com/cose-base/cose-base.js"></script>
<script src="https://unpkg.com/cytoscape-fcose/cytoscape-fcose.js"></script>
<script src="https://unpkg.com/cytoscape-expand-collapse/cytoscape-expand-collapse.js"></script>
<script src="src/cytoscape-node-html-label.js"></script>
</head>
<body>
<h1>cytoscape-expand-collapse demo</h1>
<script src="code.js"></script>
<div style="float: right; height: 95%; width: calc(80% - 4px);" id="cy"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highstock Example</title>
<style type="text/css">
#container {
height: 400px;
min-width: 310px;
}
</style>
</head>
<body>
<script src="../../code/highstock.js"></script>
<script src="../../code/modules/data.js"></script>
<script src="../../code/modules/exporting.js"></script>
<div id="container"></div>
<script type="text/javascript">
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlc.json', function (data) {
// create the chart
Highcharts.stockChart('container', {
rangeSelector: {
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
series: [{
type: 'ohlc',
name: 'AAPL Stock Price',
data: data,
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
});
});
</script>
</body>
</html>
Hi,
this is my first post on stack so plz correct if wrong. I wish to know how do I access the properties of highstock chart in the above example. eg. if i want to set the 'selected' property of 'rangeselector' externally through code how to do it. Any help will be highly appreciated.
Thanks
You can:
Store a chart in a variable:
const chart = Highcharts.stockChart('container', {...});
chart.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
Use load event:
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
this.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
}
}
},
...
});
Use a callback function:
Highcharts.stockChart('container', {
...
}, function(chart) {
chart.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
Live demo: http://jsfiddle.net/BlackLabel/3L7uvm4n/
API Reference:
https://api.highcharts.com/class-reference/Highcharts#.chart
https://api.highcharts.com/highcharts/chart.events.load
I'm playing with a basic implementation of FullCalendar. But with the code below (copy and paste into a file). My 'meeting' repeats at the given time every single day.
I should have 1 event against Fred, 3pm to 6pm on March 1st. Not repeating.
This happens regardless of startRecur/endRecur properties.
The only thing that had effect was daysOfWeek property. Setting a value meant it only appears on those days.
What am I doing wrong?
Thanks Mick
function run() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['resourceTimeline'],
defaultView: 'resourceTimelineWeek',
resources: [{
id: 1,
title: 'Fred'
},
{
id: 2,
title: 'Jane'
}
],
events: [{
id: '1',
resourceId: '1',
title: 'Meeting',
allDay: false,
start: '2020-03-1',
end: '2020-03-1',
startTime: '15:00',
endTime: '18:00'
}]
});
calendar.render();
}
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.0/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-common#4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/timeline#4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-timeline#4.4.0/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.0/locales-all.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.0/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#fullcalendar/timeline#4.4.0/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-timeline#4.4.0/main.min.css">
<body onload="run()">
<div id='calendar'></div>
</body>
If you specify the startTime and endTime properties mentioned in the Recurring events documentation, then fullCalendar ignores the standard start and end properties completely for determining the placement of the event, and relies instead on the recurrence-related properties (startTime, endTime, startRecur and endRecur).
You could specify this single event using the recurrence syntax, like this:
startRecur: '2020-03-01',
endRecur: '2020-03-02',
startTime: '15:00',
endTime: '18:00'
But it's a bit nonsensical if you don't actually want any recurrence.
If you just want a normal single-occurence event, then don't use the "recurring events" properties. Just specify the date and time in the start and end properties in the normal way which is clearly documented and shown in countless examples in the fullCalendar documentation and demos:
start: '2020-03-01 15:00',
end: '2020-03-01 18:00',
I'm not clear how you ended up deciding to use properties which are only mentioned on the documentation page about recurrence, in order to try and define a non-recurring event.
Anyway here's a working demo:
function run() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['resourceTimeline'],
defaultView: 'resourceTimelineWeek',
resources: [{
id: 1,
title: 'Fred'
},
{
id: 2,
title: 'Jane'
}
],
events: [{
id: '1',
resourceId: '1',
title: 'Meeting',
allDay: false,
start: '2020-03-01 15:00',
end: '2020-03-01 18:00',
}]
});
calendar.render();
}
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.0/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-common#4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/timeline#4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-timeline#4.4.0/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.0/locales-all.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.0/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#fullcalendar/timeline#4.4.0/main.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-timeline#4.4.0/main.min.css">
<body onload="run()">
<div id='calendar'></div>
</body>
You can use below code to show one day, daily, weekly, every two weeks and monthly events with tooltip on mouse hover event.
Visit here- https://stackoverflow.com/a/68770685/9673996
I am trying to find out why my chart is not showing up in my WPF WebBrowser.
When I load my html file, I have the following error:
I think that IE might be blocking Highchart(Javascript from external Source) in the WPF WebBrowser because when I try to load it with IE my page got restricted from running script or ActiveX Control :
I know how to allow IE to run script or ActiveX Control but I don't know how to allow it in my WPF WebBrowser.
I have tried with a Mark Of The Web but I'm not sure if i am using it properly ?
<!-- saved from url=(0016)http://localhost -->
I have also tried some desperate method like adding my program in :
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION\MyProgram.exe and MyProgram.vshost.exe with Value 0x00002af9
I would really appreciate some help.
I don't have find any answer that fix this problem so far.
My html file :
<!DOCTYPE HTML>
<!-- saved from url=(0016)http://localhost -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'spline',
inverted: true
},
title: {
text: 'Atmosphere Temperature by Altitude'
},
subtitle: {
text: 'According to the Standard Atmosphere Model'
},
xAxis: {
reversed: false,
title: {
enabled: true,
text: 'Altitude'
},
labels: {
formatter: function () {
return this.value + 'km';
}
},
maxPadding: 0.05,
showLastLabel: true
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 2
},
legend: {
enabled: false
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x} km: {point.y}°C'
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: 'Temperature',
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
</script>
</body>
</html>
UPDATE
Request : alert(navigator.userAgent);
Result :
Signification
SOLUTION
Without any change in my PC Security Configuration i fixed this problem by adding this in the header of my html file :
<meta http-equiv="x-ua-compatible" content="IE=11">
See Alexander Ryan Baggett Answer for more information or this link.
Okay, this works fine for me.
I added <meta http-equiv="x-ua-compatible" content="IE=11">. I also loaded the HTML file locally in visual studio by adding it to the project and setting it to copy always. I did not end up having to make any registry adjustments on my machine either.
C# file
using System;
using System.IO;
using System.Windows;
namespace Stackoverflow_question
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
string curDir = Directory.GetCurrentDirectory();
webbrowser1.Navigate(new Uri(String.Format("file:///{0}/test.html", curDir))) ;
}
}
}
HTML file
<!DOCTYPE HTML>
<!-- saved from url=(0016)http://localhost -->
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart("container", {
chart: {
type: "spline",
inverted: true
},
title: {
text: "Atmosphere Temperature by Altitude"
},
subtitle: {
text: "According to the Standard Atmosphere Model"
},
xAxis: {
reversed: false,
title: {
enabled: true,
text: "Altitude"
},
labels: {
formatter: function () {
return this.value + "km";
}
},
maxPadding: 0.05,
showLastLabel: true
},
yAxis: {
title: {
text: "Temperature"
},
labels: {
formatter: function () {
return this.value + "°";
}
},
lineWidth: 2
},
legend: {
enabled: false
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x} km: {point.y}°C"
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: "Temperature",
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
</script>
</body>
</html>
It gives a nice result too.
If this code doesn't resolve your issue. I would suspect something needs to be changed about your Local Intranet Security Zone settings.
I'm using slickgrid library, I have a grid that I would like it to have the ability of selecting a row on click and then chenge it's background color to red.
I'm using the code below, the grid click event is working I can print in the console the id of each row clicked but I don't know how to change the selected row background.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid example 1: Basic grid</title>
<link rel="stylesheet" href="js/SlickGrid/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="js/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="css/exemple.css" type="text/css"/>
</head>
<body>
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:480px;height:187px;"></div>
</td>
</tr>
</table>
<script src="js/SlickGrid/lib/jquery-1.7.min.js"></script>
<script src="js/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="js/SlickGrid/slick.core.js"></script>
<script src="js/SlickGrid/plugins/slick.rowselectionmodel.js"></script>
<script src="js/SlickGrid/slick.grid.js"></script>
<script>
var grid;
var columns = [
{id: "title", name: "Title", field: "title",selectable: true},
{id: "duration", name: "Duration", field: "duration"},
{id: "%", name: "% Complete", field: "percentComplete"},
{id: "start", name: "Start", field: "start"},
{id: "finish", name: "Finish", field: "finish"},
{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function () {
var data = [];
for (var i = 0; i < 5; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
}
grid = new Slick.Grid("#myGrid", data, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel());
grid.onClick.subscribe(function (e) {
var cell = grid.getCellFromEvent(e);
console.log(cell.row);//Here is the row id, I want to change this row background color
grid.setSelectedRows(cell.row);
e.stopPropagation();
});
})
</script>
</body>
</html>
This is a link to a page if you want to test Sample Page
It looks like you're missing a css file. When I load your sample page and look at the console, this file is missing:
http://payclix.biz/MobiusTrac/slick-default-theme.css
This piece of css would color the row for you:
.slick-row.active .slick-cell {
background-color: #FFB;
}
or with jQuery:
$(".slick-row").click( function(){
$(this).css("background-color", "#FBB");
});
Active row has class "active" and you can add properties to the CSS for this class.