I am managing appointments on fullcalendar. I have available slots of time where I can create new appointments. Also I can drag appointments onto available time slots which are shown as background events.
I only want the drop functionality on background event slots.
I have tried the eventOverlap method but it only works when the event is dropped on a background event. If the event is dropped elsewhere then I am unable to detect whether I am dropping the event on background event or on empty slot.
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
defaultView: 'timeGridWeek',
// height: 1080,
plugins: ['dayGrid', 'timeGrid', 'interaction'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: {
url: getUrl(),
failure: function() {
toastr.error('Unable to load calendar data, Please try later');
},
success: function() {
}
},
loading: function(bool) {
},
defaultDate: Date.now(),
editable: true,
eventLimit: true,
eventClick: function(info) {
if (info.event.extendedProps.type == 'Calendar') {
showCreateModal(info.event);
}
if (info.event.extendedProps.type == "Appointment") {
showUpdateModal(info.event);
}
},
eventOverlap: function(stillEvent, movingEvent) {
return stillEvent.extendedProps != '' && stillEvent.extendedProps.type === 'Calendar' ? true : false;
},
eventDrop: function(info) {
// check if event is being dropped on past date / slot
if (moment(info.event.start) < moment()) {
info.revert();
return;
}
// check if event is being dropped on future slot
if (moment(info.event.start) > moment()) {
swal({
title: "Are you sure?",
text: "You are about to re-schedule this appointment!",
icon: "warning",
// buttons: true,
buttons: ["No", "Yes !"],
dangerMode: true,
})
.then((response) => {
if (response) {
submitForm(false, true, info.event);
} else {
info.revert();
}
});
}
}
});
calendar.render();
This is what I want:
You're correct that eventOverlap doesn't help you here, because it's only triggered when the event is dropped onto a background event. It doesn't help you when the event is dropped somewhere else.
In fullCalendar 4 you can achieve what you need via the eventConstraint setting. This allows you to limit event dragging to specific windows of time. As the documentation says, you can provide a groupId value to this setting, and then
...events that are being dragged or resized must be fully contained by at least one of the events linked to by the given groupId.
All you need to do as well as that is give all your background events the same groupId.
For example, if you set:
eventConstraint: 1
and then have entries such as these within your event data:
{
start: "2019-07-10 09:00",
end: "2019-07-10 12:00",
rendering: "background",
groupId: 1
},
{
start: "2019-07-11 09:00",
end: "2019-07-11 12:00",
rendering: "background",
groupId: 1
},
This would mean that you would only be allowed to drag or resize an existing calendar event if you drag/resize it so that it falls entirely within the time periods covered by those background events which have a groupId of 1.
Here's a working demonstration: https://codepen.io/ADyson82/pen/jjdEjB
Related
I am trying to use this example -- https://fullcalendar.io/docs/other-calendar-dragging -- to create a page that shows 2 FullCalendar calendars and allows the user to drag events from one calendar to the other. I am able to render both calendars, and pull events for each via ajax from a php page. However, the events only display on the first calendar. If I comment out this line:
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar'
from calendar1, then the events will display on calendar2 only. I'd really appreciate help to enable events to display on BOTH calendars.
FYI, here is my code:
HTML:
<div id="kt_calendar"></div>
<div id="kt_calendar2" ></div>
JS:
var todayDate = moment().startOf('day');
var show_now_indicator=true;
var YM = todayDate.format('YYYY-MM');
var YEAR = todayDate.format('YYYY');
var MONTH = todayDate.format('MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
var NEXT_MONTH = todayDate.clone().add(1, 'month').format('YYYY-MM-DD');
var cal = document.getElementById('kt_calendar');
var calendar = new FullCalendar.Calendar(cal, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'dayGridPlugin', 'timeGrid', 'list' ],
themeSystem: 'bootstrap',
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar',
showNonCurrentDates:false,
isRTL: KTUtil.isRTL(),
contentHeight: 'auto',
//aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: show_now_indicator,
now: TODAY,
defaultDate: TODAY,
initialDate: TODAY,
defaultView: 'dayGridMonth',
eventOrder: 'order_by',
eventLimit: false, // true to allow "more" link when too many events
navLinks: true,
eventResizableFromStart: false, //Whether the user can resize an event from its starting edge.
eventDurationEditable: false, //Allow events’ durations to be editable through resizing.
eventResourceEditable: reschedule,//Determines whether the user can drag events between resources.
droppable:reschedule,//Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
eventStartEditable: reschedule,//Allow events’ start times to be editable through dragging.
editable: reschedule, //Determines whether the events on the calendar can be modified.
eventDrop: function(info) {
reschedule_event(info);
},
eventClick: function(info) {
do_event_click(info);
},
eventRender: function(info) {
var element = $(info.el);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
views: {
dayGridMonth: { buttonText: 'monthly' },
dayGridWeek: { buttonText: 'weekly' },
dayGridDay: { buttonText: 'daily' }
},
});
calendar.render();
var cal2 = document.getElementById('kt_calendar2');
var calendar2 = new FullCalendar.Calendar(cal2, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'dayGridPlugin', 'timeGrid', 'list' ],
themeSystem: 'bootstrap',
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar',
showNonCurrentDates:false,
isRTL: KTUtil.isRTL(),
contentHeight: 'auto',
//aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: show_now_indicator,
now: NEXT_MONTH,
defaultDate: NEXT_MONTH,
initialDate: NEXT_MONTH,
defaultView: 'dayGridMonth',
eventOrder: 'order_by',
eventLimit: false, // true to allow "more" link when too many events
navLinks: true,
eventResizableFromStart: false, //Whether the user can resize an event from its starting edge.
eventDurationEditable: false, //Allow events’ durations to be editable through resizing.
eventResourceEditable: reschedule,//Determines whether the user can drag events between resources.
droppable:reschedule,//Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
eventStartEditable: reschedule,//Allow events’ start times to be editable through dragging.
editable: reschedule, //Determines whether the events on the calendar can be modified.
eventDrop: function(info) {
reschedule_event(info);
},
eventClick: function(info) {
do_event_click(info);
},
eventRender: function(info) {
var element = $(info.el);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
views: {
dayGridMonth: { buttonText: 'monthly' },
dayGridWeek: { buttonText: 'weekly' },
dayGridDay: { buttonText: 'daily' }
},
});
calendar2.render();
Figured it out! The second call was failing bec it was running before the first call completed. I added a delay before loading the 2nd calendar, and now both months load fine:
setTimeout(function() { loadCal2(); }, 3000);
when I drag an external element on the calendar, I am not able to create an event on the calendar through it. eventReceive() callback is also not getting fired.
I have set the droppable option to true as well. Can someone please help? Have a look at the code:
HTML:
<div class="fc-event">Drag me !!</div>
JS:
$('.fc-event').each(() => {
// 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)
duration: '02:00',
create: true,
});
// 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
});
});
const calendarEl = document.getElementById('calendar');
calendar = new Calendar(calendarEl, {
themeSystem: 'standard',
selectable: true,
droppable: true,
columnHeader: true,
selectMirror: true,
editable: true,
plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin],
eventResourceEditable: true,
select(selectionInfo) {
showTaskCreationPopup(selectionInfo.start, selectionInfo.end);
},
eventReceive(element) {
console.log('event received');
createTask(element.event);
},
drop(info) {
console.log('dropped');
createTask(info.jsEvent);
},
eventDrop(info) {
console.log('event dropped');
},
header: {
left: 'prevYear prev today next nextYear',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay',
},
buttonText: {
// eslint-disable-next-line new-cap
prevYear: new moment().year() - 1,
// eslint-disable-next-line new-cap
nextYear: new moment().year() + 1,
},
});
calendar.render();
The way that I was able to achieve this was not through the eventReceive -neither eventDrop- event but using the 'drop' event. The signature is something like:
customDrop = ({ resource, date, draggedEl: { id } }) => {})
var containerEl = document.getElementById('external-events-list');
var eventEls = Array.prototype.slice.call(
containerEl.querySelectorAll('.fc-event')
);
eventEls.forEach(function(eventEl) {
if (eventEl.textContent == "Event1") {
new Draggable(eventEl, {
eventData: {
id: 1,
title: eventEl.innerText.trim(),
color: 'Orange',
textColor:'black'
}
});
} else if (eventEl.textContent == "Event2") {
new Draggable(eventEl, {
eventData: {
id: 2,
title: eventEl.innerText.trim(),
color: '#ccccff',
textColor:'black'
}
});
}}); // end eventEls.forEach
I am trying to show events from entity database and from a public google calendar.
I have tried all of the options shown on Stack Overflow to no avail. I can get events to load on two different calendars on different pages using the examples on google calendar example (github)
and database example (youtube)
However I can not get them to load on the same calendar on a single html page. I am using an MVC5 app on vs 2017.
I am just a hobbyist and not a qualified coder so any help much appreciated.
here's how I am getting the an event from the database:
$(document).ready(function () {
var events = [];
var selectedEvent = null;
FetchEventAndRenderCalendar();
function FetchEventAndRenderCalendar() {
events = [];
$.ajax({
type: "GET",
url: "/home/ListEvents",
success: function (data) {
$.each(data, function (i, v) {
events.push({
eventID: v.EventID,
title: v.Subject,
description: v.Description,
start: moment(v.Start),
end: v.End != null ? moment(v.End) : null,
color: v.ThemeColor,
allDay: v.IsFullDay
});
})
GenerateCalender(events);
},
error: function (error) {
alert('failed');
}
})
}
and here's how I am getting event from the database and Google (the following of the above code):
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
plugins: ['interaction', 'dayGrid', 'list', 'googleCalendarPlugin'],
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'listMonth,month,basicWeek,basicDay'
},
eventLimit: true,
eventColor: '#378006',
eventRender: function (event, element, view) {
element.find('#txtSubject');
element.find('#txtSubject');
element.find('.fc-list-item-title');
element.find('.fc-list-item-title');
//return ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0;
return ['All events', event.title].indexOf($('#numero').val()) >= 0 || ['', event.color].indexOf($('#color').val()) >= 0;
},
googleCalendarApiKey: '*************************',
eventSources: [
events,
{
googleCalendarId:'blah...blah'
}
],
eventClick: ETC ETC
});
I also tried adding those lines:
$('#calendar').fullCalendar('addEventSource', 'https://calendar.google.com/calendar/embed?src=BLAH.......BLAH');
}
})
I have been trying to get fullcalendar to react to polling for new events, but whenever it calls refetchEvents, if I am dragging or resizing something, it stops me, as if I have released the mouse at the position I am in, which moves or resizes the event respectively to the wrong spot.
I have a jsfiddle, to show this in action.
Here is the code, if it helps:
$(document).ready(function() {
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: [{
title: 'event1',
start: '2017-01-26T08:00:00',
end: '2017-01-26T10:00:00'
}, {
title: 'event2',
start: '2017-01-05',
end: '2017-01-07'
}, {
title: 'event3',
start: '2017-01-09T06:30:00',
end: '2017-01-09T09:30:00',
}]
});
});
setInterval(function() {
$('#calendar').fullCalendar('refetchEvents');
console.log('refetchEvents called');
}, 5000);
May be not the most efficient, using fetchEventsLock reference on eventDragStart and eventDragStop and fetch events only when released === false.
var fetchEventsLock = false;
$(document).ready(function () {
/* initialize the calendar
-----------------------------------------------------------------*/
function toggleLock() {
fetchEventsLock = !fetchEventsLock;
console.log('Set To ' + fetchEventsLock)
}
$('#calendar').fullCalendar({
eventDragStart: toggleLock,
eventDragStop: toggleLock,
/* Other option removed */
});
});
setInterval(function () {
if (fetchEventsLock === false) {
$('#calendar').fullCalendar('refetchEvents');
console.log('refetchEvents called');
}
}, 5000);
I want to make two selections in the calendar. Right now I can only make one that goes to one of my inputs.
I am trying to select a date on the calendar, then that first selection goes to my first input tag.
Then after that I want to select a different date that goes to my second input tag.
So basically, I want to make two selections. Here is my code. Do I need to make a callback somewhere here? I put my code on jsfiddle.
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = 'true';
if (title === 'true') {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
var eventStart = $.fullCalendar.formatDate(start, "MM/dd/yyyy");
var eventEnd = $.fullCalendar.formatDate(end, "MM/dd/yyyy");
$('input[name="startDate"]').val(eventStart);
}
calendar.fullCalendar('unselect');
},
eventClick: function(calEvent, jsEvent, view) {
$('#calendar').fullCalendar('removeEvents', calEvent._id);
$('input[name="startDate"]').removeAttr('value');
$('input[name="endDate"]').removeAttr('value');
},
editable: true
});
Unless I'm not understanding your question, how about doing this?
if($('input[name="startDate"]').val()=='') {
$('input[name="startDate"]').val(eventStart);
} else {
$('input[name="endDate"]').val(eventEnd);
}
JSFIDDLE