I use the licensed fullcalendar with groupByDateAndResource set to true. I don't show a header as I built a custom one.
On the day view I only see the resource title but no date
On the other views I only see the date no resource title
How can I show both on both all views the way it appears in the documentation.
This is how my calendar object is configured (I use angular):
calendar: {
defaultDate: this.$stateParams.date,
height: $window.innerHeight - 45,
editable: true,
resources: [],
groupByDateAndResource: true,
header: '',
defaultView: 'agendaWorkWeek',
firstDay: 1,
minTime: '07:00:00',
maxTime: '22:00:00',
axisFormat: 'HH:mm',
timeFormat: 'HH:mm',
slotDuration: '00:15:00',
slotLabelInterval: '1:00',
allDaySlot: false,
eventColor: '#333333',
eventTextColor: '#000',
columnFormat: {
month: 'dddd',
agendaWeek: 'ddd, MMM D',
agendaDay: 'dddd, MMM D, YYYY'
},
nowIndicator: true,
displayEventTime: true,
displayEventEnd: {
month: false,
basicWeek: true,
'default': true
},
views: {
agendaThreeDay: {
type: 'agenda',
columnFormat: 'ddd, MMM D',
duration: {days: 3}
},
agendaWorkWeek: {
type: 'agenda',
columnFormat: 'ddd, MMM D',
duration: {days: 7},
weekends: false
}
},
dayClick: dayClick,
eventClick: eventClick,
eventResize: changeTime,
eventDrop: changeTime,
windowResize: windowResize
}
This sounds like a css problem. Did you overwrite the height for .fc-widget-header? That would make sense if you had no resources but if you have them it will lead to your issues.
Related
I have installed fmstarting point solution and it has a calendar done by java.
How can I change default weekends from sat sun to other days?
The code is down below.
BR
Dino
// This is where you can change the settings for your calendar.
var calendarEl = document.getElementById('calendar');
var calendar;
var initCalendar = function() {
calendar = new FullCalendar.Calendar(calendarEl, {
//Custom Button to add task
customButtons: {
FMNewTask: {
text: '+ Add Appointmen',
click:
function() {
var focus = calendar.getDate().toISOString();
doThis = NewTask(focus, '(0882)NewTask');
}
}
},
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
height: 'parent',
header: {
left: 'FMAdd,FMNewTask',
center: 'title',
right: 'prev,next today' //More options: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultView: '**VIEW**',
defaultDate: '**DefaultDate**',
navLinks: true, //Can click day/week names to navigate views.
editable: true,
eventLimit: true, //Allow "more" link when too many events
locale: 'en', //To change the locale. Examples: en-gb, fr, zh-tw
slotDuration: '00:30:00',
slotLabelInterval: '00:60:00',
minTime: '10:00:00',
maxTime: '19:00:00',
scrollTime: '06:00:00',
nowIndicator:true,
weekends:true,
businessHours: false,
businessHours: { daysOfWeek: [6,0,1,2,3,], // enable all days
startTime: '10:00',
endTime: '19:00',
},
This is my code, Legend's switchable property does not work, The graph has 3 linear series on two value axes, the idea is to hide the series(s) that are currently not useful.
You used the Akvio blur Admin temple, I followed the instructions, the bower file has all the dependencies of amChart. If I run the examples work very well, but they do not have the same structure as the angularJS handlers.
I have no idea what's failing or missing to set up.
I'll appreciate the help of everyone who can help me.
$scope.difference = response.data
var chart2 = AmCharts.makeChart('chartDiff', {
type: 'serial',
theme: 'blur',
dataProvider: $scope.difference,
balloon: {
fillAlpha: 1,
shadowAlfa: 0.5,
showBullet: true
},
valueAxes: [
{
axisAlpha: 0,
position: 'left',
title: 'Revenue - Payroll',
autoGridCount: true,
unit: '$',
unitPosition: 'left',
id: 'Axis-1',
color: '#2A0A12'
},
{
axisAlpha: 0,
position: 'right',
title: 'Difference',
autoGridCount: true,
unit: '$',
unitPosition: 'left',
id: 'Axis-2',
color: '#F0B71D'
}
],
graphs: [
{
balloonColor: '#35BC3F',
balloonText: '',
lineThickness: 2,
fillColorsField: '#b52121',
valueField: 'revenue',
title: 'Revenues',
switchable: true
},
{
balloonColor: '#ff0000',
balloonText: '',
fillColorsField: '#b52121',
lineThickness: 2,
title: 'Payrolls',
valueField: 'payroll',
switchable: true
},
{
balloonColor: '#ee0000',
balloonText: '',
fillColorsField: '#b55521',
lineThickness: 2,
title: 'Difference',
valueField: 'difference',
switchable: true,
valueAxis: 'Axis-2'
}
],
chartCursor: {
enabled: true,
bulletsEnabled: true,
categoryBalloonColor: "#F0D9A8",
color: "#000000",
cursorPosition: "mouse",
graphBulletAlpha: 0,
graphBulletSize: 5,
selectionAlpha: 0.93,
valueLineAlpha: 1,
cursorColor: "#000000",
valueLineEnabled: true
},
categoryField: 'driver_full_name',
categoryAxis: {
gridPosition: 'start',
labelRotation: 30,
autoWrap: true,
fontSize: 8
},
export: {
enabled: true
},
legend: {
useGraphSettings: true,
enabled: true,
backgroundAlpha: 0,
textClickEnabled: true,
useMarkerColorForValues: true,
useGraphSettings: true,
color: '#4C4646',
labelText: "[[title]]:",
spacing: 40,
valueAlign: 'left',
valueText: "$[[value]]",
}
});
I am trying to make a dashboard with a time series plot with time on the x axis. I have got my date in an epoch format such as:
return {
labels: [1568160683.5443,1568161754.43038,1568162825.31646,1568163896.20253, .......]
I have then arranged the options of my chart as such:
xAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: "rgba(29,140,248,0.1)",
zeroLineColor: "transparent"
},
ticks: {
padding: 20,
fontColor: "#9a9a9a"
},
type: 'time',
distrubution: 'linear',
time: {
displayFormats: {
'millisecond': 'h:mm a',
'second': 'h:mm a',
'minute': 'h:mm a',
'hour': 'h:mm a',
'day': 'h:mm a',
'week': 'h:mm a',
'month': 'h:mm a',
'quarter': 'h:mm a',
'year': 'h:mm a'
},
}
}
]
I have read that js epoch parsing will require the epoch to be in milliseconds, I have tried multiplying the epoch by 1000 to get in milliseconds, but my ouptput in my chart is still wrong. When using a web epoch converter my date comes out as "Wednesday, 11 September 2019 00:11:23.544" which is the correct value but in the chart it displays the date as Jan 1970 as seen below:
Whatever I try, the date comes out as 1970. Is there a simple fix that I'm missing?
As you wrote, "multiplying the epoch by 1000 to get milliseconds" should do the trick.
I made a runnable snippet out of the few epoch values you provided. The relevant line is the following:
labels: epochs.map(e => e * 1000),
To me, the result looks fine.
const epochs = [1568160683.5443,1568161754.43038,1568162825.31646,1568163896.20253];
const values = [2, 3, 1, 2];
var canvas = document.getElementById('myChart');
new Chart(canvas, {
type: 'line',
data: {
labels: epochs.map(e => e * 1000),
datasets: [{
label: 'My Dataset',
data: values,
fill: false,
borderColor: 'red',
}]
},
options: {
responsive: true,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'minute'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>
I'm using official Highcharts with React on a page to display different measurements. Everything works fine except for IE11 (go figure), which upon a specific scenario crashes the browser.
On the page the user is able to see measurements for daily, weekly, monthly etc. Each of these tabs then renders Highcharts with data for chosen time.
It works fine even in IE11 until user checks tab Monthly and to view the graph in hourly view (standard view for Monthly is a daily chart bar).
When Monthly -> Hourly view, the call responds with an object with about 700 arrays were the data is picked.
I did a test where I stripped the response for that specific scenario so that it showed only 50 entries = still a bit slow but didn't freeze on me.
I've been looking into this since it pretty much matches my issue as well but no luck:
https://github.com/highcharts/highcharts/issues/7725
Also, been trying to figure out how to provide a fiddle for this but the project is quite large which makes it difficult to pick bits and pieces.
So this is basically just a shout out to see if anyone has any other ideas. This works flawlessly in Chrome, Firefox etc.
I think it could be somewhat related to the amount of categories that are being set, just as the Github issue above says. But also, I've tried but no luck (or I did it wrong).
I'll provide the set of options that I have for Highcharts:
const options = {
chart: {
marginTop: 40,
animation: false,
},
title: {
text: ''
},
legend: {
enabled: this.state.resolutionType !== 'allyears',
reversed: true,
floating: true,
padding: 0,
x: 50,
align: 'left',
verticalAlign: 'top',
itemDistance: 5,
symbolRadius: 0,
symbolPadding: 2,
},
series: [{
type: this.state.graphType,
showInLegend: false,
data: this.state.newData,
tooltip: {
valueSuffix: ' :-'
}
},
{
type: this.state.graphType,
name: 'Historical',
visible: this.state.activeHistoricalData || this.state.activePreviousData,
showInLegend: false,
data: this.state.historicalData,
tooltip: {
valueSuffix: ' :-'
}
},
{
type: 'spline',
name: this.props.latestConsumptionContent('shortTemperature'),
visible: this.state.activeTemperature,
showInLegend: false,
showEmpty: false,
data: this.state.newTemp,
yAxis: 1,
tooltip: {
valueSuffix: ' .'
}
}],
plotOptions: {
series: {
maxPointWidth: 40,
connectNulls: true,
events: {
click: event => this.handleChartPointClick(event.point.time)
},
},
column: {
marker: {
enabled: false
}
},
line: {
marker: {
enabled: false
}
},
area: {
fillOpacity: 0.3,
marker: {
enabled: true,
symbol: 'circle'
}
}
},
xAxis: {
categories,
tickInterval: getTickInterval(this.state.resolutionType, this.state.periodTime),
reversedStacks: true,
autoRotation: false
}
},
yAxis: [{
min: 0,
title: {
text: ':-',
align: 'high',
offset: 0,
rotation: 0,
y: -20,
},
labels: {
format: getLabelFormat(this.state.resolutionType, this.state.periodTime),
}
},
{
title: {
text: this.props.latestConsumptionContent('shortTemperature'),
align: 'high',
offset: 0,
rotation: 0,
y: -20,
},
showEmpty: false,
reversed: this.state.reverseTemperatureAxis,
opposite: true
}],
credits: false
};
After having read the fullcalendar docs, I thought setting a month attribute in calendar in $scope.uiConfig as below would do it. But I can't understand where exactly I set the month attribute in.
$scope.uiConfig = {
calendar: {
firstDay:1,
month: 0,
year: 2018,
height: 220,
aspectRatio: 1.09,
editable: true,
header:{
left: 'title',
center: '',
right: ''
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender,
month: 3
}
};
Fixed the issue. I used the attribute 'defaultDate' instead of 'month'. This has been updated based on the fullcalendar docs here. It accepts any moment date. For example:
$scope.uiConfig = {
calendar:{
defaultDate: "2018-10-01"
}
}