Edit to add: Sorry, found the answer here:
http://arshaw.com/fullcalendar/docs/text/timeFormat
timeFormat: {
month: 'H:mm',
'': 'H:mm-{H:mm}'
},
end of edit
I'm using fullcalendar, and I want to include the ending time in the "week" and "day" views. I found an answer by Nico on how to display the ending time:
timeFormat: 'HH:mm { - HH:mm}'
Nico wrote:
Blockquote the time between {} is the end time. If you don't specify the ending time between curly brackets it will just display the start time twice
How could I only show the end time in views other than the full month view? I would like the regular week view to have start and end time. (In month view, it just takes too much space.)
Sorry, found the answer here:
http://arshaw.com/fullcalendar/docs/text/timeFormat
timeFormat: {
month: 'H:mm',
'': 'H:mm-{H:mm}'
},
UPDATE
The above answer no longer works in the newest version of FullCalendar. The correct answer is the use the displayEventEnd option for the view. Like this:
views: {
week: {
displayEventEnd: true
}
}
Related
I've tried and just can't seem to get it to work.
Fwiw, everything else in fullCalendar I've succeeded with.
I'm trying to get valid Range to give me a range of the current month and the next month. Their docs mention:
validRange: function(nowDate) {
return {
start: nowDate,
end: nowDate.clone().add(2, 'months')
};
},
I've also tried adding javascript code before the document.addEventListener('DOMContentLoaded', function() { line, to no avail.
Can you help?
Edit: I am not using jQuery
My Calendar has a specific view : it shows 31 days (display 4 days before the current day, and 27 days after)
Therefore, I have a dynamic visibleRange for my view
let INIT = moment().subtract(4, 'days').format('YYYY-MM-DD');
let INIT_END = moment(INIT).add(31,'days').format('YYYY-MM-DD');
[...]
type: 'resourceTimeline',
visibleRange: {
start: INIT,
end: moment(INIT).add(31,'days').format('YYYY-MM-DD')
},
buttonText: '31 jours'
}
and previous/next don't seem to work when visibleRange is defined for a custom view.
I tried something involving jQuery and it mostly works, except you have to click first twice on prev/next to change the visibleRange (and you also have to click twice when you go from next to previous or vice-versa).
And I wanted for this :
calendar.setOption('visibleRange', {
start: INIT,
end: INIT_END
})
to work, but in my implementation, it only works once and when it's triggered, clicking on buttons doesn't work anymore.
You can find the code on this CodePen
Can you help me ?
Okay so a colleague of a colleague led me to the solution, thanks a lot to him.
Instead of using visibleRange and trying to manipulate FullCalendar's data with jQuery (very gross), I calculate the difference between my two moments in order to have a duration :
const INIT = moment().subtract(4, 'days');
const INIT_END = moment(INIT).add(31,'days');
let duration = INIT_END.diff(INIT, 'days')
Then I use this duration in the settings of my customView :
resourceTimelineRollingMonth: {
type: 'resourceTimeline',
duration: { days: duration },
buttonText: '31 jours'
}
and for my view to start 4 days before the current day, in the Calendar object, I set :
[...]
defaultDate: INIT.format('YYYY-MM-DD'),
[...]
Which now works flawlessly.
Working with fullcalendar on month view, i need to allow user to create max 1 event per day. If he/she try to add more, error will be show.
I'm aweare there is eventOverlap and eventLimit, i try to use both but none seems to work:
I set:
eventOverlap:false
and even try:
eventLimit: true,
views: { month: { eventLimit: 1 } },
Just to be clear, the view i'm talking about is:
Found it!
In a month view with select: true you should use:
selectOverlap and set it to false.
I'm using Fullcalendar 2.3.1. I'm trying to convert the time (for example 13:00-14:00) in the month view into 12hr format. Here is my current timeFormat option value:
timeFormat: 'h(:mm)t'
and some example event json:
{
id: "40163152543",
original_id: "3231",
title: "Conference Call",
description: "",
start: "2015-11-20T13:00:00",
end: "2015-11-20T14:00:00",
allDay: false,
color: ""
}
In Week and Day views I am seeing 1p-2p, which is what I want, but in month view I am still seeing 13:00-14:00. Same issue in v 2.6.0! Is this a bug??
It should work. I tried it locally and works fine as per your configuration.
But still you face same issue then try by giving view specific option. May this will solve.
So in the extension library I'm using there was an eventRender callback that I was missing that was overriding the timeFormat option. This is the working override if curious:
eventRender:
function(event, element, view)
{
if(event.end !== null && view.name == 'month')
{
timeformat = event.start.format('h(:mm)t') + ' - ' + event.end.format('h(:mm)t');
element.find('.fc-time').html(timeformat);
}
}
If you have this issue, lookout for an eventRender callback! More documentation on it here: http://fullcalendar.io/docs/event_rendering/eventRender/
Very useful callback, also cool way to do view-specific options, especially with the default view, and #ChintanMirani answer was great too!
I have the following textfield in my gsp page that does not work as expected:
<g:textField name="startTime"
value="${formatDate(date: occurrenceStart ? new Instant(occurrenceStart).toDate() : eventInstance?.startTime, format: 'dd/MM/yyyy hh:mm a')}"
class="datetime" />
I'm using the source code found here, but each time I select a date and time, the date is shown as MM/dd/yyyy. Where is the place in which I need to change the format?
EDIT:
Usually I use Mozilla Firefox to test my project. If I use Google Chrome browser, I have the following formatting date(choosing the 12th of January 2014, 5:00 AM) after the change suggested in Adavis answer:
12/January/20142014 hh:01 a 05:00 am
If I remove the code added, I have the same behaviour described above, with formatting MM/dd/yyyy
In this file: https://github.com/craigburke/google-calendar-grails/blob/master/web-app/js/calendar.js, line 60, in setupDatePickers(), you need to add your date format to the default options of datetimepicker. See below...
function setupDatePickers() {
$("input.datetime").datetimepicker({
ampm: true,
stepMinute: 15,
dateFormat: 'dd/MM/yyyy hh:mm a'
});
}
Solved with the following code:
function setupDatePickers() {
$.datepicker.setDefaults({
dateFormat: 'dd/mm/yy'
});
$("input.datetime").datetimepicker({
ampm: true,
stepMinute: 15
});
}