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.
Related
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.
I am using an old installation of 1.5.3 in a bootstrap-based system.
I am loading a page via ajax, that contains a fullcalendar instance - in weekly view.
This is only the case in Chrome - looks find in Firefox/Explorer.
Note: the ajax page that I bring in does NOT have <!DOCTYPE.... header tags - rather, its just plain INNER HTML code - along with the relevant css/js for fullcalendar
this is my basic code:
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
theme: true,
weekends: false,
weekendDays: [5,6],
header: {
left: '',
center: '',
right: ''
},
allDaySlot : false,
firstHour: 8,
minTime: 8,
maxTime: 23,
columnFormat: {week: 'ddd'},
editable: false,
events: [
.....
]
});
Chrome: example: https://i.stack.imgur.com/i6tei.png
Firefox example: https://i.stack.imgur.com/bM5Uy.jpg
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.
Am trying to change time format into 24H watch in full-calendar.
I tried to find it here but am unable to figure it out.
Here the code snippet:
jQuery('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
weekends: true,
timeFormat: 'H:mmtt{-H:mmtt }',
Please have look to snap and help me. Thanks...
You can use axisFormat: 'HH:mm' to accomplish this. Let me know if this helps.
Just to complement: in version 2.4.0 this method was renamed to slotLabelFormat.
I use FullCalender V4.2.0 this work for me:
slotLabelFormat: [
{
hour: '2-digit',
minute: '2-digit',
hour12:false
}
],