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).
Related
I am testing fullcalendar/angular 5 in ionic 5 app and the header toolbar for views displays as two buttons:
This is my calendar options:
calendarOptions: CalendarOptions = {
contentHeight: "auto",
headerToolbar: {
left: 'title',
center: 'timeGridMes, timeGridDia',
right: 'prev,next today'
},
initialView: 'timeGridDia',
weekends: true,
editable: false,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
allDaySlot:false,
initialDate: new Date(),
firstDay: 1,
fixedWeekCount: false,
locale: 'es',
slotMinTime : "08:00:00",
slotMaxTime : "23:00:00",
navLinks: true,
nowIndicator: true,
slotDuration: "00:15:00",
slotLabelInterval: "00:15:00",
eventTimeFormat: { hour12: false, hour: '2-digit', minute: '2-digit' },
showNonCurrentDates: true,
timeZone: 'local',
weekNumbers: true,
weekText: "S",
buttonText: {
today: 'Hoy'
},
views: {
timeGridMes: {
type: 'dayGridMonth',
dayMaxEventRows: 4,
buttonText: 'Mes',
titleFormat: { year: 'numeric', month: 'short'}
},
timeGridDia: {
type: 'timeGridDay',
buttonText: 'Día',
titleFormat: { month: 'short', day: 'numeric' }
}
},
select: this.handleDateSelect.bind(this),
eventClick: this.handleEventClick.bind(this),
eventsSet: this.handleEvents.bind(this)
};
and this is html that it generates:
<div class="fc-toolbar-chunk">
<div class="fc-button-group">
<button class="fc-timeGridMes-button fc-button fc-button-primary" type="button">Mes</button>
<button class="fc--button fc-button fc-button-primary" type="button"></button>
</div>
<button class="fc-timeGridDia-button fc-button fc-button-primary fc-button-active" type="button">Día</button>
</div>
Why generate the div with class = "fc-button-group" with two buttons?
Removing the commas in the string solves the problem...:
headerToolbar: {
left: 'title',
center: 'timeGridMes timeGridDia',
right: 'prev next today'
},
https://github.com/fullcalendar/fullcalendar/issues/5821#issue-701022933
I need to work with extendedProps, but when i try to show info.event.extendedProps.description in timeGridWeek or timeGridDay it doesn't (it say "undefined"), only in dayGridMonth. I have read the docs, but i don't know how to show these non-standard properties.
The events are displayed correctly.
(Sorry for my poor english)
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'interaction', 'bootstrap', 'timeGrid', 'rrule' ],
height: 'parent',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeGridDay,timeGridWeek,dayGridMonth'
},
titleFormat: {
year: 'numeric',
month: 'long',
day: '2-digit'
},
defaultView: 'timeGridWeek',
themeSystem: 'bootstrap',
selectable: true,
editable: true,
navLinks: true,
weekNumbers: true,
nowIndicator: true,
locale: 'es',
minTime: '08:00:00',
maxTime: '22:00:00',
weekends: false,
eventOrder : 'color',
eventSources: [
'carga_citas.php',
'carga_sesiones.php'
],
eventClick: function(info) {
alert(info.event.extendedProps.description);
}
});
calendar.render();
});
</script>
Thanks for your replies.
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);
});}
});
});
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;
}
});