I am using full calendar scheduler.. and the setting
dayOfMonthFormat: 'ddd - MMM DD',
to give columns like Mon - Nov 28
I also have weekNumbers: true set
this works great for views with slots, i.e. a minTime, maxTime, a slotDuration i.e. 3 hours.
I get a display like this
--
However, if I have a view where the slotDuration is 24 hours, I can have the weekNumbers but the Date Formatting is ignored / wrong.
i.e.
--
I can force the date to the correct format by putting slotLabelFormat: 'ddd - MMM DD', in my view.. but this means I get no weekNumbers
--
Does anyone know of a solution where both my custom date / column format will work, but that I will also get my weekNumbers, with 24 hour slots?
FullCalendar support suggest this, which worked out in my case.
slotLabelFormat: [
'[Week] W',
'ddd - MMM DD'
]
Update: 11/03/2022
for FullCalendar v5 I am using:
slotLabelFormat: [
function(date) { return moment(date.date).format('[Week] W') },
function(date) { return moment(date.date).format('ddd - MMM DD') }
],
Related
I am trying to configure FullCalendar 4.3.1 in Timeline view to display date in UK format in the title and on column headers. I use slotLabelFormat and titleFormat as below:
slotLabelFormat: [
{ day: 'numeric', weekday: 'short', month: 'short'},
{ hour: 'numeric' }
],
titleFormat: {day: 'numeric', month: 'long', year: 'numeric'}
This works, however, it does not choose the order of items so I end up with Mon Dec 31 instead of Mon 31 Dec. Is there a way to set the order or default date format (based on location)? I can't find it in the docs.
Adding the below to calendar parameters resolved it. Thanks all.
locale: 'en-gb'
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 need to create a view of all months in a year in fullcalendar.
I've found this nice example that work except DECEMBER not appear.
https://codepen.io/webrexRavi/pen/yqMqGX
I don't understand what's wrong in the code:
views: {
timelineCustom: {
type: 'timeline',
buttonText: 'Year',
dateIncrement: { years: 1 },
slotDuration: { months: 1 },
visibleRange: function (currentDate) {
return {
start: currentDate.clone().startOf('year'),
end: currentDate.clone().endOf("year")
};
}
}
}
Well just asumed the currentDate counts with months starting from zero and visible range expects a value between 1-12 for months, currentDate.clone().endOf("year") would then display until november ( december is the 11th month when counting from zero).
If you cange it to
currentDate.clone().endOf("year") +1;
it displays december too.
Edit:
The fullcalendar documentation says following about visibleRange:
The visibleRange object must have start/end properties that resolve to Moment values. The end moment is exclusive, just like all other places in the API.
So if you want the range to include the last day, you have to add one day.
currentDate.clone().endOf("year").add(1,'day');
I am using the FullCalendar scheduler and wish to have my calendar set to Agenda Day view, with the option of selecting Week or Month. However, my concern is that the actual day of the week does not show in the default view, only the date as follows:
January 15th, 2018
I really want to have something like:
Monday, January 15th
I don't really even need the year.
The days do appear in week and month view no problem, but I cannot find a setting that allows the day to appear for the day view, which will be extremely useful when users are wanting to skip to 'next Friday' for example without having to consult another view to find out the actual date.
Any ideas?
This is controlled by the "titleFormat" option. You can combine this with view-specific options to change the title only for "day" views:
views: {
day: {
titleFormat: 'dddd, MMMM Do YYYY'
}
},
See http://jsfiddle.net/sbxpv25p/105/ for a working demo.
See also
1) https://fullcalendar.io/docs/text/titleFormat/ (title format option)
2) https://fullcalendar.io/docs/views/View-Specific-Options/ (view specific options)
3) https://fullcalendar.io/docs/utilities/date_formatting_string/ and http://momentjs.com/docs/#/displaying/format/ (characters which can be used to format the date)
With Fullcalendar v5 the syntax changed a little. The format is defined by the local. Weekdays are added by an additional attribute and date formatting:
locale: 'en',
views: {
day: {
titleFormat: {
year: 'numeric', month: 'long', day: 'numeric', weekday: 'short'
},
},
},
See
https://fullcalendar.io/docs/v5/locale
https://fullcalendar.io/docs/v5/titleFormat
https://fullcalendar.io/docs/v5/date-formatting
I am using FullCalendar and when I set the calendar view to Week View and try to create an event with a duration greater than 1 day, the event's start time label is changed to 0:00 and won't update. I have tried to increase the maxTime to more than 24 hours as follows (Which did not help):
fcViews.agenda = {
'class': AgendaView,
defaults: {
allDaySlot: true,
allDayText: 'all-day',
slotDuration: '00:30:00',
minTime: '00:00:00',
maxTime: '48:00:00',
slotEventOverlap: true // a bad name. confused with overlap/constraint system
}
};
I tried to do the same on the calendar at FullCalendar's official webpage and it has the same behavior. Could anyone help please?
Namaste #Arvindji
Calendar timeline should not be greater than 1 day. You should restrict max time to 24:00:00
maxTime: '24:00:00',
Because if you set maxTime: '48:00:00', then fullcalendar will show 48 hours in one day as a result each day column in fullcalendar will have 48 hours. Here there is a loophole in timeline. But the event will not show properly.
So try to bind 24 hours as max time and see result, calendar will break events sharing two days into two parts for both days separately.