Fullcalendar displays incorrect - javascript

Hi I'm using FullCalendar
With bootstrap 5 and Stimulus JS
connect() {
this.calendar = new Calendar(this.calendarTarget, {
plugins: [ dayGridPlugin, timeGridPlugin, listPlugin, bootstrap5Plugin],
themeSystem: 'bootstrap5',
height: 650,
width: 650,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
navLinks: true, // can click day/week names to navigate views
editable: true,
initialDate: '2018-01-12',
events: [
{
start: '2018-01-10T10:00:00',
end: '2018-01-12T16:00:00',
display: 'background'
},
]
});
this.calendar.render();
}
I added calendar div to modal form
After my modal opened I faced with this:
image
After I was resizing my browser calendar looked well.

myModal.addEventListener('shown.bs.modal', function() {
controller.calendar.render();
});
This helped resolve the issue. But the calendar appears only after opening the modal. What causes changes in height and looks so-so.

Related

FullCalendar specific event to stop dragging

I have some events which doesn't need to be dragged around only be fixed on the position and some would be draggable.
var calendar = new Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: "dayGridMonth,timeGridWeek,timeGridDay"
//right: "dayGridMonth"
},
businessHours: true, // display business hours
editable:false, //switching within calendar would stop
events: AllEvents,
droppable: false, // this allows things to be dropped onto the calendar
})
If i set editable:false it stops dragging all the events but i want only specific events to be stopped dragging. How can i do that .. ?
Found the solution to my problem.
{
title: 'This must be editable',
start: new Date('11/1/2011'),
editable:true //true or false can set draggable in it
}
Here is the Url for the solution.
Jquery FullCalendar change editable properties of particular event on a calendar

Disable and activate FullCalendar

I want to initially set the editable, selectable, droppable and events to false (or not), when the user clicks a button, retrieves the data successfully, then set them to true. I'm a newbie and I don't know how to handle it with js
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
height: function () {
return $(window).height() * 0.7;
},
allDaySlot: false,
defaultView: 'agendaWeek',
//Here is the part I want to add after receiving user submitted data
editable: true,
selectable: true,
droppable: true,
events: "...",

Sync FullCalendar With Another FullCalendar Same Page

Using FullCalendar I am able to display 2 calendars on the same page. Calendar1 has all the controls to switch views from Day, Week, Month, Year plus the arrows to go forward/backwards. Calendar2 is a listMonth with no controls showing. It works fine on load but I would like it to change when Calendar1 changes from month to month or year to year.
Is this possible? I haven't found anything that would allow me to change the listMonth when the month/year changes on Calendar1.
jQuery(document).ready(function () {
$('#calendar1').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month,listYear'
},
views: {
listYear: { buttonText: 'Year'}
},
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: "CalendarData.ashx",
eventColor: '#038ddd'
});
$('#calendar2').fullCalendar({
header: {
left: '',
center: '',
right: ''
},
views: {
listMonth: { buttonText: 'Month' }
},
defaultView: 'listMonth',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: "CalendarData.ashx",
eventColor: '#038ddd'
});
});
I had a need to implement this recently to sync a grid and list view. I came across this question, but the suggested comments no longer appear valid. Here is a simple solution I used.
This is the simple html container for both calendars.
<div>
<div id="calendarGrid"></div>
<div id="calendarList"></div>
</div>
Below is the javascript code to hook into the "datesSet" method that triggers as the user navigates through the calendar and sets the date for the "other" calendar to keep it in sync, including a date comparison to prevent an infinite loop.
var calendarElGrid = document.getElementById('calendarGrid');
var calendarElList = document.getElementById('calendarList');
var calendarGrid = new FullCalendar.Calendar(calendarElGrid, {
initialView: 'dayGridMonth',
datesSet: function (info) {
syncCalendar(calendarList, info.start);
}
});
calendarGrid.render();
var calendarList = new FullCalendar.Calendar(calendarElList, {
initialView: 'listMonth',
datesSet: function (info) {
syncCalendar(calendarGrid, info.start);
}
});
calendarList.render();
function syncCalendar(otherCalendar, startDate) {
if (otherCalendar.getDate().toDateString() != startDate.toDateString()) {
otherCalendar.gotoDate(startDate);
}
}
Solution is based off of v6.0.2 documentation here:
https://fullcalendar.io/docs/datesSet

Alignment issue with full calendar popover

Am re sizing the height of the full calendar to fit in my screen. And am also limiting the events displayed in month view. So, now when I click +'x'more button, event container popup is coming at the bottom of the screen.
If am not altering the height, event container popup is aligned properly.
Please let me know how to fix popup alignment issue when calendar height is re sized.
Below is my code and attached the screenshot of calendar view
$('#calendar').fullCalendar({
now: new Date(),
editable: false,
aspectRatio: 1.8,
height: 200,
selectable: true,
scrollTime: '00:00',
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
},
dayClick: function(date, jsEvent, view) {
var view = $('#calendar').fullCalendar('getView');
if (view.name == 'month') {
$('#calendar').fullCalendar('gotoDate', date._d.toISOString().slice(0, 10));
$('#calendar').fullCalendar('changeView', "timelineDay");
}
},
defaultView: 'timelineDay',
views: {
timelineThreeDays: {
type: 'timeline',
duration: {
days: 3
}
}
},
eventOverlap: false,
resourceAreaWidth: '25%',
resourceLabelText: 'Reservations',
resourceGroupField: 'building',
resources: resourcesList,
events: eventList,
eventLimit: true,
eventRender: function(event, element) {
element.find('.fc-title').append(' ' + event.statusCode);
},
});
screenshot

fullcalendar set slotDuration not working

i have a calendar working with the following code:
$( document).ready( function(){
$('#calendar').fullCalendar( {
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay' },
editable: true,
slotDuration: '00:15:00',
defaultView: 'agendaWeek',
eventLimit: true,
events: source
}
)}
Following this flddle, i tried to set the slotDuration to 15 min, but it's not working. It just uses the default 30 min.
The only hint i get is this error when i open the calendar on Chrome:
Failed to get text for stylesheet 37: No style sheet with given id found
Any idea of which might be the problem?

Categories