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.
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 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();
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).