Is it possible to create a custom resourceTimline view where multiple days of the week are shown - similar to the default month view (resourceTimelineMonth) - instead of just a few slots of a day?
So basically instead of this:
I would like to have something like this:
... but only 5 days shown.
A custom view definition as follows should do what you need:
resourceTimelineFive: {
type: 'resourceTimeline',
buttonText: '5 Days',
slotDuration: { days: 1 },
duration: { days: 5 }
},
Demo: https://codepen.io/ADyson82/pen/abdwOXO
See the following documenation links:
https://fullcalendar.io/docs/custom-view-with-settings
https://fullcalendar.io/docs/slotDuration
https://fullcalendar.io/docs/duration
and the demo at https://fullcalendar.io/docs/timeline-custom-view-demo for more information.
Related
I have a simple time-series in highchart:
series: [{
"data": [[Date.UTC(2021,0,1), 22312], // January
[Date.UTC(2021,1,1), 12312], // Feburary
[Date.UTC(2021,2,1), 23322], // ... etc.
],
Now I want to zoom into one month, and show just one column with the given code:
rangeSelector: {
buttons: [{
text: '1m',
type: 'month',
count: 1, // This should show only 1 month, but it shows 2.
// If this is changed to "0", one month will be show, but
// The css "highcharts-button-pressed" is disabled, and you cannot
// see that "1m" was clicked.
},
According to documentation "rangeSelector.buttons.count" should span over an area of one month if type is "month" and count is "1". But what I´m getting here is a span over two months.
Here is an example:
https://jsfiddle.net/ds90vf5r/1/
Question 1: Why is higchart showing two columns instead of one when choosing/clicking on just 1-month (1m)?
Question 2: How can I zoom into the current date and show just one moth (or one column)?
I am using Full Calendar with Time Grid plugin, all is working good. I want to change color for past date & time. By dayRender event I could change color of previous date but not time, as for example view for week starting from Sunday 8 Spetember 2019 till 14 Saturday 2019. and open page on 10 Sep 2019 at 9.00 AM, I should change color until 10 Sep 2019 at 9.00 AM but I could do it until 9 Sep 2019.
How can I include time. My code pen
https://codepen.io/milindsaraswala/pen/VwZXpRM
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'resourceTimeGrid' ],
timeZone: 'UTC',
defaultView: 'resourceTimeGridFourDay',
soltDuration: '00:30:00',
slotLabelInterval: '00:30:00',
minTime:'07:00:00',
maxTime:'24:00:00',
slotLabelFormat:{
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: 'short'
},
header: {
left: 'prev,next',
center: 'title',
right: 'resourceTimeGridDay,resourceTimeGridFourDay'
},
views: {
resourceTimeGridFourDay: {
type: 'resourceTimeGrid',
duration: { weeks:1},
buttonText: '7 days'
}
},
resources: [
{ id: 'a', title: 'Room A' },
],
//events: 'https://fullcalendar.io/demo-events.json?with-resources=2',
events:events,
dayRender:function(day){
if (moment(day.date).isBefore(moment())) {
day.el.classList.add('disabledDates');
}
}
});
calendar.render();
});
You can restrict the previous days must more robustly by using a validRange without an end date:
validRange: function(nowDate) {
return {
start: nowDate
};
},
As well as just visually greying out the dates this will also stop events being added or dragged onto them.
Greying out the times of the current day is much more problematic. That's because there is no single HTML element representing a "time slot" on a particular day which you can target in order to do an hour-by-hour or even minute-by-minute restriction. I think the best thing you can do here is to create a background event which covers the period of the day up until the current time:
dayRender: function(day) {
var d = moment(day.date).startOf("day");
var today = moment().startOf("day");
if (d.isSame(today)) {
var now = moment();
var evt = {
start: today.format("YYYY-MM-DD HH:mm"),
end: now.format("YYYY-MM-DD HH:mm"),
rendering: "background",
className: "disabledDates"
}
calendar.addEvent(evt);
}
}
If you then wanted to restrict the creation / dragging of other events over the background event you can do via some of the date selection settings.
Demo: https://codepen.io/ADyson82/pen/pozLWjo
Is it possible to format the small date for example Wed 8/8(red arrow in the picture) to a longer format (green arrow in the picture) such as Tue 14 Aug 2018?
See the image attached.
I can't find anything in the documentation.
Here is my json for the view:
timelineSevenDays: {
type: 'timeline',
duration: { days: 7 },
dateIncrement:{ days: 3 },
titleFormat: 'ddd DD MMM YYYY'
}
Thanks
enter image description here
I am a beginner for highcharts. I was trying something and got stuck. My x axis has values repeated multiple times. Tooltip values should contain date and time as shown. but the thing i want to change is the x axis values. same value must be shown only once and not repeated everywhere where there is data.
X axis format must be DD-MMM and tooltip should be DD-MM-YY HH am/pm .
is this possible?
Here is my trial code
http://jsfiddle.net/j6oqcgp2/
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
categories:['01-Feb-17 12 AM','01-Feb-17 01 AM','01-Feb-17 02 AM','02-Feb-17 04 AM','02-Feb-17 05 AM','02-Feb-17 06 AM','02-Feb-17 07 AM'],
labels: {
formatter: function () {
y=(this.value).substring(1,6);
return y;
}
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
formatter: function () {
y=(this.x).substring(0,15);
return y;
},
shared:false
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2012-2013',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [5,10,19,10,4,6,8]
}]
});
and this is how i want it to be
If your x-axis categories are going to be a predictable set of values (for example, four readings on each day), then you simply can add the tickInterval attribute to show a new axis label on when the day changes (see http://api.highcharts.com/highcharts/xAxis.tickInterval).
So, if you had four readings per day, you would add tickInterval: 4 to your x-axis options. This would show an axis label at every fourth reading, or, in this example, once per day.
If, however, your x-axis categories are not predictable (for example, any number of readings per day), you may want to look at this Highcharts demo, which shows a chart with irregular time periods: http://www.highcharts.com/demo/spline-irregular-time. In this demo, you'll see regular, non-repeating axis labels for whatever unit you're measuring (hours, days, etc.) and the data being plotted as frequently as it's recorded in the data.
I hope these examples and resources are helpful for you.
Hi I've got follow code:
angular.module("myApp", []).controller("myController", function($scope) {
$scope.currentOption;
$scope.setCurrentTimespan = function() {
//CODE HERE
};
$scope.timespanList = [{
id: 1,
name: 'morning',
startDate: '19.09.2016 06:00',
endDate: '19.09.2016 11:59'
}, {
id: 2,
name: 'noon',
startDate: '19.09.2016 12:00',
endDate: '19.09.2016 13:29'
}, {
id: 3,
name: 'afternoon',
startDate: '19.09.2016 13:30',
endDate: '19.09.2016 18:29'
}, {
id: 4,
name: 'evening',
startDate: '19.09.2016 18:30',
endDate: '19.09.2016 23:59'
}, {
id: 5,
name: 'night',
startDate: '20.09.2016 00:00',
endDate: '20.09.2016 05:59'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<select ng-options="option as option.name for option in timespanList" ng-model="currentOption"></select>
</div>
I've got from the backend a object with items for my select. In this list there are some timespans like morning, noon, afternoon etc. This timespans have a startDate and an endDate, which also comes from the backend. For example, the timespan "morning" has follow startDate/endDate: [todays date] 06:00 / [todays date] 11:59. So what I want to do is, when I load the list and fill the select with ng-options, I would like to select the item from the list, which matches with the current timestamp. So I have to get the current date and time for example: 19.09.2016 09:45 and than search in the list the item which is defined for this timestamp and select it in the list. So I have to check the startDate/endDate with the current date / time. This should happen when the list was loaded.
So the result for my local time (19.09.2016 09:45) at this moment would be morning.
Has someone an idea how to do this? I didn't find any answers which can help me...Thanks
EDIT WITH SOLUTION:
I've found a perfect way to solve this problem: I found moment.js, which solves my requirements. After including it into my web app I start to use the queries and functions from moment.js to solve my problem. It works like this:
Get current timestamp (day, month, year, hour and minutes):
let currentTimestamp = moment(); //for example 19.09.2016 11:30
Than I loop throught my array with the timespans and parse the startDate/endDate with the moment.js to my required format DD.MM.YYYY HH:mm and then I can use the moment.js query isBetween() to check, if my currentTimestamp is between the startDate/endDate of each item like this:
this.timespanList.forEach(function(item) {
let startDate = moment(item.startDate, 'DD.MM.YYYY HH:mm'); // for example 19.09.2016 06:00
let endDate= moment(item.endDate, 'DD.MM.YYYY HH:mm'); // for example 19.09.2016 11:59
if(moment(currentTimestamp).isBetween(startDate, endDate)) {
$scope.currentOption = item;
}
});
So if the condition of the looped item is true, I can set the right option in my list. Here are some links of moment.js which describe, how to use it correcty - it's awesome!
moment.js docs: http://momentjs.com/docs/
moment.js parsing: http://momentjs.com/docs/#/parsing/
moment.js queries: http://momentjs.com/docs/#/query/
I hope this is usefull! An alternative solution from the answers which also would work is marked as correct. Thanks and cheers.
You can implement a custom filter to achieve this.
<select ng-options="option as option.name for option in timespanList | momentFilter" ng-model="currentOption"></select>
.filter('momentFilter',function(){
return function (object) {
var array = [];
angular.forEach(object, function (time) {
if(time.startDate.split(" ")[1] == '06:00' && time.endDate.split(" ")[1] == '11:59'){
array.push(time);
}
});
return array;
};
});
I have created a working plunker here.
Do little more work around to achieve this.
EDIT WITH SOLUTION FROM THE QUESTION:
I put my own solution which is in my edited question here so everyone can see it faster:
I've found a perfect way to solve this problem: I found moment.js, which solves my requirements. After including it into my web app I start to use the queries and functions from moment.js to solve my problem. It works like this:
Get current timestamp (day, month, year, hour and minutes):
let currentTimestamp = moment(); //for example 19.09.2016 11:30
Than I loop throught my array with the timespans and parse the startDate/endDate with the moment.js to my required format DD.MM.YYYY HH:mm and then I can use the moment.js query isBetween() to check, if my currentTimestamp is between the startDate/endDate of each item like this:
this.timespanList.forEach(function(item) {
let startDate = moment(item.startDate, 'DD.MM.YYYY HH:mm'); // for example 19.09.2016 06:00
let endDate= moment(item.endDate, 'DD.MM.YYYY HH:mm'); // for example 19.09.2016 11:59
if(moment(currentTimestamp).isBetween(startDate, endDate)) {
$scope.currentOption = item;
}
});
So if the condition of the looped item is true, I can set the right option in my list. Here are some links of moment.js which describe, how to use it correcty - it's awesome!
moment.js docs: http://momentjs.com/docs/
moment.js parsing: http://momentjs.com/docs/#/parsing/
moment.js queries: http://momentjs.com/docs/#/query/
I hope this is usefull! An alternative solution from the answers which also would work is marked as correct. Thanks and cheers.