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.
Related
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
I'm trying to get popovers to display the event information using FulCalendar 3.9.0 JQuery 3.3.1 and Bootstrap 4.1.0. When I try replacing the following code:
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, '_blank', 'width=700,height=600');
return false;
}
as demonstrated by this online demo with:
eventRender: function(eventObj, $el) {
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},
The following code displays the events drawn from various Google Calendars without any issue before that change is made:
$(document).ready(function() {
// Initialise the main calendar instance
$('#fullcalendar-instance').fullCalendar({
googleCalendarApiKey: 'MyAPIkey',
eventSources: [
{
googleCalendarId: 'gCalID-1',
color: 'green', // an option!
textColor: 'black', // an option!
className: 'my-event-1'
},
{
googleCalendarId: 'gCalID-2',
color: 'blue', // an option!
textColor: 'black', // an option!
className: 'my-event-2'
},
{
googleCalendarId: 'gCalID-3',
color: 'orange', // an option!
textColor: 'black', // an option!
className: 'my-event-3'
}
],
header: {
left: 'prev,next today',
center: 'title',
right: 'prevYear,nextYear',
},
titleFormat: 'MMM YYYY',
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
bootstrapFontAwesome: {
close: 'fa-times',
prev: 'fa-angle-left',
next: 'fa-angle-right',
prevYear: 'fa-angle-double-left',
nextYear: 'fa-angle-double-right'
},
timezone: 'Europe/London',
defaultView: 'month',
themeSystem: 'bootstrap4'
})
});
No errors are displayed in the console as far as I can see.
It is just that all the calendar events fail to be displayed.
Any assistance would be appreciated.
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;
}
});
I'm using fullcalendar-2.6.0 and fullcalendar-scheduler-1.2.0.
Below is my code:
$('#calendar').fullCalendar({
resourceAreaWidth: 230,
now: '2016-02-15',
lang: 'fr',
editable: true,
aspectRatio: 1.5,
scrollTime: '00:00',
header: {
left: 'promptResource today prev,next',
center: 'title',
},
customButtons: {
promptResource: {
text: '+ room',
click: function() {
var title = prompt('Room name');
if (title) {
$('#calendar').fullCalendar(
'addResource',
{ title: title },
true // scroll to the new resource?
);
}
}
}
},
defaultView: 'timelineWeek',
views: {
timelineWeek: {
slotDuration: { days: 1 }
}
},
resourceLabelText: 'PK',
resources: [
{ id: 'a', title: '163+000' },
{ id: 'b', title: '164+000', eventColor: 'green' },
{ id: 'c', title: '165+000', eventColor: 'orange' },
{ id: 'd', title: '166+000' },
{ id: 'e', title: '167+000' },
{ id: 'f', title: '168+000', eventColor: 'red' },
{ id: 'g', title: '169+000' },
{ id: 'h', title: '170+000' },
{ id: 'i', title: '171+000' },
{ id: 'j', title: '172+000' },
{ id: 'k', title: '173+000' },
{ id: 'l', title: '174+000' }
],
events: [
{ id: '1', resourceId: 'b', start: '2016-02-15', end: '2016-02-16', title: 'event 1' },
{ id: '2', resourceId: 'c', start: '2016-02-15', end: '2016-02-17', title: 'event 2' },
{ id: '3', resourceId: 'd', start: '2016-02-16', end: '2016-02-17', title: 'event 3' },
{ id: '4', resourceId: 'e', start: '2016-02-17', end: '2016-02-18', title: 'event 4' },
{ id: '5', resourceId: 'f', start: '2016-02-18', end: '2016-02-19', title: 'event 5' }
]
});
The result:
I want to switch the axis
I nedd to have resources on the top and time slots on the left axis.
Thank you very much for your help.
Set the defaultView property to agendaDay.
for e.g.
defaultView: 'agendaDay';
I read the link you just sent me.
Below is my code:
$('#calendar').fullCalendar({
defaultView: 'week',
defaultDate: '2016-02-15',
now: '2016-02-16',
lang: 'fr',
editable: true,
selectable: true,
eventLimit: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'week'
},
views: {
week: {
type: 'agenda',
duration: { days: 7 },
groupByResource: true
}
},
//// uncomment this line to hide the all-day slot
allDaySlot: false,
events: [
{ id: '1', resourceId: 'a', start: '2016-02-16', end: '2016-02-17', title: 'event 1' },
{ id: '2', resourceId: 'a', start: '2016-02-18', end: '2016-02-19', title: 'event 2' },
{ id: '3', resourceId: 'b', start: '2016-02-18', end: '2016-02-20', title: 'event 3' },
{ id: '4', resourceId: 'c', start: '2016-02-18', end: '2016-02-19', title: 'event 4' },
{ id: '5', resourceId: 'd', start: '2016-02-17', end: '2016-02-18', title: 'event 5' }
],
resources: function (callBack) {
callBack([
{ id: 'a', title: '163+000', altTitle: '163+000' },
{ id: 'b', title: '164+000', altTitle: '164+000' , eventColor: 'green' },
{ id: 'c', title: '165+000', altTitle: '165+000' , eventColor: 'orange' },
{ id: 'd', title: '166+000', altTitle: '166+000' , eventColor: 'red' }
]);
},
resourceRender: function (dataTds, eventTd) {
console.log('resourcerender');
console.log(eventTd);
console.log(dataTds);
var textElement = eventTd.empty();
textElement.append('<b>' + dataTds.altTitle + '</b>');
},
});
Below is the result:
I want days on the left side not hours
The result is much better than before but I still need to have days on the left side, not hours. I don't need days on the top side.
Thank you again for your help.
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