the default behavor of selecthelper when resizing to a restricted zone(selectConstraint) is to hide the selectHelper, i want this to be exactly as event resize to a restricted zone(eventConstraint), where the event is visible and the size is the last allowed size.
this is the demo
http://jsfiddle.net/pu83thf9/3/
1)try to select from 10am to 2pm the selectHelper is hidden out of selectConstraint
2)try to create an event from 8-to 10 , try to resize it to 12 and don't release the mouse for 2 seconds, try now to resize it to 2pm, it's visible and not hidden like case 1
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
locale:"en",
minTime: "06:00:00",
maxTime: "20:00:00",
allDaySlot: false,
businessHours: true,
businessHours: [{
dow: [1, 2, 3, 4, 5], // Monday - Friday
start: '08:00',
end: '12:00',
}, {
dow: [1, 2, 3, 4, 5], // Monday - Friday (if adding lunch hours)
start: '13:00',
end: '17:00',
}],
selectConstraint: "businessHours",
eventConstraint: "businessHours",
defaultView: 'agendaWeek',
defaultDate: '2018-03-12',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = 'Zone';
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventOverlap :false,
selectOverlap :false,
eventLimit: true, // allow "more" link when too many events
eventRender: function (event, element, view) {
element.find(".closeon").on('click', function () {
$('#calendar').fullCalendar('removeEvents', event._id);
});}
});
});
Related
I am using fullcalendar v4. In the demo i see how we select date and it is updating event. I want the same. However I couldn't get any method to update event. I tried to feed event as function, but I dont't see it being trigger when I select date.
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' ],
header: {
left: 'today',
center: 'title',
right: 'timeGridWeek'
},
defaultView: 'timeGridWeek',
selectable: true,
selectMirror:true,
selectOverlap: true,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
select: function(selectionInfo){
console.log(selectionInfo)
},
events:
events: function(info, successCallback, failureCallback) {
console.log({info}, {successCallback}, {failureCallback});
}
,
});
calendar.render();
Wanted to add "More" link for the day calendar? Can anyone help me out doing this ? Here's the code. However it is coming for the month view not for the day. Wanted same link for the day view. Thanks in advance
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
minTime: '#{#timing_slots[:start_time]}',
maxTime: '#{#timing_slots[:end_time]}',
slotDuration: '00:45:00',
//themeSystem: 'bootstrap',
height: 820,
defaultDate: date,
editable: false,
selectable: true,
eventLimit: true, // allow "more" link when too many events
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
},
views: {
agendaDay: {
type: 'agenda',
duration: {days: 1},
// views that are more than a day will NOT do this behavior by default
// so, we need to explicitly enable it
groupByResource: true
//// uncomment this line to group by day FIRST with resources underneath
//groupByDateAndResource: true
},
day: {
titleFormat: 'dddd, MMMM Do YYYY',
}
},
I'm trying to set a default title and background color when selecting an event on fullcalendar. but the event is customized only after rendering it and not during its selection. Any idea? thx for your help.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
var eventData;
eventData = {
title: 'unavailable',
start: start,
end: end,
backgroundColor: 'red',
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
$('#calendar').fullCalendar('unselect');
},
editable: true,
});
});
This is a jsfiddle
I'm implementing a fullcalendar in a project using which users can select future dates.
Is there a way to unselect the selected days?
I tried giving $("#calendar").fullCalendar("unselect"); but it didn't work.
FIDDLE
var today = $('#calendar').fullCalendar('getDate');
$('#calendar').fullCalendar({
defaultDate: today,
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
defaultView: 'month',
events: [],
selectable: true,
select: function(start, end, jsEvent, view) {
if (moment().diff(start, 'days') > 0) {
$('#calendar').fullCalendar('unselect');
// or display some sort of alert
return false;
}
var date = $('#calendar').fullCalendar('getDate');
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}, ]);
$("#calendar").fullCalendar("unselect");
},
selectOverlap: function(event) {
return !event.block;
}
});
function eventSource(){
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}, ]);
}
var today = $('#calendar').fullCalendar('getDate');
$('#calendar').fullCalendar({
defaultDate: today,
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
defaultView: 'month',
events: [],
selectable: true,
select: function(start, end, jsEvent, view) {
if (moment().diff(start, 'days') > 0) {
$('#calendar').fullCalendar('unselect');
// or display some sort of alert
return false;
}
eventSource();
var date = $('#calendar').fullCalendar('getDate');
},
selectOverlap: function(event) {
return !event.block;
}
});
Note: Multiple business hours was made available in this commit: https://github.com/dtmonterrey/fullcalendar/commit/d9848d0ae7d7dae0f0340c62ce38b8acc0d03b62
I'm working with FullCalendar and I have an excess row after I've set:
scrollTime: "08:00:00",
minTime: "08:00:00",
maxTime: "19:00:00",
Image
Full Code
$(document).ready(function () {
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
scrollTime: "08:00:00",
minTime: "08:00:00",
maxTime: "19:00:00",
weekNumbers: true,
firstDay: 1,
allDaySlot: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectConstraint: 'businessHours',
eventConstraint: 'businessHours',
selectHelper: true,
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');
},
businessHours: [
{
start: '09:00',
end: '17:00',
dow: [1, 2, 3, 5, 6]
},
{
start: '09:00',
end: '19:00',
dow: [4]
}
]
});
});
Any ideas?
I have the exact issue as you, using FullCalendar v2.4.0. I think the best option would be changing the aspectRatio property from 1.35 to 1.5 (or any larger float number).