Here is my fullcalendar config:
defaultView="resourceTimeGridDay"
and the resources
resources={[
{
id: 'a',
title: 'Resource A',
businessHours: {
startTime: '10:00',
endTime: '18:00'
}
},
{
id: 'b',
title: 'Resource B',
businessHours: {
startTime: '11:00',
endTime: '17:00'
}
}
]}
By default weekends are marked as non-business - grey background.
How can I add businessHours for Saturday and Sunday
daysOfWeek:[0,1,2,3,4,5,6]
in the business hours fix the issue.
businessHours: [
{
daysOfWeek: [0,1,2,3,4,5,6], // enable all days
startTime: '08:00',
endTime: '18:00'
},
Related
It happened something strange to me. On my work computer doesn't work fullcalendar v5 on internet explorer e11 but in my personal computer it works and it has a low version than my work computer. any idea about this?
For example I can't see any example from the web page https://fullcalendar.io/
Or this code
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
initialDate: '2020-06-07',
allDaySlot:false,
locale:'es',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay'
},
events: [
{
title: 'All Day Event',
start: '2020-06-01'
},
{
title: 'Long Event',
start: '2020-06-07',
end: '2020-06-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-06-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-06-16T16:00:00'
},
{
title: 'Conference',
start: '2020-06-11',
end: '2020-06-13'
},
{
title: 'Meeting',
start: '2020-06-12T10:30:00',
end: '2020-06-12T12:30:00'
},
{
title: 'Lunch',
start: '2020-06-12T12:00:00'
},
{
title: 'Meeting',
start: '2020-06-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2020-06-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2020-06-28'
}
],
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
omitZeroMinute: false,
meridiem: false
},
});
calendar.render();
});
Have the same problem. IE console indicates that it doesn't understand ()=>{} combination. And so to make it compatible all => should be replaced with function
Im trying to create events with a range of time, but when i go to day or week view they show really weird. I have read a lot of questions but I couldnt fix it. I tried with allDay set to false, but the problem is not there.
I did download the library again. I also did disable all the css (except bootstrap), but the problem is still there.
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
aspectRatio: 2,
plugins: [ 'dayGrid', 'interaction', 'timeGrid' ],
allDayDefault: false,
editable: true,
eventLimit: true,
selectable: true,
selectHelper: true,
locale: 'es',
header: {
left: "prev,next",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
},
events:[
{
title: 'All Day Event',
start: '2019-08-01',
},
{
title: 'Long Event',
start: '2019-08-07',
end: '2019-08-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-08-09T16:00:00'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-08-16T16:00:00'
},
{
title: 'Conference',
start: '2019-08-11',
end: '2019-08-13'
},
{
title: 'Meeting',
start: '2019-08-12T10:30:00',
end: '2019-08-12T12:30:00'
},
{
title: 'Lunch',
start: '2019-08-12T12:00:00'
},
{
title: 'Meeting',
start: '2019-08-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2019-08-12T17:30:00'
},
{
title: 'Dinner',
start: '2019-08-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2019-08-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2019-08-28'
}
]});
calendar.render();
calendar.updateSize();
https://imgur.com/dfQncpa
screen
I want this look when I switch to viewing the "agenda one day".
What i'm need to configure in the configuration for this view.
UPD: version 3.9
UPD2:
sandbox there
this config file (short version):
const config = {
header: false,
schedulerLicenseKey: "GPL-My-Project-Is-Open-Source",
defaultView: "agendaOneDay",
slotDuration: "00:15:00",
columnFormat: "ddd, DD MMM",
editable: false,
selectable: true,
groupByResource: true,
views: {
agendaOneDay: {
type: "agenda",
duration: { days: 1 },
buttonText: "1"
},
agendaThreeDay: {
type: "agenda",
duration: { days: 3 },
buttonText: "3"
}
},
resources: [
{ id: 5128, title: "Test title 1", eventColor: "#5eb15e" }
],
events: [
{
start: "2018-09-24T09:00:00.000Z",
end: "2018-09-24T09:30:00.000Z",
resourceId: 5128,
title: "test 1",
event: {},
color: "",
textColor: "#191919"
},
{
start: "2018-09-26T09:00:00.000Z",
end: "2018-09-26T09:30:00.000Z",
resourceId: 5128,
title: "test 1",
event: {},
color: "",
textColor: "#191919"
}
]
};
I want to close a range of hours cells so that the user can't book on that specific hour, i've created a modal windows that allows the admin to set his own working hours every day all the week.
Update:
I've found a solution, i have to add this little magic to my fullcalendar
businessHours where it can take any list of hours, but the problem is how to disable the event click on the non-business hour ?
here is my new code:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth',
},
defaultView: 'agendaWeek',
businessHours:
[
{
dow: [0], // Sunday
start: '08:00',
end: '13:00'
},
{
dow: [1], // Monday
start: '09:00',
end: '12:00'
}, {
dow: [2], // Tuseday
start: '13:00',
end: '15:00'
}, {
dow: [3], // Wedensday
start: '15:00',
end: '17:00'
}, {
dow: [4], // Thursday
start: '12:00',
end: '19:00'
}, {
dow: [5], // Friday
start: '10:00',
end: '15:00'
}, {
dow: [6], // Saturday
start: '11:00',
end: '20:00'
}
],
select: function(mydate, start, end, event, jsEvent, allDay, businessHours, view, element) {
var DaysOK = [1,2,3,4,5,6,7];
var mydateObj = new Date(mydate);
var chosenDay = mydateObj.getUTCDay();
if( // Clicked event hour in business hours ){
alert('You can book!);
} else {
alert('You can\'nt book');
}
}
And why console.log(businessHours) inside console gives undefined ??
Please any help or suggestions would be tons appreciated .
I am trying to use business hour option, but I can't able to reflect the changes.
I want to display multiple business hours. Here is the code:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-11-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
businessHours:
[
{
start: '10:00', // a start time (10am in this example)
end: '12:00', // an end time (12pm in this example)
dow: [1, 2, 3, 4]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
},
{
start: '12:00', // a start time (12pm in this example)
end: '18:00', // an end time (6pm in this example)
dow: [1, 2, 3, 4]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
}]
});
like so
businessHours:
{
start: '11:00',
end: '12:00',
dow: [ 1, 2, 3, 4, 5]
},
in order to use different hours for different shifts -> use background events
events:
[
{
id: 'available_hours',
start: '2015-1-13T8:00:00',
end: '2015-1-13T19:00:00',
rendering: 'background'
},
{
id: 'work',
start: '2015-1-13T10:00:00',
end: '2015-1-13T16:00:00',
constraint: 'available_hours'
}
]
For more information, see this link,
http://fullcalendar.io/docs/event_ui/eventConstraint/
There's several different ways you can approach this, depending on how you use the calendar. Hopefully the flexibility of the constraints will help you get what you need done.
Pretty glad this feature finally showed up!
I have to show FullCaledar Time Slot for 8AM to 8PM fixed, so I have did some R&D, and apply following options, and it seems working fine!!! Cheers.
jq('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'today,month,agendaWeek,resourceDay'
},
defaultView: 'resourceDay',
allDaySlot: false,
axisFormat: 'h:mm A',
timeFormat: 'h:mm T',
minTime: '08:00:00',
maxTime: '20:00:00',
Use,
minTime: '08:00:00',
maxTime: '20:00:00'
Thanks!!!
on the other hand, you can define working hours and days.
businessHours: [{
daysOfWeek: [1, 2, 3, 6, 7],
startTime: '08:00',
endTime: '23:00'
},
{
daysOfWeek: [4],
startTime: '08:00',
endTime: '16:00'
},
{
daysOfWeek: [5],
startTime: '15:00',
endTime: '23:00'
}
]
hope it helps.
In version 4 :
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [ 1, 2, 3, 4 ], // Monday - Thursday
startTime: '10:00', // a start time (10am in this example)
endTime: '18:00', // an end time (6pm in this example)
}
You may also break your business hour declaration into parts, in an array of objects, for additional control:
businessHours: [ // specify an array instead
{
daysOfWeek: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
startTime: '08:00', // 8am
endTime: '18:00' // 6pm
},
{
daysOfWeek: [ 4, 5 ], // Thursday, Friday
startTime: '10:00', // 10am
endTime: '16:00' // 4pm
}
]
In version 3 :
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [ 1, 2, 3, 4 ], // Monday - Thursday
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
}
You may also break your business hour declaration into parts for additional control (added in v2.9.1):
businessHours: [ // specify an array instead
{
dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
start: '08:00', // 8am
end: '18:00' // 6pm
},
{
dow: [ 4, 5 ], // Thursday, Friday
start: '10:00', // 10am
end: '16:00' // 4pm
}
]