the calendar shows the resources
Here is the code that generates the calendar
var calendarEl = document.getElementById('icalendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'resourceTimelineDay resourceTimeline2Day resourceTimeline3Day'
},
footerToolbar: {
left: 'today prev,next resourceTimelineDay resourceTimeline2Day resourceTimeline3Day',
center: '',
right: ''
},
initialView: 'resourceTimelineDay',
resourceAreaWidth: '15%',
slotMinTime: '08:00',
slotMaxTime: '21:00',
slotDuration: '00:20:00',
resourceAreaHeaderContent: 'Inspection Calendar',
resources: resources,
events: events,
resourceLabelDidMount: function (arg) {
arg.el.style.background = arg.resource.extendedProps.color;
},
})
calendar.render();
});
I see the json in the console, first array is the resource that shows and the second array is the events
Does anyone know why this would be invalid and not show the event?
I am super confused
Issue was the date didn't match what i was looking for
Related
I'm doing some tests with the FullCalendar tool and I have an idea but can't find how to do it.
I'm playing with this demo from the ListView doc page : https://codepen.io/pen?editors=0010
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'listDay',
headerToolbar: {
left: 'title',
center: '',
right: ''
},
events: 'https://fullcalendar.io/api/demo-feeds/events.json'
});
calendar.render();
});
Is it possible to load the "listDay" on a specific day instead of the actual day ?
So the solution is to add an initialDate:'' in the parameters
Thank you #ADyson
I am trying to show my google calendar schedule in my system using fullCalendar library. I had done all the steps as it is mentioned in the fullCalendar documentation. And it is working for week and month view. But for day view those schedule are not showing.
This is how I am integrating the calendar.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'googleCalendar','interaction', 'resourceDayGrid', 'resourceTimeGrid', 'bootstrap' ],
themeSystem: 'bootstrap',
defaultView: 'resourceTimeGridDay',
header: {
left: 'prev,next today',
center: 'title',
right: 'resourceTimeGridDay,timeGridWeek,dayGridMonth'
},
events: {
googleCalendarApiKey: 'I am giving my calendar api here',
googleCalendarId: 'giving calendar id here',
className: 'gcal-event'
}
});
calendar.render();
});
Version of my fullCalendar is 4.
I'm using fullcalendar with this select callback function in settings object:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
timeFormat: 'HH:mm',
slotLabelFormat:"HH:mm",
// slotDuration: '00:10:00',
allDayDefault: false,
editable: true
selectable: true,
select: function(start, end, jsEvent, view) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: moment(start).hour(12),
end: moment(end).hour(18),
editable: true
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
// $('div#event-editor').modal({ show: true });
});
The problem is that moment(end).hour(18) ads 18 hours to the end moment, causing an increased time until the event is finished. I need a function to effectively set the moment hour to '18' instead of '00'.
How can I show a description of Events in fullcalendar?
I have events that have a title and a description.
So how can I show the description?
When you add the title and description it will concatenate.
Using the below code, you can concatenate with the title:
eventRender: function (event, element, view) {
element.find('.fc-title').append('<div class="hr-line-solid-no-margin"></div><span style="font-size: 10px">' + event.description + '</span></div>');
},
Here is the working jQuery or JavaScript code.
I love Bootbox.js for showing message so I implemented that also here:
$(document).ready(function() {
var today_date = moment().format('YYYY-MM-DD');
console.log(today_date);
// $('#calendar').fullCalendar('gotoDate', today_date);
$('#calendar').fullCalendar({
theme: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
// right: 'month,basicWeek,basicDay'
},
// header: { center: 'month,agendaWeek' }, // Buttons for switching between views
defaultDate: today_date,
businessHours:
{
rendering: 'inverse-background',
dow: [0,1]
},
editable: false,
eventLimit: true, // Allow "more" link when too many events
events: myevents,
eventRender: function (event, element) {
element.attr('href', 'javascript:void(0);');
element.click(function() {
bootbox.alert({
message: 'Description : '+event.description,
title: event.title,
});
});
}
});
});
My fullcalendar has - "Month|Week|Day" view , I want to remove or hide the "Week" and "Day" views as we have been using only "Month" View.
Can you please tell me how to do this?
When you start fullcalendar, don't include agendayDay and agendaWeek. Something like
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month'
}
});
Update:
To get rid of the month button:
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: ''
}
});
right : false is working.
$('#calendar').fullCalendar({
header: {
left: 'prev,next ',
center: 'title',
right: false,
},
});