How to display the time label of the timelineDay view of the fullcalendar at the bottom ?
as you can see in this image below. the time is on top of the grid. I want it to be at the bottom of the grid. How do we do that? there's no article about it in the official documentation.
below is my code to display those things you see in the image above. I wonder what parameter or property do we need to add so that the time will appear at the bottom, not on top
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid','timeline'],
header: {
left: 'prev,next today',
center: 'title',
right: 'timeGridDay,timeGridWeek,dayGridMonth,listWeek'
},
defaultView: 'timelineDay',
allDaySlot: false,
slotLabelFormat: {
hour: 'numeric',
hour12: false,
minute: '2-digit',
omitZeroMinute: true,
meridiem: 'false'
},
showNonCurrentDates: true,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(arg) {
// is the "remove after drop" checkbox checked?
if (document.getElementById('drop-remove').checked) {
// if so, remove the element from the "Draggable Events" list
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
}
}
});
calendar.render();
Note: am referring to the "HOURS" displayed,not the control buttons on top
Try adding a footer section and move it there from your header section. The footer takes the same exact values as a header and will display at the bottom of the calendar. For more info you should check out https://fullcalendar.io/docs/toolbar
Related
I work with draggable and dropablle object, and I have issues with jumping objects on random place.
I have few dropablle areas, and dragable objects, for this I use script:
$('.draggable-box').draggable();
For droping I use this script:
$('.draggable').draggable({
stop(e, ui) {
},
});
$('.grid-item').droppable({
accept: '.draggable',
drop(e, ui) {
ui.draggable.appendTo(this);
},
});
As you can see on attachment it is jumping to random place in the page.
One solution I found:
$('.draggable').draggable({
stop(e, ui) {
$(this).css({
left: 0,
top: 0,
});
},
});
$('.grid-item').droppable({
accept: '.draggable',
drop(e, ui) {
ui.draggable.appendTo(this);
},
});
But on this case it's stuck on one place, I try to change css values top left, it's no working. As I understood it's taking left and top from first storing box, and for this I get width of the box
var width = $(".box-legend").width();
var currentWithd = ui.position.left;
And try to minus from final position like this:
$('.draggable').draggable({
stop(e, ui) {
$(this).css({ left: currentWithd - width})
},
});
But every time when I drag element it's jumping randomly, for now i tried and I have no idea how to fix :(
So end result should be dragging element to the storage box, and this element stay on position not jumping.
Is anyone even use PhotoSwipe before ?
https://github.com/dimsemenov/PhotoSwipe
I stuck at image left and right (back and next)
like this image.
I don't want the other icon. I want to know how to fix this.
I already try to disable image inside css but it's still not work
Please help.
You can use the following options available to show/hide photoswipe buttons/elements.
for more info read docs here
var options = {
history: false,
focus: false,
closeEl: true,
captionEl: true,
fullscreenEl: true,
zoomEl: true,
shareEl: true,
counterEl: true,
arrowEl: true,
preloaderEl: true
};
We've just updated to the latest Highcharts version and now a few of our chart types have a new line connecting the tooltip to the point.
It's mainly obvious on charts with fixed tooltips.
Does anyone know how to remove this line without removing the border of the tooltip itself?
I have come up with a work around that involves setting the borderwidth of the tooltip to 0 and adding a rounded, bordered, coloured div to the tooltip using useHTML:true and disabling the shadow.
Though I dont want to do this for every chart as it seems a bit nasty.
This also affects bar and tree maps that I can see and I've trawled the documentation to no avail.
http://jsfiddle.net/mattscotty/bqw4bc4x/1/
Highcharts.chart('container', {
title: {
text: 'Fixed tooltip'
},
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
},
backgroundColor: 'rgba(255,255,255,0.8)',
//Uncomment below to remove line, but this also removes tooltip border
//borderWidth:0,
//shadow:false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
series: [{
data: [29.9, 71.5, 106.4]
}, {
data: [194.1, 95.6, 54.4]
}]
});
Thanks in advance.
By default tooltip's shape is set to a callout which has a chevron/line pointing to the point. You can change the tooltip's shape to, e.g. rectangle - which does not have any connector.
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
},
backgroundColor: 'rgba(255,255,255,0.8)',
shape: 'rect'
example: http://jsfiddle.net/bqw4bc4x/2/
The accepted answer only partially worked in Highstock. The connectors for the volume and indicator tooltips were suppressed, but I still had a connector from the DateTime box to the crosshair.
As an alternative to the shape: 'rect' hack, you can try:
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
},
split: false,
shared: true,
backgroundColor: 'rgba(255,255,255,0.8)'
These split: and shared: settings consolidate all the tooltip boxes into a single box. Provided that this meets your needs it seems to solve the connector issue.
Very odd design decision by Highcharts. The connectors are highly intrusive visually and I can't imagine that many designers will want to use them, but you can only disable them with a hack. What were they thinking?
I am using kendoui grid , which is shown when I click in a bubbletree(its like tree structure). The data in the grid comes dynamically on clicking bubbletree . The kendoui grid loads fine on first click but the grid overlaps on second click and so on gets overlapping .
I am using following code.
function showKendouiGrid(nodeCoordinate) {
var kendouiConstants = {
BASE_URL: 'http://',
DATA_URL: '/eventbot/public/bubbletreedata/list-category?category=' + nodeCoordinate.label,
PAGE_SIZE: 20,
GRID_HEIGHT: 100
}
jQuery("#grid").kendoGrid({
columns: [{
field: 'label',
title: "Activitiy",
}],
dataSource: {
serverPaging: true,
pageSize: kendouiConstants.PAGE_SIZE,
transport: {
read: {
url: kendouiConstants.BASE_URL + window.location.host + kendouiConstants.DATA_URL,
dataType: "json",
type: "GET"
}
},
schema: {
data: "data",
total: "total"
},
serverFiltering: true,
},
height: kendouiConstants.GRID_HEIGHT,
pageable: {
refresh: true,
pageSizes: true
},
selectable: "row",
scrollable: true,
filterable: true,
sortable: true,
});
}
There is another issue also that , the footer of kendoui grid shows "no items to display" , while it has items on it .
Thanks in advance.
Every time you click on the bubble tree, the grid is regenerated on the previous version of the grid. So, the first time you do it, all is fine and you end up with newly generated kendogrid markup which has its own wrapper elements in HTML. Next time you create the grid, it is recreated on the older and the wrappers are 'rewrapped' inside the previous ones.
What you should do is either .destroy() the grid or just change the grid datasource when the tree is clicked.
Having a strange issue with jqplot. I've created a horizontal bar chart with 2 series and 5 labels; all populated with variables from a table.
var plot1 = $.jqplot('chart1', [
[[SERIESA[0],TITLE[0]], [SERIESA[1],TITLE[1]], [SERIESA[2],TITLE[2]], [SERIESA[3],TITLE[3]], [SERIESA[4],TITLE[4]]],
[[SERIESB[0],TITLE[0]], [SERIESB[1],TITLE[1]], [SERIESB[2],TITLE[2]], [SERIESB[3],TITLE[3]], [SERIESB[4],TITLE[4]]]], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
// Show point labels to the right ('e'ast) of each bar.
// edgeTolerance of -15 allows labels flow outside the grid
// up to 15 pixels. If they flow out more than that, they
// will be hidden.
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
// Rotate the bar shadow as if bar is lit from top right.
shadow: false,
// Here's where we tell the chart it is oriented horizontally.
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
This renders a lovely horizontal bar chart. I would like for the two series to be stacked under each label, but when I add the line
stackSeries: true,
above my seriesDefaults my bars all vanish. Everything else (labels, ticks, etc) remains the same. Is there something in addition to the stackSeries option I need to add?
I am not sure what might be the reason with your code, what you showed appears to be all right. Maybe something wrong with the way you set the data, but then again it wouldn't work at all.
Check out my example it might help you out.
I found a way to fix my problem (not entirely, but sufficiently for my need). This issue only occurs when I use custom lables pulled from somewhere else; if I use generic "1,2,3,4,etc." the graph stacks properly and shows data. Ideally I would have custom lables, but I can just put a simple table beside the graph to act as the axis labels.
Actually you can have custom labels, by adding tickt, for example:
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
angle: -90
},
labelOptions: {
fontSize: '11pt',
},
ticks: ['tick 1', 'tick 2'],
}