Im looking for some advice, options and examples if I wanted to block out/disable certain times on certain days.
For example, if I have the schedule on day/week view and say a business books appointments from 9 - 5 mon - friday, but on sat then are open 8 - 4 how can I represent this on the view?
Thanks in advance.
You will need two things for that.
First, set up business hours in fullcalendar constructor. Then, add a function to prevent drag and dropping events to wrong dates.
$("#c").fullCalendar({
...
businessHours: { start: '09:00', end: '17:00', dow: [1, 2, 3, 4, 5] },
eventDrop: function (event, delta, revertFunc, jsEvent, ui, view) {
eventDropOrResizeHandler(event, delta, revertFunc, jsEvent, ui, view);
},
eventResize: function (event, delta, revertFunc, jsEvent, ui, view) {
eventDropOrResizeHandler(event, delta, revertFunc, jsEvent, ui, view);
}
});
function eventDropOrResizeHandler(event, delta, revertFunc, jsEvent, ui, view) {
// check that event.start and event.end are within limits, and if not, call revertFunc();
}
Finally, you should add the same check that event.start and event.end are within limits into your function that allows user to create/edit events.
Related
I try to set dynamically the content of a FullCalendar event after the user would have resized it but I can't figure out how to achieve this, since both eventResize and eventResizeStop don't get the element in their callback.
I have also tried to modify the event in eventResizeStop and to get the value in eventRender (since I noticed that a rerender is called after resize stop) but this ain't work because still get the "old" event content.
Any idea how to achieve this?
$('#calendar').fullCalendar({
eventRender: function (event, element) {
console.log(event.something); // still same value
},
eventResizeStop: function (event, jsEvent, ui, view) {
event.something = 'try to push a new value'; // no effect
$(this).find('.fc-title').replaceWith('something'); // no effect
},
eventResize: function (event, delta, revertFunc, jsEvent, ui, view) {
$(this).find('.fc-title').replaceWith('something'); // no effect
}
});
Mockup of what I would like to achieve:
before user modification:
-----------------
| event content |
-------v---------
after user modification of the length/duration of the event:
-----------------
| event content |
| is now not the|
| same anymore |
-------v---------
I've found the solution. Modifying the event in eventResize is effectively the right way but after doing so, the event should be updated in the calendar respectively an update should be explicitly called
$('#calendar').fullCalendar({
eventRender: function (event, element) {
console.log(event.something);
},
eventResize: function (event, delta, revertFunc, jsEvent, ui, view) {
event.something = 'my new value';
$("#calendar").fullCalendar('updateEvent', event);
}
});
I am using the fullcalendar jquery plugin to create a schedule of events. I want to prevent the user from dropping an external event on the calendar if it is earlier than current date.
This is my current code:
$('#edit_calendar').fullCalendar({
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
titleFormat: { month: 'MMMM' },
defaultView: 'month',
droppable: true,
drop: function (date, jsEvent, ui, resourceId) {
//compare today's date with drop date - if in the past, don't allow
var today = moment().startOf('day');
var dropDate = moment(date).startOf('day');
if (dropDate < today)
{
//The alert is shown
alert("An event in the past cannot be added, updated, or deleted.");
return false;
}
else
{
var memberName = $(this).data('event').title;
var memberID = $(this).attr('id').toString();
//Create Event - add to array
var newEvent = new Object();
newEvent = {
title: memberName,
id: memberID,
start: date.format(),
end: date.format(),
objectID: 0
};
eventsAdded.push(newEvent);
}
},
...rest of code
If the event is dropped before the current day display the alert and do not create the event. If shown after the current day, create the event.
In the code above, the alert is shown, but the event is still created. If the event is dropped after the current day, the event is created.
I thought by adding return false after the alert is displayed it will prevent the event from being created. However, the alert is shown AND the event is created.
Do I have to remove the event or is there a way to prevent the event from being created?
I was able to restrict events when they are added or changed using the selectConstraint and eventConstraint respectively. However, I would like to add an alert when the user tries to update or add an event outside the start and end dates so they know why it is not working.
This is what I have:
$('#edit_calendar').fullCalendar({
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
titleFormat: { month: 'MMMM' },
defaultView: 'month',
droppable: true,
drop: function (date, jsEvent, ui, resourceId) {
var memberName = $(this).data('event').title;
var memberID = $(this).attr('id').toString();
//Create Event - add to array
var newEvent = new Object();
newEvent = {
title: memberName,
id: memberID,
start: date.format(),
end: date.format(),
objectID: 0
};
eventsAdded.push(newEvent);
},
editable: true,
//The following constraints prevents the user from adding/updating/deleting events that are before the current date
//The end date is required. So, you can't add events over a year away from the current date
eventConstraint: {
start: moment().startOf('day'),
end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365)
},
selectConstraint: {
start: moment().startOf('day'),
end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365)
},
...rest of code...
Is there any way I can add an alert when the user tries to add or update an event ou
From the documentation:
eventDrop does not get called when an external event lands on the calendar. eventReceive is called instead
Having said that, in order to prevent the drop you need to go more back in the chain. You need to use "dropAccept". You can read about it in the documentation.
You can use 'removeEvents' to remove added event.
https://fullcalendar.io/docs1/event_data/removeEvents/
drop: function(date, jsEvent, ui, resourceId) {
var add = true;
... // Here decide whether to add or not
if(add){
;
}
else{
//use 'removeEvents' to remove added event
}
}
I would like to add an event to the fullcalendar jquery plugin from an external source. I need the event title; start and end dates. I read that the drop callback function is called when you drop an external source on the calendar. This reports the start date in the alert. The eventReceive option shows the title of the event. This alert is displayed after the drop callback. This is the code:
$('#edit_calendar').fullCalendar({
...
droppable: true,
drop: function(date) {
alert("Dropped on " + date );
},
eventReceive: function (event) {
alert('event, ' + event.title + ', was added, (need date here)');
},
How do I get the start date value from the drop callback to the eventRecieve function?
You can get the start and end dates within the drop event. This is the code I added to the drop event:
drop: function (date, jsEvent, ui, resourceId) {
var memberName = $(this).data('event').title;
var memberID = $(this).attr('id').toString();
//Create Event - add to array
var newEvent = new Object();
newEvent = {
title: memberName,
id: memberID,
start: date.format(),
end: date.format(),
objectID: 0
};
eventsAdded.push(newEvent);
},
I'm having trouble getting this functionality to work. I would like for the user to be able to jump to the agendaDay view from the month view after selecting a date. Can anyone suggest a way to achieve that functionality?
Use the dayClick event, along with changeView and gotoDate
dayClick: function(date, allDay, jsEvent, view) {
if(view.name != 'month')
return;
$('#calendar').fullCalendar('changeView', 'agendaDay')
.fullCalendar('gotoDate', date);
},
Just the updated answer for the new versions 2.x.x.
You have to call the methods this way:
$('#calendar').fullCalendar('changeView', 'agendaDay');
$('#calendar').fullCalendar('gotoDate', date);
because chaining for the method calls is not implemented (fullCalendar() call to method returns method response instead of JQuery object).
This works for me
$("#calendar").fullCalendar({
dayClick: function(date, jsEvent, view) {
//alert('Clicked on: ' + date.format());
//alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
//alert('Current view: ' + view.name);
if (view.name != 'month')
return;
if (view.name == 'month') {
$('#calendar').fullCalendar('changeView', 'agendaDay');
$('#calendar').fullCalendar('gotoDate', date);
}
},
For some reason fullcalendar won't display any events that occur after 7PM in the basicDay view.
The events show up in month view, but not in basicDay view.
Any thoughts would be appreciated.
Here is my code. I have two calendars on the same page. The first one is month view, the second is basicDay view.
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
weekMode:'variable',
events: $.fullCalendar.gcalFeed(
"http://www.google.com/calendar/feeds/google_account/public/basic"
),
eventClick: function(event) {
if (event.url) {
window.open(event.url,"_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=750, height=450");
return false;
}
}
});
$('#calendar_min').fullCalendar({
height:193,
header:false,
defaultView: 'basicDay',
events: $.fullCalendar.gcalFeed(
"http://www.google.com/calendar/feeds/google_account/public/basic"
),
eventClick: function(event) {
if (event.url) {
window.open(event.url,"_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=750, height=450");
return false;
}
}
});
});
This is caused because you're located in EST. When creating a new event the time is 12:00am GMT, so -5 hours = 7pm. You may want to look at using ignoreTimezone at http://arshaw.com/fullcalendar/docs/event_data/
What error are you getting? When I replace your google feed with an event after 7pm it displays fine. (Although your example has an extra )}; that needs to be removed.
$('#calendar_min').fullCalendar({
height: 193,
header: false,
defaultView: 'basicDay',
events: [
{
title: 'Day',
start: new Date(y, m, d, 20),
end: new Date(y, m, d, 21),
description: 'long description3',
id: 2
}],
eventClick: function(event) {
if (event.url) {
window.open(event.url, "_blank", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=750, height=450");
return false;
}
}
});
I had a similar issue. The Google Calendar timezone was EDT and the last 4 hours of event were missing from the display.
I changed fetchAndRenderEvents() in fullcalendar.js (line 849) to fix the issue.
It was:
function fetchAndRenderEvents() {
fetchEvents(currentView.start, currentView.end);
// ... will call reportEvents
// ... which will call renderEvents
}
I added one day to the currentView.end
function fetchAndRenderEvents() {
// Add 1 day to end to ensure all events are fetched when the time zone is applied.
fetchEvents(currentView.start, currentView.end.add(1, 'days'));
// ... will call reportEvents
// ... which will call renderEvents
}