According to the fullcalendar docs selectHelper accepts a function:
A function can also be specified for drawing custom elements. It will
be given 2 arguments: the selection's start date and end date (Moment
objects). It must return a DOM element that will be used.
However this feature doesn't work. In fact nothing in the source code checks selectHelper for typeof function.
Any ideas?
$(document).ready(function() {
calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
},
date: '2014-01-12',
defaultView: 'month',
selectable: true,
selectHelper: function(start, end) {
return $("<div style='background:red' />").text(start+' '+end);
},
editable: true,
events: [
{
title: 'All Day Event',
start: '2014-01-01'
},
{
title: 'Long Event',
start: '2014-01-07',
end: '2014-01-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2014-01-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2014-01-16T16:00:00'
},
{
title: 'Meeting',
start: '2014-01-12T10:30:00',
end: '2014-01-12T12:30:00'
},
{
title: 'Lunch',
start: '2014-01-12T12:00:00'
},
{
title: 'Birthday Party',
start: '2014-01-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2014-01-28'
}
]
});
});
That is definitely a bug
I submitted an issue on GitHub
https://github.com/arshaw/fullcalendar/issues/2832
Related
I am a beginner in coding. Currently I'm working with Fullcalender's scheduler(free version). I cannot get the start and end dates using javascript. I tried many ways. Someone, please help!!
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
slotMinTime :'08:00:00', //start time to be shown in the grid
slotMaxTime : '19:00:00', //end time to be shown in the grid
height: '100%',
aspectRatio: 1.8,
editable: true,
now: new Date(),
scrollTime: '00:00',
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineTenDays,timeGridWeek,dayGridMonth,listWeek'
},
initialView: 'resourceTimelineDay',
views: {
resourceTimelineTenDays: {
type: 'resourceTimeline',
duration: { days: 10 },
buttonText: '10 days'
}
},
expandRows: true,
resourceAreaWidth: '10%',
resourceAreaHeaderContent: 'Machine',
resources: [
{ id: '1', title: '1' , eventColor: 'blue'},
{ id: '2', title: '7', eventColor: 'green' },
{ id: '3', title: '8', eventColor: 'orange' },
{ id: '4', title: '11', eventColor: 'red' },
{ id: '5', title: '9', eventColor: 'yellow' },
],
events :'pages/load.php',
selectable:true,
selectHelper:true,
select: function(start, end, allDay)
{
$('#start').val(start.format("Y-MM-DD HH:mm:ss")); // here is my issue
$('#end').val(end.format("Y-MM-DD HH:mm:ss"));
$('#add_Modal').modal('show');
});
calendar.render();
});
Is there anything wrong? How shall I get the start and end values. I tried this too.
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
I got it. It was
var title = info.event.title; //gives Thu Jul 30 2020 17:30:00 GMT+0900
var start =info.event.start;
Thank you all.
It happened something strange to me. On my work computer doesn't work fullcalendar v5 on internet explorer e11 but in my personal computer it works and it has a low version than my work computer. any idea about this?
For example I can't see any example from the web page https://fullcalendar.io/
Or this code
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
initialDate: '2020-06-07',
allDaySlot:false,
locale:'es',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay'
},
events: [
{
title: 'All Day Event',
start: '2020-06-01'
},
{
title: 'Long Event',
start: '2020-06-07',
end: '2020-06-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-06-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-06-16T16:00:00'
},
{
title: 'Conference',
start: '2020-06-11',
end: '2020-06-13'
},
{
title: 'Meeting',
start: '2020-06-12T10:30:00',
end: '2020-06-12T12:30:00'
},
{
title: 'Lunch',
start: '2020-06-12T12:00:00'
},
{
title: 'Meeting',
start: '2020-06-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2020-06-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2020-06-28'
}
],
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
omitZeroMinute: false,
meridiem: false
},
});
calendar.render();
});
Have the same problem. IE console indicates that it doesn't understand ()=>{} combination. And so to make it compatible all => should be replaced with function
Im trying to create events with a range of time, but when i go to day or week view they show really weird. I have read a lot of questions but I couldnt fix it. I tried with allDay set to false, but the problem is not there.
I did download the library again. I also did disable all the css (except bootstrap), but the problem is still there.
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
aspectRatio: 2,
plugins: [ 'dayGrid', 'interaction', 'timeGrid' ],
allDayDefault: false,
editable: true,
eventLimit: true,
selectable: true,
selectHelper: true,
locale: 'es',
header: {
left: "prev,next",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
},
events:[
{
title: 'All Day Event',
start: '2019-08-01',
},
{
title: 'Long Event',
start: '2019-08-07',
end: '2019-08-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-08-09T16:00:00'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-08-16T16:00:00'
},
{
title: 'Conference',
start: '2019-08-11',
end: '2019-08-13'
},
{
title: 'Meeting',
start: '2019-08-12T10:30:00',
end: '2019-08-12T12:30:00'
},
{
title: 'Lunch',
start: '2019-08-12T12:00:00'
},
{
title: 'Meeting',
start: '2019-08-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2019-08-12T17:30:00'
},
{
title: 'Dinner',
start: '2019-08-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2019-08-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2019-08-28'
}
]});
calendar.render();
calendar.updateSize();
https://imgur.com/dfQncpa
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
How can I resize Fullcalendar on mobile? I want to display agendaWeek on desktop and tablet, however in mobile, I want display agendaDay. How can I do it?
I used eventAfterAllRender. The function will handle the checking if the user uses a mobile device, it is a mobile device then it will simply change the calendar view from the default agendaWeek into agendaDay using the changeView method.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultView: 'agendaWeek',
defaultDate: '2018-03-12',
events: [
{
title: 'All Day Event',
start: '2018-03-01',
},
{
title: 'Long Event',
start: '2018-03-07',
end: '2018-03-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-03-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-03-16T16:00:00'
},
{
title: 'Conference',
start: '2018-03-11',
end: '2018-03-13'
},
{
title: 'Meeting',
start: '2018-03-12T10:30:00',
end: '2018-03-12T12:30:00'
},
{
title: 'Lunch',
start: '2018-03-12T12:00:00'
},
{
title: 'Meeting',
start: '2018-03-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2018-03-12T17:30:00'
},
{
title: 'Dinner',
start: '2018-03-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2018-03-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2018-03-28'
}
],
eventAfterAllRender: function(view) {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('#calendar').fullCalendar('changeView', 'agendaDay');
} //IF MOBILE CHANGE VIEW TO AGENDA DAY
}
});
});
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css'>
<div id='calendar'></div>
I am working on Fullcalendar selectable jquery. I need to use it in wordpress. I have created a template file and call the calendar div in template file and include css files "fullcalendar.css" and "fullcalendar.print.css" in header and "moment.min.js" and "fullcalendar.min.js" in footer. It is only showing calendar without any css effect and not working selectable event. Files are included correctly and not showing any javascript error. I am using this fullcalendar script. I have tried to deactivate all plugins.
jQuery(document).ready(function($) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-08-05',
theme: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:'); alert(title);
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2016-08-09'
},
{
title: 'Long Event',
start: '2016-08-07',
end: '2016-08-15'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-06-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-06-16T16:00:00'
},
{
title: 'Conference',
start: '2016-06-11',
end: '2016-06-13'
},
{
title: 'Meeting',
start: '2016-06-12T10:30:00',
end: '2016-06-12T12:30:00'
},
{
title: 'Lunch',
start: '2016-06-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-06-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-06-12T17:30:00'
},
{
title: 'Dinner',
start: '2016-06-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2016-06-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-06-28'
}
]
});
});
My issue has been resolved.I was adding "fullcalendar.print.css" after "fullcalendar.min.css". When i commented "print.css" file then it started working fine.