I'm using this format:
https://fullcalendar.io/js/fullcalendar-scheduler-1.5.1/demos/vertical-resource-view.html
, but when I add more than 4 rooms, it gets squeezed. I wanted that by adding more rooms (I need 12) I would not get everything squeezed. How can I do this?
This my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='../scheduler.min.css' rel='stylesheet' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/fullcalendar.min.js'></script>
<script src='../scheduler.min.js'></script>
<script>
$(function() { // document ready
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
defaultDate: '2017-03-06',
editable: true,
selectable: true,
eventLimit: true, // allow "more" link when too many events
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaTwoDay,agendaWeek,month'
},
views: {
agendaTwoDay: {
type: 'agenda',
duration: { days: 2 },
// views that are more than a day will NOT do this behavior by default
// so, we need to explicitly enable it
groupByResource: true
//// uncomment this line to group by day FIRST with resources underneath
//groupByDateAndResource: true
}
},
//// uncomment this line to hide the all-day slot
//allDaySlot: false,
resources: [
{ id: 'a', title: 'Consultório A' },
{ id: 'b', title: 'Consultório B', eventColor: 'green' },
{ id: 'c', title: 'Consultório C', eventColor: 'orange' },
{ id: 'd', title: 'Consultório D', eventColor: 'red' },
{ id: 'e', title: 'Consultório E', eventColor: 'blue' },
{ id: 'f', title: 'Consultório F', eventColor: 'yellow' },
{ id: 'g', title: 'Consultório G', eventColor: 'black' },
{ id: 'h', title: 'Consultório H', eventColor: 'white' },
{ id: 'i', title: 'Consultório I', eventColor: 'gray' },
{ id: 'j', title: 'Consultório J', eventColor: 'brown' },
{ id: 'k', title: 'Consultório K', eventColor: 'purple' },
{ id: 'l', title: 'Consultório L', eventColor: 'purple' },
{ id: 'm', title: 'Consultório M', eventColor: 'purple' }
],
events: [
{ id: '1', resourceId: 'a', start: '2017-03-06', end: '2017-03-08', title: 'event 1' },
{ id: '2', resourceId: 'a', start: '2017-03-07T09:00:00', end: '2017-03-07T14:00:00', title: 'event 2' },
{ id: '3', resourceId: 'b', start: '2017-03-07T12:00:00', end: '2017-03-08T06:00:00', title: 'event 3' },
{ id: '4', resourceId: 'c', start: '2017-03-07T07:30:00', end: '2017-03-07T09:30:00', title: 'event 4' },
{ id: '5', resourceId: 'd', start: '2017-03-07T10:00:00', end: '2017-03-07T15:00:00', title: 'event 5' }
],
select: function(start, end, jsEvent, view, resource) {
console.log(
'select',
start.format(),
end.format(),
resource ? resource.id : '(no resource)'
);
},
dayClick: function(date, jsEvent, view, resource) {
console.log(
'dayClick',
date.format(),
resource ? resource.id : '(no resource)'
);
}
});
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
I also had this problem. My solution was to use this in the eventAfterAllRender callback function.
function eventAfterAllRenderCallback(){
$('.fc-agendaDay-button').click(function(){
$("#schedule_container").css('min-width',$('.fc-resource-cell').length*slot_width_resource);
}
$('.fc-resourceDay-button').click(function(){
$("#schedule_container").css('min-width','');
}
}
The slot_width_resource is the number of pixel wide you want the columns to be (I use 125). Until Fullcalendar comes out with better support this solution has worked work me
Place this function after your fullcalendar initializer and inside the initializer put the callback function like another fullcalendar option
$('#calendar').fullCalendar({
eventAfterAllRender:eventAfterAllRenderCallback,
});
Related
When using edgehandles, the cytoscape extension, to create an edge between two nodes like this, I see "undefined" at the edge of the arrow. Is there some attribute I can set to get rid of this? Either in the inputs or in the style page with a selector?
For reference, I'm using
var eh = cy.edgehandles({defaults}) and eh.enableDrawMode() with the defaults defined in the edgehandles github.
Thanks!
The code from the edge-handles demo works fine in my snippet, you can use that as a starting point:
document.addEventListener('DOMContentLoaded', function() {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'grid',
rows: 2,
cols: 2
},
style: [{
selector: 'node[name]',
style: {
'content': 'data(name)'
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle'
}
},
{
selector: '.eh-handle',
style: {
'background-color': 'red',
'width': 12,
'height': 12,
'shape': 'ellipse',
'overlay-opacity': 0,
'border-width': 12, // makes the handle easier to hit
'border-opacity': 0
}
},
{
selector: '.eh-hover',
style: {
'background-color': 'red'
}
},
{
selector: '.eh-source',
style: {
'border-width': 2,
'border-color': 'red'
}
},
{
selector: '.eh-target',
style: {
'border-width': 2,
'border-color': 'red'
}
},
{
selector: '.eh-preview, .eh-ghost-edge',
style: {
'background-color': 'red',
'line-color': 'red',
'target-arrow-color': 'red',
'source-arrow-color': 'red'
}
},
{
selector: '.eh-ghost-edge.eh-preview-active',
style: {
'opacity': 0
}
}
],
elements: {
nodes: [{
data: {
id: 'j',
name: 'Jerry'
}
},
{
data: {
id: 'e',
name: 'Elaine'
}
},
{
data: {
id: 'k',
name: 'Kramer'
}
},
{
data: {
id: 'g',
name: 'George'
}
}
],
edges: [{
data: {
source: 'j',
target: 'e'
}
},
{
data: {
source: 'j',
target: 'k'
}
},
{
data: {
source: 'j',
target: 'g'
}
},
{
data: {
source: 'e',
target: 'j'
}
},
{
data: {
source: 'e',
target: 'k'
}
},
{
data: {
source: 'k',
target: 'j'
}
},
{
data: {
source: 'k',
target: 'e'
}
},
{
data: {
source: 'k',
target: 'g'
}
},
{
data: {
source: 'g',
target: 'j'
}
}
]
}
});
var eh = cy.edgehandles();
document.querySelector('#draw-on').addEventListener('click', function() {
eh.enableDrawMode();
});
document.querySelector('#draw-off').addEventListener('click', function() {
eh.disableDrawMode();
});
document.querySelector('#start').addEventListener('click', function() {
eh.start(cy.$('node:selected'));
});
});
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px;
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
#buttons {
position: absolute;
right: 0;
bottom: 0;
z-index: 99999;
}
<html>
<head>
<title>cytoscape-edgehandles.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-edgehandles#3.6.0/cytoscape-edgehandles.min.js"></script>
</head>
<body>
<h1>cytoscape-edgehandles demo</h1>
<div id="cy"></div>
<div id="buttons">
<button id="start">Start on selected</button>
<button id="draw-on">Draw mode on</button>
<button id="draw-off">Draw mode off</button>
</div>
</body>
</html>
I want to make an animation for each edge that I'm visiting sequentially, but when I try to do that the animation is done for all the edges at the same time, how can I fix this?
cy.edges().forEach(e => {
let src = parseInt(e.source().data('id'))
let trg = parseInt(e.target().data('id'))
let w = parseInt(e.style('label'))
e.animation({
'style': {'line-color': '#FF0000'}},
{'duration': '2000'}).play()
}
As you can see here, cytoscape provided this demo for your problem:
var cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: cytoscape.stylesheet()
.selector('node')
.style({
'content': 'data(id)'
})
.selector('edge')
.style({
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'width': 4,
'line-color': '#ddd',
'target-arrow-color': '#ddd'
})
.selector('.highlighted')
.style({
'background-color': '#61bffc',
'line-color': '#61bffc',
'target-arrow-color': '#61bffc',
'transition-property': 'background-color, line-color, target-arrow-color',
'transition-duration': '0.5s'
}),
elements: {
nodes: [{
data: {
id: 'a'
}
},
{
data: {
id: 'b'
}
},
{
data: {
id: 'c'
}
},
{
data: {
id: 'd'
}
},
{
data: {
id: 'e'
}
}
],
edges: [{
data: {
id: 'a"e',
weight: 1,
source: 'a',
target: 'e'
}
},
{
data: {
id: 'ab',
weight: 3,
source: 'a',
target: 'b'
}
},
{
data: {
id: 'be',
weight: 4,
source: 'b',
target: 'e'
}
},
{
data: {
id: 'bc',
weight: 5,
source: 'b',
target: 'c'
}
},
{
data: {
id: 'ce',
weight: 6,
source: 'c',
target: 'e'
}
},
{
data: {
id: 'cd',
weight: 2,
source: 'c',
target: 'd'
}
},
{
data: {
id: 'de',
weight: 7,
source: 'd',
target: 'e'
}
}
]
},
layout: {
name: 'breadthfirst',
directed: true,
roots: '#a',
padding: 10
}
});
var bfs = cy.elements().bfs('#a', function() {}, true);
var i = 0;
var highlightNextEle = function() {
if (i < bfs.path.length) {
bfs.path[i].addClass('highlighted');
i++;
setTimeout(highlightNextEle, 1000);
}
};
// kick off first highlight
highlightNextEle();
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
float: right;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape#3.3.0/dist/cytoscape.min.js">
</script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
So instead of going for the bfs path, you can define your own path and use the higlighting function of the demo.
Good luck
Excuse me, now I am using this to make a table. Now I would like one table header to have this property, colspan="6". However, how can I load data into this table?
Note. the table structure is:
<tr>
<th colspan="6" class="col-xs-4" data-field="status" data-sortable="true">Status</th>
</tr>
Note. the way I load data into bootstrap table is:
$("#table").bootstrapTable({data: data});
Bootstrap-table does not support rowspan and colspan Header temporarily.
More info : https://github.com/wenzhixin/bootstrap-table/issues/182
Alternatively, you can try below solution
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
},
{
field: 'price',
title: 'Item Price'
},
{
field: 'color',
title: 'Item Color'
},
{
field: 'size',
title: 'Item Size'
},
{
field: 'discount',
title: 'Item Discount'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1',
color: 'Red',
size: 'XL',
discount: '20%'
},{
id: 2,
name: 'Item 2',
price: '$2',
color: 'Green',
size: 'L',
discount: '30%'
},{
id: 'Total Items',
name: 2
}]
});
$('#table').bootstrapTable('mergeCells', {
index: 2,
field: 'name',
colspan: 5
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<table id="table"></table>
I am exploring the potential of Cytoscape.js, and would like to know if it is possible to visualize connections from compound nodes (parents) to children within this node.
In the example below I would like to show the connection between the parent node 'b' and the children 'a' and 'c', but so far I am unsuccessful.
Minimal working example is given below below, and editable here: http://jsbin.com/lelinaduko/3/edit
elements: {
nodes: [
{ data: { id: 'a', parent: 'b' } },
{ data: { id: 'c', parent: 'b' } },
{ data: { id: 'd' } },
{ data: { id: 'e' } },
{ data: { id: 'f', parent: 'e' } },
{ data: { id: 'b' } }
],
edges: [
{ data: { id: 'bd', source: 'b', target: 'd' } },
{ data: { id: 'eb', source: 'e', target: 'b' } },
{ data: { id: 'ca', source: 'c', target: 'a' } },
{ data: { id: 'ab', source: 'a', target: 'b' } },
{ data: { id: 'bc', source: 'b', target: 'c' } }
]
},
<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2015 by anonymous (http://jsbin.com/lelinaduko/3/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
<link href="style.css" rel="stylesheet" />
<meta charset=utf-8 />
<title>Cytoscape.js initialisation</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="code.js"></script>
<style id="jsbin-css">
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
#info {
color: #c88;
font-size: 1em;
position: absolute;
z-index: -1;
left: 1em;
top: 1em;
}
</style>
</head>
<body>
<div id="cy"></div>
<script id="jsbin-javascript">
$(function(){ // on dom ready
var cy = cytoscape({
container: $('#cy')[0],
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'color': 'black'
})
.selector('$node > node')
.css({
'content': 'data(id)',
'text-valign': 'top',
'text-halign': 'center',
'color': 'blue'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle',
'target-arrow-color': 'black',
'source-arrow-color': 'black',
'line-color': 'red',
'line-style': 'dashed',
'text-valign': 'top',
'text-halign': 'center',
'content': 'data(id)'
})
.selector(':selected')
.css({
'background-color': '',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}),
elements: {
nodes: [
{ data: { id: 'a', parent: 'b' } },
{ data: { id: 'c', parent: 'b' } },
{ data: { id: 'd' } },
{ data: { id: 'e' } },
{ data: { id: 'f', parent: 'e' } },
{ data: { id: 'b' } }
],
edges: [
{ data: { id: 'bd', source: 'b', target: 'd' } },
{ data: { id: 'eb', source: 'e', target: 'b' } },
{ data: { id: 'ca', source: 'c', target: 'a' } },
{ data: { id: 'ab', source: 'a', target: 'b' } },
{ data: { id: 'bc', source: 'b', target: 'c' } }
]
},
layout: {
name: 'breadthfirst',
directed: false,
avoidOverlap: true,
padding: 5
}
});
}); // on dom ready
</script>
</body>
</html>
It seems you found a bug:
https://github.com/cytoscape/cytoscape.js/issues/866
Use haystack edges instead if you want to work around the issue until a new release -- as those edges are unaffected.
I used the following script for using the bfs function.
$(loadCy = function(){
options = {
showOverlay: false,
minZoom: 0.5,
maxZoom: 2,
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'font-family': 'helvetica',
'font-size': 24,
'text-outline-width': 3,
'text-outline-color': '#888',
'text-valign': 'center',
'color': '#fff',
'width': 'mapData(weight, 30, 80, 20, 50)',
'height': 'mapData(height, 0, 200, 10, 45)',
'border-color': '#fff'
})
.selector(':selected')
.css({
'background-color': '#000',
'line-color': '#000',
'target-arrow-color': '#000',
'text-outline-color': '#000'
})
.selector('edge')
.css({
'width': 2,
'target-arrow-shape': 'triangle'
})
,
elements: {
nodes: [
{
data: { id: 'j', name: 'Jerry', weight: 65, height: 174 }
},
{
data: { id: 'e', name: 'Elaine', weight: 48, height: 160 }
},
{
data: { id: 'k', name: 'Kramer', weight: 75, height: 185 }
},
{
data: { id: 'g', name: 'George', weight: 70, height: 150 }
}
,
{
data: { id: 'h', name: 'Hag', weight: 70, height: 150 }
}
,
{
data: { id: 'i', name: 'Iam', weight: 70, height: 150 }
}
],
edges: [
{ data: { source: 'j', target: 'e' } },
{ data: { source: 'j', target: 'k' } },
{ data: { source: 'e', target: 'j' } },
{ data: { source: 'e', target: 'k' } },
{ data: { source: 'e', target: 'g' } },
{ data: { source: 'k', target: 'j' } },
{ data: { source: 'k', target: 'e' } },
{ data: { source: 'k', target: 'g' } },
{ data: { source: 'h', target: 'g' } },
{ data: { source: 'j', target: 'h' } },
{ data: { source: 'g', target: 'i' } }
],
},
ready: function(){
cy = this;
cy.$('#j').bfs(function(i, depth){
console.log('visits ' + this.id()+depth);
}, false);
}
};
$('#cy').cytoscape(options);
});
Output on console
visits j0
visits h1
visits g2
visits i3
visits k1
visits e1
But expected output should be something like
visits j0
visits h1
visits k1
visits e1
visits g2
visits i3
Am i missing something ?
You've found a bug. That particular one has been fixed in the 2.2 branch for the soon upcoming 2.2 release. That branch also has better unit tests (incl. for bfs). You can wait until 2.2 is released, or you can gulp build on the branch to get a snapshot build now.