I want to create background events in full calendar V3 that only show the parts that intersect, in agendaWeek view
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
allDaySlot: false,
slotDuration: '00:15:00',
scrollTime: bStart,
minTime: '06:00:00',
maxTime: '18:00:00',
slotLabelInterval: '01:00',
defaultDate: moment().format(),
eventLimit: false,
navLinks: true,
dragScroll: false,
header: {
left: '',
center: 'title',
right: 'prev,next today',
},
views: {
week: { // name of view
titleFormat: 'LL',
columnHeaderFormat: 'Do MMM, dddd'
// other view-specific options here
}
},
//example with 2 events there can be more
events: [
{
start: "2019-04-18 08:00",
end: "2019-04-18 11:00",
color: 'red',
rendering: 'background',
},
{
start: "2019-04-18 09:00",
end: "2019-04-18 10:00",
color: 'red',
rendering: 'background',
},
]
//.......
});
What I get is the 9 to 10 slots are a dark red while the 8 to 11 slots are light.
I just want the intersection of the events to be visible on the calendar i.e. 9 to 10
I will be passing a large set of events, we can take an example of e1 - 9 to 10 am on 2019-04-18, e2 - 9:30 to 10:30 am on 2019-04-18 (and so on..), I wanted a way to find the intersection of the events i.e. 9:30 to 10 am, should be displayed on the calendar.
Related
I have this in callendar but I want to know how to make the second activity in the same hour overlap. I tried overlap: false and eventOverlap: false but none of them work.
This is the code I have
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaFourDay'
},
editable: true,
droppable: true,
defaultView: "agendaWeek",
firstDay: 1,
allDaySlot: false,
minTime: "08:00",
maxTime: "24:00",
timeFormat: 'H:mm',
eventOverlap: true,
slotLabelFormat: 'H:mm',
slotEventOverlap: true,
events: [
//event data
],
});
});
eventOverlap should work when dragging or resizing - but you are using false, which will not allow events to overlap. You say you want to allow them to overlap, so you should be using true.
You can use slotEventOverlap for initial rendering of agenda events - again, use true, not false, to allow them to overlap.
if i try to add the event entry for after 10pm, its replicates in another day also.
ex: Adding entry for 2015-08-10T22:15:00(Monday), it replicates in another day(Tuesday) at 12am also.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek'
},
defaultView: 'agendaWeek',
defaultDate: '2015-08-10',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-08-10T21:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-08-10T23:15:00'
}
]
});
});
I cant edit it. But the reason is that the event is showing the correct duration and hence stretching beyond 12 am on Tuesday. For example if the event is for 2 hours duration and you set the start time as 22:15 pm on Monday, the end time would be 00:15 on Tuesday (which is 12:15 am on Tuesday). I can't edit a thing but can drag and reschedule it for Monday.
I have moved it to start at 10:45 and end at 11:45 and its not duplicating over to Tuesday
I want to ensure the events displayed in the 'month view' is accordance to the event start and end date. However, I notice due to the default business hours set in fullCalendar (9am to 5pm), I am having problem to display the events in the 'month view'
Problem :
For example, given two events (Non all day event) as configured below:
Event A >>
Start Date : 7 March | Start Time : 2pm
End Date : 9 March | End Time : 09:30am
Event B >>
Start Date : 7 March | Start Time : 2pm
End Date : 9 March | End Time : 08:30am
In the 'month view' for March
Event A is displayed across 7, 8 and 9 March while
Event B is only displayed across 7 and 8 March
Question:
How can i set the business hours in full calendar from 0000 to 2359 so that I can override the default business hours from 0900 to 1700
I have tried the method as suggested in the fullCalendar documentation
http://fullcalendar.io/docs/display/businessHours/
$(#calendarId).fullCalendar(
{
theme: true,
header:
{
left: 'prev,today,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
eventColor: '#3485c1',
height: 800,
aspectRatio: 0.5,
editable: true,
selectable: true,
events: arrayOfEventObj,
eventLimit: true,
timeFormat: '',
businessHours:
{
start: '00:00',
end: '23:59',
dow: [ 1, 2, 3, 4, 5, 6, 7 ]
}
}
However, I am still unable to emphasized the new businessHours. Is there a property that I need to set true in order to emphasized the new businessHours?
Or am I totally doing it wrongly ?
Please advice. Thank you
Business Hours shouldn't effect the month view and by default are off. You can leave the setting out or set it to false like this businessHours: false
For your agenda views that do show time, you can effect what's shown by setting minTime and maxTime.
I think it's a bug, i try with last version and doesn't work, i try with this js and work
http://eo14.com/static/fullcalendar/fullcalendar.js
a work example here
http://eo14.com/static/fullcalendar/
Personally i try with this code and work:
<script>
var calendar="";
var _eventi="";
_eventi = [{events: <?PHP echo json_encode($orariServizio); ?>}];
$(document).ready(function() {
calendar = $('#calendar').fullCalendar({
//eventSources: _eventi,
defaultDate: "2015-06-01",
lang:"it",
//defaultTimedEventDuration: '04:00:00',
height: 500,
allDaySlot:false,
header: {
left:'',
//center:'',
right:'',
//left: 'prev,next today',
center: 'title',
//right: 'month,basicWeek,basicDay'
}, // buttons for switching between views
//weekmode:"liquid",
editable: true,
selectable: true,
selectHelper: true,
//eventLimit: true,
selectConstraint: 'businessHours',
eventConstraint: 'businessHours',
views: {
settimana:{
type:'agendaWeek',
duration: { days: 7 },
titleFormat: ' ', //YYYY
//buttonText: '7 day',
columnFormat: 'dddd',
//hiddenDays: [0, 6] // Hide Sunday and Saturday?
}
},
defaultView: 'settimana',
businessHours:[
{
start: '09:00',
end: '13:00',
dow: [1, 2]
},
{
start: '14:00',
end: '16:00',
dow: [1, 2]
},
{
start: '10:00',
end: '19:00',
dow: [4]
},
{
start: '06:00',
end: '10:30',
dow: [6]
},
{
start: '13:00',
end: '17:00',
dow: [6]
},
{
start: '20:00',
end: '23:00',
dow: [6]
}
]
});
});
I've problems with the allDay option in the fullcalendar (v2.2.3). When I use the view "month", I can see all my allDay events. But when I switch to the agendaWeek view, they are missing.
My calendar week begins on Tuesday (firstDay: 2). Sunday and Monday are hidden (hiddenDays: [0, 1]). When an event starts at Tuesday and allDay is set to true, the event is missing on the agendaWeek view.
$("#calendar").fullCalendar(
header:
left: "month,agendaWeek,agendaDay"
center: 'title'
right: "today prev,next"
minTime: '07:00:00'
maxTime: '20:30:00'
defaultView: "agendaWeek"
timezone: 'Bern'
lang: 'de'
allDaySlot: true
firstDay: 3
hiddenDays: [0, 1]
weekNumbers: true
editable: false
slotDuration: '00:30:00'
snapDuration: '00:15:00'
slotEventOverlap: true
axisFormat: 'HH:mm'
selectable: true
selectHelper: true
events: (start, end, timezone, callback) ->
$.ajax
url: $('#calendar').data('url')
dataType: "json"
type: 'GET'
success: (data) ->
events = []
$.each data, (index, element) ->
events.push
id: element.id
title: element.title
start: element.start
end: element.end
color: '#' + element.color
allDay: element.allDay
callback events
And my json file looks like:
[{"id":100,"start":"2014-12-16T00:00:00.000+01:00","end":"2014-12-17T23:59:59.999+01:00","title":"Here is a title","color":"8884a2","allDay":true},{"id":101,"start":"2014-12-17T00:00:00.000+01:00","end":"2014-12-18T23:59:59.999+01:00","title":"Here is a title","color":"8884a2","allDay":true}]
All other events (not allDay events) are correctly listed in the calendar.
My fullcalendar event 'Big Party' starts at monday 10am and ends at wednesday 6am.
So the event should span 3 days in the month view.
The duration is 44 hours (problem because it is less than 48 hours???).
title: 'Big Party',
start: '2014-09-15T10:00',
end: '2014-09-17T06:00'
The event goes from monday to tuesday in the month view. But why ends the event not at wednesday?
This fiddle shows the problem: http://jsfiddle.net/3E8nk/439/
Thank you
Tobi
You need to change the nextDayThreshold: '09:00:00', // 9am option
See http://jsfiddle.net/3E8nk/440/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-09-15',
editable: true,
nextDayThreshold: '00:00:00', // 9am
events: [
{
title: 'Birthday Party',
start: '2014-09-15T10:00:00',
end: '2014-09-17T06:00:00'
}
]
});