How to implement custom holidays in full calendar - fullcalendar

I've implemented fullcalendar api to show all business/working days of the company.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
allDaySlot:false,
events: evtObj, //evtObj contains list of working days in JSON
editable: false,
height: 630
});
For example : From 1st June 2015 to 31st Oct 2015. Now I've a business holiday list, say : 25th June, 31st August......
Now how can I remove these dates from being shown. As event object contains only start date and end date as parameters
{
title: event name,
start: start time,
end : end time
}

You can't do that in fullcalendar. However there is some kind of workaround.
You can add background events for those dates with the same CSS class as the business hours.
Let's assume you have these dates:
var start = new Date(2015, 5, 1), //1st of June 0:00
end = new Date(2015, 5, 2); //2nd of June 0:00
Now create 2 events for 1 particular day, 1 event for the allDay slot & 1 event for the rest of the day.
The events look like this:
{
start: moment(start),
end: moment(end),
rendering: 'background',
className: 'fc-nonbusiness'
},
{
start: moment(start),
allDay: true,
rendering: 'background',
className: 'fc-nonbusiness'
}

Related

FullCalendar customize week display

Now my callendar week is like this: Friday dd/mm. I'd like to know if there is a way to hide the day/month number and only shows the name of the day.
Couldn't find anything Here
My code so far:
<script type="text/javascript">
$(document).ready(function(){
//Page is now ready, initialize calenda.
$('#calendario').fullCalendar({
header: {
center: 'title',
left: '',
right: ''
},
defaultView: 'agendaWeek',
firstDay: 1,
weekends: false,
events: [
{
title: 'Event1',
start: '2016-03-14',
end:'2016-03-14T04:00'
}
],
})
});
</script>
And this is what I'd like to change
You need to set the week view columnFormat
Paste the code below under the line where you set the default view " defaultView: 'agendaWeek', "
views: {
week: {
columnFormat: 'ddd'
}
},
The ddd shows Sat, Sun etc if you change it to dddd it will show Saturday , Sunday etc.
But of course you can set it to what ever you like it to show.

fullcalendar adding event entry after 10 pm shows in same day and also replicates in next day

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

How to set the business hours for fullCalender v2.2.5

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]
}
]
});
});

Events spanning multiple days are not displayed correctly in fullcalendar

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'
}
]
});

How to show only opening hours in fullCalendar?

I'm using jQuery fullCalendar. A client wants to see only their bussiness opening hours in the calendar. Is that possible? How?
Example: a bussiness opens from 9am to 1pm and from 3pm to 10pm
The minTime and maxTime options will let you set the first and last hour. I don't think you can have a calendar with a break in the middel though.
Maybe you could create a recurring event called lunch and color it differently to your actual events
On current fullcallendar version (5.x), maxTime and minTime options where renamed to slotMaxTime and slotMinTime.
To hide most business time - i.e., night and/or non-working days:
Calculate some values right from your businessHours specification
const workSpec = [
{
daysOfWeek: [1, 2, 3, 4],
startTime: '08:00',
endTime: '18:00'
}
{
daysOfWeek: [5],
startTime: '09:00',
endTime: '14:00'
}
]
/*
* calculate the following:
* - minimum "opening time"
* - maximum "opening time"
* - working days
* - non-working days
*/
const workMin = workSpec.map(item => item.startTime).sort().shift()
const workMax = workSpec.map(item => item.endTime).sort().pop()
const workDays = [...new Set(workSpec.flatMap(item => item.daysOfWeek))]
const hideDays = [...Array(7).keys()].filter(day => !workDays.includes(day))
Use calculated values on the related properties - i.e. for #fullcalendar/react:
<FullCalendar
//...
businessHours={workSpec}
slotMinTime={workMin}
slotMaxTime={workMax}
hiddenDays={hideDays}
//...
/>
Disclaimer: this was a quick-n-dirty go. There may be refactors to improve performance
there has been an update on fullcalendar that allows you to apply business hours
http://fullcalendar.io/docs/display/businessHours/
however, i don't think it ll allow you to impement a break within the day..
over here
Apply different timeslots and ranges for each day on Fullcalendar
you ll find my approach on a similar issue that i used Javascript to prevent selection of specific period and also with css i highlighted the areas that i didn't want to be able to be selected..
To completely hide the desired row (NON business/break hour) you have to modify the following method inside fullcalendar.js:
// Generates the HTML for the horizontal "slats" that run width-wise. Has a time axis on a side. Depends on RTL.
renderSlatRowHtml: function() {...}
and then avoid entering the while clause that adds the html code:
while (slotTime < this.maxTime) {...}
you can add an if clause up inside that while, or even more work out to enter a config param to check inside that while iteration.
hiding the break period is still not possibleas far as i know,
but version 2 has now to peoperties minTime and maxTime which you can use to hide non-business hours.
Documentation here: http://fullcalendar.io/docs/agenda/minTime/
Use selectConstraint and eventConstraint options to prevent click event in non business hours (from full calendar 2.2version). in my case i used selectConstraint: "businessHours" https://fullcalendar.io/docs/selection/selectConstraint/ https://fullcalendar.io/docs/event_ui/eventConstraint/
For anyone trying this.
This one is to remove the non business
<style>
.fc .fc-non-business {
background: var(--fc-non-business-color);
display: none;
}
</style>
This one is for the business hours to remove those time that you want to disable
selectConstraint: 'businessHours',
businessHours: {
daysOfWeek: [ 1, 2, 3, 4,5,6], // Monday - Thursday
startTime: '07:00', // a start time (10am in this example)
endTime: '20:00', // an end time (6pm in this example)
}
Use Content height to adjust the calendar height
contentHeight: 680,
This is the whole configuration for the calendar
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
hiddenDays: [0],
allDaySlot: false,
selectOverlap:false,
selectable: true,
selectConstraint: 'businessHours',
businessHours: {
daysOfWeek: [ 1, 2, 3, 4,5,6], // Monday - Thursday
startTime: '07:00', // a start time (10am in this example)
endTime: '20:00', // an end time (6pm in this example)
},
select: function(data) {
var start = formatDateToTime(data.start);
var end = formatDateToTime(data.end);
var date = data.startStr.substring(0, 10);
var uid = "add";
$.ajax({
type: "POST",
url: "{{ url('event/getModal')}}",
data: {
uid: uid,
start: start,
end: end,
date: date
},
success: function(response) {
$("#modal-view").modal('toggle');
$("#modal-view").find(".modal-title").text("Add Event");
$("#modal-view").find("#modal-display").html(response);
}
});
},
headerToolbar:{
start: '', // will normally be on the left. if RTL, will be on the right
center: '',
end: '' // will normally be on the right. if RTL, will be on the left
},
dayHeaderFormat:{ weekday: 'long' },
editable: true,
events: <?php echo $Events?>,
contentHeight: 680,
eventClick: function(calEvent, jsEvent, view) {
console.log(calEvent);
},
viewDidMount: function(event, element) {
$('td[data-time]').each(function() {
var time = $(this).attr("data-time");
if(time < "07:00:00"){
$(this).parent().remove();
}
if(time > "19:30:00"){
$(this).parent().remove();
}
console.log($(this).parent());
});
},
eventDidMount: function(event, element) {
// To append if is assessment
if(event.event.extendedProps.description != '' && typeof event.event.extendedProps.description !== "undefined")
{
$(event.el).find(".fc-event-title").append("<br/><b>"+event.event.extendedProps.description+"</b>");
$(event.el).find(".fc-event-title").append("<br/><b>"+event.event.extendedProps.prof+"</b>");
}
}
});
calendar.render();
Sample Output
Check this

Resources