Like others I'm having problems getting timed events to show up on the agendaWeek view. If you look at the events below, the first two are mine and show up as all day events. The last one is from the documentation and shows up in the correct time block. I've been staring at this so long I'm sure I'm missing something simple. Can anyone else see it?
$(document).ready(function() {
$("#calendar").fullCalendar({
defaultView: 'agendaWeek',
month:0,//current year assumed, first day of month assumed
date: 4,
height: 650,
header: {left: 'title',center:'agendaWeek'},
events: [
{
title : 'Fred',
start : '2010-01-04 08:00:00',
end : '2010-01-04 09:00:00',
allday : false
},
{
title : 'Betty',
start : '2010-01-06 08:00:00',
allday : false
},
{
title : 'event3',
start : '2010-01-05 12:30:00',
allDay : false // will make the time show
}
]
});
});
</script>
I fixed my problem as follows: Where you have allday you need allDay with a capital D.
Cheers!
Related
I have downloaded and been experimenting with FullCalendar and it does almost everything I need for a resource scheduling app I am developing for my company's use. I just need to try and get it to display the events a bit differently and was hoping someone might be able to help.
I currently have it configured to display like this:
However, I am ultimately need it to display like this (side by side):
This is for a sequential process and it is important to convey the order of events and if one event (blue) extends into another day then the next day's event(s) (purple) have to wait until that one is done. This is not as clear in the top image as the bottom one.
Is this something that can be configured or will this require me to modify the source or intercept the event render and manipulate it there?
Thanks!
[EDIT] Added code snippets:
TEMPLATE:
<FullCalendar ref="fullCalendar"
default-view="resourceTimelineMonth"
:plugins="calendarPlugins"
:events="calEvents"
:resources="calResources"
:weekends="true"
:editable="true"
:event-overlap="false"
:slot-width="100"/>
SCRIPT:
data () {
return {
...
calendarPlugins: [ interactionPlugin, resourceTimelinePlugin ],
calEvents: [
{ resourceId: "101", title: 'WO123', start: '2019-11-01T07:00:00', end: '2019-11-01T12:00:00', backgroundColor: 'red' },
{ resourceId: "101", title: 'WO127', start: '2019-11-01T12:00:00', end: '2019-11-01T18:00:00', backgroundColor: 'green' },
{ resourceId: "101", title: 'WO144', start: '2019-11-01T18:00:00', end: '2019-11-02T03:00:00', backgroundColor: 'blue' },
{ resourceId: "101", title: 'WO145', start: '2019-11-02T03:00:00', end: '2019-11-02T10:00:00', backgroundColor: 'purple' }
],
calResources: [
{id: "101", title: "KM101"},
{id: "102", title: "KM102"},
{id: "103", title: "KM103"},
{id: "104", title: "KM104"},
{id: "105", title: "KM105"},
],
...
}
As I hinted at in the comments above, the reason you don't see what you're hoping for is because when you compress each slot to a single day, fullCalendar appears to switch to an "all-day" mode of display, where it ceases to take the specific times of day into account, and simply indicates the day(s) in which the event occurs.
The way to get a display the way (or close to the way) you want is to reduce the slot duration to half a day (which clearly creates the least division of the day you can do), and also modify the slot labels slightly to suit. Once the slot duration involves hours, fullCalendar will start taking the time component of the event into account again when it renders.
I don't know vue.js syntax and can't make a demo of it, so I've done the code and demo below in vanilla JS, but hopefully you can translate that into the syntax used by the vue plugin without any difficulty.
Options to add to your calendar config:
slotDuration: { hours: 12 },
slotLabelFormat: [
{ weekday: "short" },
{ hour: "2-digit", },
],
Live demo: https://codepen.io/ADyson82/pen/VwwXowr
See https://fullcalendar.io/docs/date-display for relevant documentation.
In the timeline view, time is displayed for 17 days or less, but
The time will be hidden when it is over 18 days.
views: {
//This is ok.
custom17days: {
type: 'timeline',
visibleRange: function(currentDate) {
return {
start: currentDate,
end: currentDate.clone().add(17, 'days')
};
}
},
//*** time display disappears! why?
custom18days: {
type: 'timeline',
visibleRange: function(currentDate) {
return {
start: currentDate,
end: currentDate.clone().add(18, 'days')
};
}
}
}
Here is the codepen: https://codepen.io/nextageot/pen/JVLXMo?editors=0010
Do you know how to always display time regardless of the number of days?
it will try to guess, but if you specify an explicit displayEventTime as true, it will always show the time.
i have a JSON string here:
[{"title":"Event","start":"2017-04-23T18:00:00","end":"2017-04-23T18:00:00"},{"title":"Event 2","start":"2017-04-23T11:15:00","end":"2017-04-23T11:15:00"},{"title":"Event 3","start":"2017-04-26T08:32:00","end":"2017-04-26T08:32:00"}]
how can I add those events in my calendar? (maybe using a loop?)
TRY THIS
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
]
});
I was trying to set start time using xdsoft dateTimePicker. I just want to see 00:00 time when I open picker at first time, but I've got a current time. As documentation says, all I have to do is set startTime : "my time", but I have no effect. Also example of startDate doesn't work.
My code:
<script type="text/javascript">
jQuery(
"#<c:out value="${requestItem.fieldNumber}"/>")
.datetimepicker(
{
lang : 'ru',
i18n : {
ru : {
months : [
'Январь',
'Февраль',
'Март',
'Апрель',
'Май',
'Июнь',
'Июль',
'Август',
'Сентябрь',
'Октябрь',
'Ноябрь',
'Декабрь', ],
dayOfWeek : [
"Вс",
"Пн",
"Вт",
"Ср",
"Чт",
"Пт",
"Сб", ]
}
},
startDate:'1987/12/03',
dayOfWeekStart : 1,
timepicker : true,
format : 'd.m.Y H:i'
});
</script>
jQuery('#datetimepicker2').datetimepicker({
datepicker:false,
format:'H:i',
defaultTime:'00:00'
});
I'm using Fullcalendar integrated with jQuery Mobile. When I tried to add new events dynamically using following method during pageshow event it causes a JavaScript exeption as below
Uncaught TypeError: Cannot call method 'empty' of undefined
My JavaScript Code
$('#myCalendar').live('pageshow',function(event){
Newevents = [
{
title : 'event1',
start : '2012-11-24 01:00',
color:'red'
},
{
title : 'event2',
start : '2012-11-25',
end : '2012-11-27'
},
{
title : 'event3',
start : '2012-11-28 12:30:00',
allDay : false // will make the time show
},
{
title : 'event4',
start : '2012-11-29 01:30:00',
allDay : false // will make the time show
}
];
$('#calendar').fullCalendar('renderEvent',Newevents);
$('#calendar').fullCalendar('rerenderEvents');
});
$('#myCalendar').live('pagecreate',function(event){
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: '',
center: '',
right: ''
},
firstDay :1,
viewDisplay: function(view) {
$('#calendarLabel').html(view.title);
},
events:[
{
title : 'event1',
start : '2012-11-21 01:00',
end:'2012-11-24 02:00',
color:'red'
},
{
title : 'event2',
start : '2012-11-05',
end : '2012-11-07'
},
{
title : 'event3',
start : '2012-11-09 12:30:00',
allDay : false // will make the time show
},
{
title : 'event4',
start : '2012-11-09 01:30:00',
allDay : false // will make the time show
}
],
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
},
dayClick: myDayClick,
height: 999999999
});
});
Rather than
.fullcalendar( 'renderEvent', []);
and
.fullCalendar( 'rerenderEvents');
Have you tried ... ?
.fullCalendar( 'addEventSource', NewEvents );