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
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 using the demo list-views.html and trying to set height: auto, but this does not work! The Calendar has a vertical scrollbar.
$(document).ready(function() {
$('#calendar').fullCalendar({
height: 'auto',
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,month'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'listWeek',
defaultDate: '2017-02-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-02-01'
},
***continue-demo
I have no idea if this will help but did you include the print.css? That may correct it. Also on the print css be sure to set media="" to media="print".
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;
}
});