How can I add a negative date to the timeline?
My current code is:
let items = new vis.DataSet([
{id: 1, content: 'today', start: '2018-11-02'}
])
new vis.Timeline(document.getElementById('timeline'), items, {})
To add an event to the timeline, I just add it to items:
items.add({id: 2 content: 'tomorrow', start: '2018-11-03'})
If I zoom the timeline out I see that it shows dates before year 1. How can I add an event to a negative date, without needing to drag the event?
I dont know if it works on your lay out, but i use timestamps (if you import timestamps from php you should add 3 0's to the end as php use seconds and js use miliseconds )
but that works for me.
alternative what happens if you add this
items.add({id: 3 content: 'past', start: '2018-10-03'})
would that not show the item before current time ?
I got it!
new Date(-2018, 11, 26)
This will produce a negative date.
Related
If I want show only one item for today, nothing are shown, ex: (Change the date for today)
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2021-12-16'},
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
Example Code Pen: https://codepen.io/nuno-soares-the-scripter/pen/xxXqvLP
The linked CodePen is using vis.js v4.21.0 which was released in October 2017 and is now deprecated as per https://github.com/almende/vis. The issue described at https://github.com/almende/vis/issues/3616 is occurring in this older version. This causes visibility: hidden; to be added to the visualization elements inline CSS.
Two ways to resolve this:
1. Update to vis-timeline
Update from the depreciated vis.js v4.21.0 to the latest version. After vis.js was depreciated the components were split into separate modules, the module for the timeline being vis-timeline at https://github.com/visjs/vis-timeline.
As per the GitHub example the JavaScript and CSS sources should be updated. Updating these on the CodePen displays the timeline.
<script type="text/javascript" src="https://unpkg.com/vis-timeline#latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://unpkg.com/vis-timeline#latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
2. Set Start Date
If you cannot use vis-timeline and must remain on this depreciated version then adding a start date to the options object will also display the timeline.
var options = {start:'2021-12-16'};
I just added FSCalendar in Storyboard. I did not change anything via delegate methods. I just wanted to show all the days from Sunday to Saturday. Please help. Thanks
I got it working. My calendar was actually sitting on a view. Then I was hiding/showing that view (and with it the calendar) on the tap of a button. I just added this:
fsCalendar.contentView.frame.size.width = calendarFoundation.frame.size.width - 10
fsCalendar.layoutSubviews()
Adjust the inner frame of CalenderView with respect to outer frame of the view. This type of calendar (Pods) has default (constant) space between columns and rows. Therefore to get the calendar fit into UIView need to adjust the constraints either programmatically or from storyboard. As per the following adjustment, considering this as sample, make it as per your convenience
calendar.frame = CGRect(x: 0, y: 0, width: calendarView.frame.width-50, height: calendarView.frame.height)
layoutSubviews() OR layoutIfNeeded() // As per convenience
OR
calendar = FSCalendar(frame: CGRect(x: 0, y: 0, width: self.calendarView.frame.width-50, height: self.calendarView.frame.height))
layoutSubviews() OR layoutIfNeeded() // As per convenience
I have events with a "buffer" time before or after like "prep work" or "driving time". I'm trying to figure out how to display this. Some pseudo code of my data:
{
start: 11am,
end: 11:30am,
preptime: 5 minutes
}
The ideal thing would be to show an event that starts at 10:55, but with a different style for those first 5 minutes. Can you think of any way to accomplish this?
If I understood your question, this will subtract prep time from start of event and shade it (percentage) differently than rest of event. Tested in Firefox 54, Chrome 58, Edge, IE11.
https://jsfiddle.net/wp3nyax7/
$(function() {
var preptime = 'preptime'; /* name of property that holds prep time (minutes!) */
$('#calendar').fullCalendar({
events: [{
title: 'Event 1 has prep time',
start: moment(),
end: moment().add(30, 'minutes'),
preptime: 5
}, {
title: 'Event 2 no prep',
start: moment().add(1, 'hour'),
end: moment().add(1.5, 'hour')
}],
eventRender: function(event, element, view) {
// if there is a prep time, calculate how much to shade and make gradient for it
if (event.hasOwnProperty(preptime)) {
var prep = event[preptime];
var length = event.end.diff(event.start, 'minutes') - prep;
var ppct = (prep / length).toFixed(2) * 100;
makeGradients(element, ppct);
}
},
/* subtract prep time (minutes!) from start of event */
eventDataTransform: function(eventData) {
if (eventData.hasOwnProperty(preptime)) {
eventData.start.subtract(eventData[preptime], 'minutes');
}
return eventData;
}
});
function makeGradients(element, ppct) {
/* gradient info found via http://gradcolor.com/css3-gradient.php */
/* All these prefixed editions may not be necessary? Didn't bother to find out */
var prefixes = ['', '-moz-', '-ms-', '-o-', '-webkit-'];
var color1 = '#992222',
color2 = '#229922';
var grad = 'linear-gradient(left, {color1} {pct}%, {color2} {pct}%)'
.replace('{color1}', color1)
.replace('{color2}', color2)
.replace(/{pct}/g, ppct);
$.each(prefixes, function(i, v) {
element.css('background-image', v + grad);
});
/* also -webkit-gradient(linear, left bottom, right bottom, color-stop(%,color1), color-stop(%, color2)) */
}
});
Thank you for the ideas! #smcd had the solution I needed then I started to better understand the data I've got and had to revise my thinking a bit. The gradient idea allowed the event to remain intact and be resized and dragged which is great.
The change in my data meant that the buffer time isn't a part of the start and end times. Instead it's an additional field. So a 9am - 10am appointment with a 5 minute buffer still needs to be read and written back as 9-10 rather than 8:55 - 10. This matches the customer experience as well since they are thinking of 9am - 10am events. They do need to see that there's additional time required.
My solution was to add classes to the events objects like: .buffer-5, .buffer-10, .buffer-15 to support 5 minute intervals. From there I use the slotWidth value to determine the size to display. Using :before I add a slightly transparent shaded region showing the "buffer" time.
This approach has one caveat: buffer times may overlap appointments rather than pushing them onto new lines. this might be desirable though.
In the end, the buffer data is being treated more like helper text so I think it's the right solution.
Thank you!
I am implementing the timeline view of Full Calendar in my project, and although it works and looks great, the only issue I have is that in timeline Month view, the event bars do not wrap so half the text is cut off, especially so when the event only lasts a couple of days.
In Week and Day view, the text wraps fine - it's just in Month view. Is there any way to allow it to wrap the text? In certain cases there are notes added to the booking so they are pretty much unreadable in month view.
I'm using this code to add the description:
eventRender: function(event, element) {
element.find(".fc-event-title").remove();
element.find(".fc-event-time").remove();
if(event.desc) {
var new_description =
'<br/><div class="fc-title">' + event.desc + '</div>'
;
element.append(new_description);
}
}
within my calendar params.
Here is a picture of what the entry looks like in timeline Month view:
And here is what it looks like in Day view (what I'd like it to look like):
If anyone can help with this I'd be grateful.
Just encountered the same problem, and this works for me...
.fc-event-time, .fc-event-title {
padding: 0 1px;
white-space: normal;
}
When using isRTL : true
shouldn't the week and day view - hours column - display on the right side ?
i'm using it like that
$(document).ready(function () {
flag = !1;
$("#Xcalendar").fullCalendar({
theme: !0,
isRTL : true,
header: { left: "next,prev today", center: "title", right: "month,agendaWeek,agendaDay" },
I'm using version 1.5
I have tested in my calendar and the month view is displayed Rigt to Left but the week and day view are displayed in the default way LTR...
I am using the 1.6 version, so i guess its suposed to be like that...