I have implemented full calendar to maintain some events. Now the fullcalendar is implemented with some default business hours. Lets say I have set business hours from 10:00 to 17:00 hours.
Now I am creating the event from 15:30 to 16:30 hours. Now I when I resize the event and stretch it and end it to 17:30, which is out of the business hours, I want it to revert the changes.
Following is how I have initialised the fullcalendar:
$('#calendar').fullCalendar({
header: {
left: '',
center: '',
right: '',
},
firstDay: 0,
editable: true,
selectable: true,
defaultView: 'agendaWeek',
columnFormat: 'dddd',
events: events_data,
eventResize: function(event, delta, revertFunc) {
console.log($(this).businessHours);
}
});
In your eventResize function, you can check the event parameter and check the input.
function isBusinessHour(event) {
// Check if your event.start and event.end is in business hours
// Using moment functions such as isBetween()
}
eventResize: function(event, delta, revertFunc) {
if (!isBusinessHour(event))
revertFunc();
}
To achieve this you can set the "eventConstraint" option to "businessHours":
eventConstraint: "businessHours"
The documentation for this setting says:
If "businessHours" is given, events being dragged or resized must be
fully contained within the week’s business hours (Monday-Friday
9am-5pm by default). A custom businessHours value will be respected.
See https://fullcalendar.io/docs/eventConstraint for more details.
It does not work, even with the version 4.
You need to compare values for event and those of business Hours:`
eventDrop: function(info) {
var format = 'HH:mm';
// get moment as time:min only
var ies = moment(info.event.start);
var tes = ies.hours()+':'+ies.minutes();
var event_start = moment(tes,format);
var iee = moment(info.event.end);
var tee = iee.hours()+':'+iee.minutes();
var event_end = moment(tee,format);
// get business hours
var bh_start = moment(calendar.getOption('businessHours')['startTime'],format);
var bh_end = moment(calendar.getOption('businessHours')['endTime'],format);
if ( event_start.isBefore( bh_start ) || event_end.isAfter( bh_end )) {
console.log(' out of busqiness hours');
info.revert();
return false;
}
}
Related
I am trying to create a calendar application by using fullcalendar. But I have a specific problem.
I want to create an event that last -for example- for 5 days. When I click and drag the newly-created-event, fullcalendar present me something like that:
Mouse click started at 08th Oct 08:00 and mouse click ended at 12th Oct 12:00. The event included all hours between 08th Oct 08:00 and 12th Oct 12:00. This means I have to participate an event that last for 96 hours. You can't expect me to participate a meeting for five-days-long, right?
So, what I actually want is the event should start at 08:00 and end at 12:00 for all five days. Which means the event should be appear like this:
I did it by creating all events one by one. But in my application, I disabled adding two or more events at once for various reasons. Also, I want my customers to be able to create an event like that at once.
Is there any way to do this in fullcalendar?
Here is my code:
function initCalendar {
if (!jQuery().fullCalendar) {
return;
}
var date = new Date(),
started,
ended
var header = {};
var calendar = $('#calendar').fullCalendar({
allDaySlot: false,
eventOverlap: false,
selectOvetlap: false,
header: header,
selectable: true,
selectHelper: true,
defaultView: 'agendaWeek',
select: function (start, end, allDay) {
$('#fc_create').click();
var dateStart = start;
var dateEnd = end;
$(".antosubmit").on("click", function() {
var title = $("#reservation-title").val();
if (title) {
var event = {
//minTime: "08:00:00"
//maxTime: "21:00:00"
editable: true,
title: title,
start: dateStart,
end: dateEnd,
allDay: false
}
calendar.fullCalendar('renderEvent', event, true);
calendar.fullCalendar('unselect');
#('.antoclose').click();
return false;
}
else {
////alert here
}
})
},
eventClick: function (calEvent, jsEvent, view)
{
var selectedEditable = calEvent.editable;
if (selectedEditable) {
$('fc_create').click();
$("#reservation-title").val(calEvent.title);
$(.antoUpdate).on("click", function() {
var title = $("#reservation-title").val();
if (title) {
calEvent.title = $("#reservation-title").val();
#('.antoclose').click();
}
else {
////alert here
}
});
}
else
{
$('fc_edit').click();
$("#title2").val(calEvent.title);
}
calendar.fullCalendar('unselect');
},
events: [{
////add events here...
}]
})
}
I'm using the FullCalendar plugin and trying to make it so you can't drop a new event when its being dragged into something that is outside of the business hours. I have it so you can't drag into any date before the current date, but can't figure out how prevent say the weekend to be dragged to.
I don't want a hard coded solution where I have to do an if than statement specifically for the weekend because what if I want to add business hours say Wednesday on a specific week and only allow between 1pm and 4pm ? So I need a dynamic solution I could pass down some JSON like the events: handles and the businessHours can handle as well.
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
/* This constrains it to today or later */
eventConstraint: {
start: moment().format('YYYY-MM-DD'),
end: '2100-01-01' // hard coded must have
},
businessHours: {
start: moment().format('HH:mm'), /* Current Hour/Minute 24H format */
end: '17:00' // 5pm
}
});
});
here is a fiddle of my current example http://jsfiddle.net/htexjtg6/
one problem you are having is because the initialized events doesn't have a duration - so fullcalendar doesn't know if the events overlap constraints and businessHours when dropped. Simply setting start/end can solve that.
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true, // maintain when user navigates (see docs on the renderEvent method)
start: moment(),
end: moment(),
});
bonus: in the fullcalendar initializer set defaultTimedEventDuration:'01:00:00', (default duration of events is 2 hours)- set this value according to the domain the application applies to.
About having different times on different days; BusinessHours can be an array - (which could come from a function returning jsonarray (since jsonArrays are fully qualified js). see https://fullcalendar.io/docs/display/businessHours/
businessHours: [
{
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
}
],
eventConstraint:"businessHours",
see this fiddle http://jsfiddle.net/htexjtg6/11/ for a fork of your code (with working businessHours)
Just pass this constraint: 'businessHours' in event object.
I've created a monthly calendar using fullCalendar month view.
On my calendar, I've displayed only one event per day. This event is used to display user's status (available, not available, busy...)
Because I'll always have 1 event per day, I've set eventLimit to true to avoid multiple events and because this event is about the entire day, I've also set editable to false to prevent events' drag & drop .
Here is my code:
$('#calendar').fullCalendar({
editable: false, // Prevent event drag & drop
events: '/json/calendar', // Get all events using a json feed
selectable: true,
eventLimit: true, // Only 1 event per day
header: {
left: 'prev,next',
center: 'title',
right: 'today'
},
select: function(start, end) {
window.location.hash = '#oModal-calendar'; // Display some popup with a form
end.subtract(1, 'days');
$('#checkboxButton').data('start', start);
$('#checkboxButton').data('end', end);
$('#calendar').fullCalendar('unselect');
}
});
I want my user to be able to select days directly from the calendar so I've set selectable: true in the calendar's option. However, I've got many feedback that "it didn't worked".
After some investigation, I found that users often click on the event block instead of the day.
Because events are draggable by default, a click on an event doesn't trigger the select and because I've set editable to false it doesn't do anything anymore.
This combination leads my users to think that there is a bug.
I would like the fullCalendar select to work like there was no event on the calendar. How can I achieve this behavior ?
Edit: here is a jsfiddle based on full calendar example and my code
I finally found the solution.
FullCalendar event's click is bind to the css class fc-day-grid-event.
It's possible to simply ignore it with one css line pointer-events: none;.
.fc-day-grid-event {
pointer-events: none;
}
Here is the Jsfiddle updated.
One way to do this would be to allow the user to click on event's through the eventClick callback, but when they click on them trigger the "select" function through FullCalendar's API $('#calendar').fullCalendar('select', start, end).
I updated your jsfiddle example with the relevant code.
HTML
<div id="calendar"></div>
Javascript
$('#calendar').fullCalendar({
editable: false, // Prevent event drag & drop
defaultDate: '2015-02-12',
events: [{
title: 'All Day Event',
start: '2015-02-01'
}, {
title: 'Lunch',
start: '2015-02-12T12:00:00'
}],
selectable: true,
eventLimit: true, // Only 1 event per day
header: {
left: 'prev,next',
center: 'title',
right: 'today'
},
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
eventClick: function(calEvent, jsEvent, view) {
var start = calEvent.start;
var end = calEvent.end;
$('#calendar').fullCalendar('select', start, end);
}
});
I use FullCalendar in my application and its working.
Now I need to change the color of Italian holidays into red. I did it for weekends but:
I don't know how to add holidays in calendar.
How can i change their color.
This is my code :
<script>
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'next',
},
defaultView: 'month',
lang: 'it',
height: 600,
dayClick: function(date, jsEvent, view) {
// Changing BG color
$(this).css('background-color', 'green');
//Create modal here
$('#myModal').modal();
// Show Date in SPAN
$('#spnDate').html(date.format('DD/MM/YYYY'));
// Put Date value in a variable
$('#date').attr('value', date.format('DD/MM/YYYY'));
},
editable: true,
});
</script>
You should use another eventSource that provides the holidays. These events can have a property like holiday, that specify that the event is indeed a holiday.
Based on this holiday, you can change the background color of the day with eventRender
You will have to add the following code to var calendar = $('#calendar').fullCalendar({:
eventSources: [
{
url: 'fullcalendar/holidays' // url to get holiday events
}
// any other sources...
],
eventRender: function(event, element, view) {
// lets test if the event has a property called holiday.
// If so and it matches '1', change the background of the correct day
if (event.holiday == '1') {
var dateString = event.start.format("YYYY-MM-DD");
$(view.el[0]).find('.fc-day[data-date=' + dateString + ']')
.css('background-color', '#FAA732');
}
},
Your JSON object should look like this:
[{"title":"Christmas","start":"2014-12-25","holiday":"1"},{"title":"Another holiday","start":"2014-10-14","holiday":"1"}]
I am trying to update my calendar (fullcalendar.js) dynamically, however it is not rerendering the events when the calendar is not visible. I'm also using javascript tabs in my web app so by 'not visible' I mean that it is on a different tab. I've set up a jsfiddle to demonstrate the behavior:
http://jsfiddle.net/35kU5/10/
If you click the Add button while you are on the tab that contains the calendar, the events will be added and immediately visible.
However, if you click the Add button while you are on the second (empty) tab, then switch back to the first tab with the calendar, the 'added' events are not there until you force the calendar to repaint them by some action such as switching the view from week to month, or switching days/weeks/months, then going back.
I've tried the
$("#calendar").fullcalendar('refetchEvents');
$("#calendar").fullcalendar('rerenderEvents');
methods, neither of these solve the issue....Can anyone tell me what I'm doing wrong here? Or is this simply not possible?
Please see the Adam Shaw's full calendar selectable demo. It shows that new events will be added by selecting the date.
The full calendar starts with this code which includes the select event. I use ColdFusion and this is how I retrieve data from my database server:
$myCalendar = $('#myCalendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
theme: true,
selectable: true,
selectHelper: true,
height: 500,
events:'events.cfc?method=getevents',
select: function(start, end, allDay) {
alert('select function chosen');
// set the dialog date to the date selected on the calendar
// commented out the dates below when we changed to datetimepicker
// $('#eventStart').val(start);
// $('#eventEnd').val(end);
// added the info below to support the datetimepicker
$('#eventStart').datetimepicker("setDate", new Date(start));
$('#eventEnd').datetimepicker("setDate", new Date(end));
//clear out the contents of the event title and the event id
$('#eventTitle').val('');
$('#ID').val('');
//default the value of all day to halfday value 1,
all day is valued at 2
$('#eventallday').val(1);
$('#calEventDialog').dialog('open');
},...........
Here is the code I use for the select function. This is placed at the bottom of my js code. I reference additional fields you may not use.
var title = $('#eventTitle');
var start = $('#eventStart');
var end = $('#eventEnd');
$('#calEventDialog').dialog({
resizable: false,
autoOpen: false,
title: 'Add Event',
width: 400,
buttons: {
Save: function() {
if ($('input:radio[name=allday]:checked').val() == "1") {
eventClass = "gbcs-halfday-event";
color = "#9E6320";
end.val(start.val());
}
else {
eventClass = "gbcs-allday-event";
color = "#875DA8";
}
if (title.val() !== '') {
$myCalendar.fullCalendar('renderEvent', {
title: title.val(),
start: start.val(),
end: end.val(),
allDay: true,
className: eventClass,
color: color
}, true // make the event "stick"
);
$('calendar').fullCalendar('renderEvent', {
title: ($("#eventTitle").val()),
start: ($("#eventStart").val()),
end:($("#eventEnd").val()),
allDay: ($("#allday").val()),
color:($("background-Color").val())
}, true // make the event "stick"
);
$.ajax({
url: 'events.cfc?method=add_events',
data: 'title='+ ($("#eventTitle").val())+
'&start='+ ($("#eventStart").val()) +'
&end='+ ($("#eventEnd").val()) +
'&id='+ 0 ,
type: "POST",
success: function(json) {
alert('Updated Successfully');
}
})
}
$myCalendar.fullCalendar('unselect');
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
});// JavaScript Document
I hope this points you in the right direction. Thanks for posting your question. You showed me how to use tabs!.