In my agendaDay view I some times need to display events that do not have an end time:
$(".agenda").fullCalendar({
events: [
{
title: "Start day",
start: '2017-04-19T09:00:00'
},
{
title: "Do some work",
start: '2017-04-19T09:05:00',
end: '2017-04-19T17:00:00'
}
]
});
Such events get rendered as if they lasted two hours:
Is there a way to control that or an alternative feature I should be using?
Docs for v1 mention the exact property I need:
defaultEventMinutes 1.4
Determines the length (in minutes) an event appears to be when it has
an unspecified end date.
Integer, default: 120
By default, if an Event Object as no end, it will appear to be 2
hours.
... but the property is apparently not available on 3.3.1 :-?
In the v2 & 3 API it's been split in two properties, so you can set different values to all day events and timed ones:
defaultAllDayEventDuration
defaultTimedEventDuration
Also, the new properties expect a string with a time ("00:45:00") rather than seconds (2700).
Related
I use FullCalendar 5, and I have some events which can long several days.
The default behavior of FullCalendar is to make events to go until midnight, then start at 0:01 the next day.
Is it possible to constraints the events to always start and end at a specific time ?
Here is a fiddle: http://jsfiddle.net/gsuzawqv/
I defined my events like:
events: [
{
title: 'Meeting',
start: '2022-04-13T10:00:00',
end: '2022-04-15T15:00:00',
constraint: 'availableForMeeting', // defined below
color: '#257e4a'
},
// areas where "Meeting" must be dropped
{
groupId: 'availableForMeeting',
startTime: '10:00:00',
endTime: '16:00:00',
display: 'background'
},
]
I want my Meeting event to start and end every day at the constraint I set. For now, it doesn't take care of startTime and endTime.
I'm trying to figure out in firestore what the best way is to query date data for a week. I have objects that span multiples days and i want to know what elements are a part of a particular time span. Right now my data hasa start and end date represented by their unix ms value. Some start before the query start date and some end After the query end date. How am I to properly query this or properly denormalize the data.
For example i want to retrieve all items that occur for this current month, Oct. Some elements might have a start date of Sept 30 - Oct 2 and some might be Oct 31 - Nov 2nd. How do i structure/query my data to include those edge cases?
{
active: true,
address: {
addressLine1: "5 May Way",
city: "Wilmington",
state: "Ny",
zip: "40778"
},
createdOn: 1570558984758,
day: 1570507200000,
event: {
startDate: 1570558945155,
endDate: 1570559945160,
utcOffset: -240
},
id: "6FXSCc8BFqww59PT0HyE",
name: "Test",
portalId: "iHvdmHxsQsQvoaQIO0r4",
statusId: 0,
}
From the top of my head, you may include a field for the months that event happen in (e.g. occurrence). This field would be an array and your query to find out if that event happened in a specific month you could use a where clause where that field would contain the month you are looking for. Something like where('occurrence', 'array-contains', 'October').
That is, you could add to your event field the array occurrence, it would look like this:
event: {
startDate: xxxxxxxxx,
endDate: xxxxxxxxx,
utcOffset: xxx,
ocurrence: [September, October]
}
This would handle both regular and edge cases.
I'm trying to build a custom view with Fullcalendar with the following features:
The view I want to show is similar to the "timelineMonth" view, with the difference that it should start 3 days before the 1st of the requested month, and should end 3 days after the last day of the requested month. It's a sort of "extendedMonth" View
I also require that the first visible day is the first of the month (and the 3 days before the first will be visible through scrolling)
the view title should be the name of the requested month (not the range of the 3 months showed)
I've tried with custom Views example with visible range option, but I can't find the correct configuration.
This is my current code. The date range is correct, but the first visibile day is not the first offline the month (it's the -3 days) and the title shows the range of months (example: aug-oct)
views: {
extendedMonth: {
type: 'timeline',
dateAlignment: 'month',
titleFormat: 'MMM',
visibleRange: function(currentDate) {
var startOfMonth = currentDate.clone().startOf('month');
var endOfMonth = currentDate.clone().endOf('month');
return {
start: startOfMonth.clone().subtract(2, 'days'),
end: endOfMonth.clone().add(2, 'days')
};
},
buttonText: 'Extended Month'
}
}
Thank you for the help!
Sample View:
I would like to create a custom year view to show the timeline in every month slots. I can use fullcalendar-scheduler with a custom view and define like this:
views: {
timelineCustom: {
type: 'timeline',
buttonText: 'Year View',
duration: {year:1},
slotDuration: {month:1}
}
}
However, there is no way to set up a fiscal year view with month start at April 1st and end at March 31st next year. And also, a timeline bar will cover a whole month slot even though an event only starts from the second half of that month.
Your first problem - starting the view in April and ending in March of the following year, can be solved using the new "visibleRange" option. This lets you supply start/end dates for the view, relative to the "currentDate" (i.e. the date fullCalendar curently regards as being selected). You also have to set the "dateIncrement" option, to ensure that Next/Previous increment the current date by 1 year.
N.B. This requires fullCalendar 3.3.0 and Scheduler 1.6.0, or later.
timelineCustom: {
type: 'timeline',
buttonText: 'Year View',
dateIncrement: { years: 1 },
slotDuration: { months: 1 },
visibleRange: function(currentDate) {
return {
start: currentDate.clone().startOf('year').add({ months: 3}),
end: currentDate.clone().endOf("year").add({ months: 4})
};
}
}
See https://fullcalendar.io/docs/current_date/visibleRange/ and https://fullcalendar.io/docs/current_date/dateIncrement/ for more details
However, your issue where the timeline bar covers a whole month slot even though an event only starts in the second half of a month, is not really solvable in the way you want. The whole point of "slots" is to be the minimum time that an event can be displayed for in that particular view. If you want it to be more subtle than that, you would have to define shorter slots. The same thing happens in fullCalendar's default "Month" (non-timeline) view - all events cover a whole day even if they're timed, but you can see the times in the description. I see in your example you have already got the dates of those events displayed in the description, so it should be reasonably clear for your users.
I suggest your users click on the Month View to get a more detailed breakdown with the slot durations more accurately displayed. Either that or you have to compromise and set slotDuration to something smaller.
I am using backgrid to display JSON results from the backend Db. One of the fields is time in seconds from 1970 (eg. 1362578461000) when the Backbone view receives this data backgrid sends it off to moment for formating. Moment then throws a javaScript TypeError exception indicated on line 758 of Moment.js (v.2.0.0)
TypeError: string.indexOf is not a function
The column format looks like this:
var columns = [{
name: "startTime",
label: "Start Time",
editable: false,
cell: "moment"
}, {
name: "endTime",
label: "End Time",
editable: false,
cell: "moment"
}];
Putting a brakepoint in Firebug it looks like Moment thinks that the value is a integer rather then a string.
utc()moment.js (line 960)
input = 1362578461000
format = "YYYY-MM-DDTHH:mm:ssZ"
lang = undefined
And the call to makeDateFromStringAndFormat looks like this:
makeDateFromStringAndFormat()moment.js (line 758)
config = Object { _useUTC=true, _isUTC=true, _i=1362578461000, more...}
Any ideas as to what I can do to fix/get around this?
Thanks
Author of Backgrid here. There are 2 parts to your question:
Backgrid.js has only gained compatibility with moment.js 2.0.0 in 0.2.5 released yesterday.
The moment cell doesn't accept integers as input in the model because it tries to convert timezones and locales, so your model values have to be in a datetime string format that moment knows how to parse.