I need to reference an fullcalendar object – to change contents or options after intialisation - , but I always get the error message.
I first tried the javascript initialisation and then the jQuery version. I've tried "calendar.refech()" and "calendar.fullcalendar.refetch()" and "$.(#calendar)('refetchEvents')"
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
$(function() {
$('#calendar').fullCalendar({
plugins:
[ 'interaction', 'dayGrid', 'timeGrid' ,'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
locale: 'de',
defaultDate: heute,
{…}
editable: true,
eventLimit: true,
events: 'load.php',
})
});
});
$('#calendar').getOption('locale');
The last line in code produces the errror: "Uncaught TypeError: $(...) is not a function
As noted in your code, calendarEl is initialized but never used.
Basically, you can initialize the main Calendar object out of eventListener DOMContentLoaded, and utilize it as global within that page like the following code:
var myCalendar;
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var myCalendar = new FullCalendar.Calendar(calendarEl, {
plugins:
[ 'interaction', 'dayGrid', 'timeGrid' ,'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
locale: 'de',
defaultDate: heute,
{…}
editable: true,
eventLimit: true,
events: 'load.php'
});
myCalendar.render();
});
The initialization of Calendar object is provided in this link.
Related
So my university have this activity calender in their students portal but it is quite messy, I find this in the page
<script>
$(function () {
/* initialize the calendar
-----------------------------------------------------------------*/
var JsonData = [{"Semester":"Fall 2020","title":"CS602: Assignment# 1","start":"2020,11,27","end":"2020,12,05","backgroundColor":"linea ...
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
events: JsonData,
editable: false,
droppable: false
});
});
</script>
Is there a way to get that JSON in my chrome extension so I can do something with it there? Thanks in advance!
I struggle to activate a resource label render hook. It works perfectly in the provided example and I've tried to mimic this. However, had no success. No errors, nothing crushed. It's just not active. Here's my JS calendar setup file:
document.addEventListener('DOMContentLoaded', function() {
//Initialize calendar
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source', //hide lices=nc=se warning
plugins: [ 'resourceTimeline', 'bootstrap', 'interaction' ], //connect plugins to page
defaultView: 'resourceTimelineMonth', //define timeline view
editable: true, //enable draggable events
droppable: true, //it allows things to be dropped onto the container
resourceGroupField: 'group', //grouping
resourceOrder: 'Projects, Personnel', //order of resources
resourceAreaWidth: '13%', //resource column width
resourceLabelText: 'Projects/Personnel', //resource label
resourcesInitiallyExpanded: true,
resourceLabelDidMount: function(arg) {
arg.el.addEventListener('click', function() {
console.log(arg)
})
},
//resources feeding
resources: {
url: 'scheduler/resources',
method: 'GET'
},
//events feeding
events: {
url: 'scheduler/events',
method: 'GET'
},
defaultTimedEventDuration: '24:00', //deafult event duration
weekNumberCalculation: 'ISO', //first day of week Monday
//header layout
header: {
left: 'prev,next today ',
center: 'title',
right: 'resourceTimelineMonth, resourceTimelineYear,'
},
//footer
footer: true,
footer: {
},
height: 'auto', //calendar window size (including header and footer)
//text on standard buttons
buttonText: {
today: 'Today',
month: 'Month',
year: 'Year'
},
});
calendar.render();
});
The calendar is rendered using the Express framework. Perhaps there's a simple line that I've just missed. Very much appreciate any help.
Here's my v.5 scheduler setup file:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'resourceTimelineMonth',
slotMinWidth: 35,
nowIndicator: true,
editable: true,
droppable: true,
resourceGroupField: 'group',
resourceOrder: 'Projects, Personnel',
resourceAreaWidth: '13%',
resourcesInitiallyExpanded: true,
resourceAreaHeaderContent: 'Projects/Personnel',
resourceLabelDidMount: function(arg) {
arg.el.addEventListener('click', function() {
console.log(arg)
})
},
resources: {
url: 'scheduler/resources',
method: 'GET'
},
events: {
url: 'scheduler/events',
method: 'GET'
},
defaultTimedEventDuration: '24:00',
weekNumberCalculation: 'ISO',
headerToolbar: {
start: 'prev,next today',
center: 'title',
end: 'resourceTimelineMonth resourceTimelineYear'
},
height: 'auto',
buttonText: {
today: 'Today',
month: 'Month',
year: 'Year'
},
});
calendar.render();
Two screenshots:
fullcalendar example In "resource-add-remove" example from fullcalendar site a cursor changes into hand pointer when hovering over a resource label and reacts on click.
codepen example In the codepen example the cursor remains inactive and does not respond.
In advance, excuse my English!
I've been trying to understand for several hours why changing the locales setting don't work in my code.
I would like to switch my calendar (from fullcalendar.io) in "Fr", so I put the right language .js file in a folder and tried to point my page on it.
Off, it does not take my modification in the code.
Do you have an idea or a track to propose to me?
I warn, I'm not necessarily really friend with the code in general even if I do the max ^^
Thank you!
Here's a part of my code:
<script src='./packages/core/locales/fr.js'></script>
document.addEventListener('DOMContentLoaded', function() {
var initialLocaleCode = 'fr';
var localeSelectorEl = document.getElementById('locale-selector');
var calendarEl = document.getElementById('calendar');
var calendar = $('#calendar').fullCalendar({
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
locale: initialLocaleCode,
buttonIcons: false,
weekNumbers: true,
navLinks: true,
editable: true,
eventLimit: true, // allow "more" link when too many events
events: "events.php",
Edit with the fix:
I finally deleted everything and redo my php page with the right code from FullCalendar.
I think, as you said, have mixed code from an older version with that from a newer version. So I took the basic script from the site FullCalendar and delivered what interests me!
document.addEventListener('DOMContentLoaded', function() {
var initialLocaleCode = 'fr';
var localeSelectorEl = document.getElementById('locale-selector');
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,list'
},
locale: initialLocaleCode,
buttonIcons: false,
weekNumbers: true,
navLinks: true,
editable: true,
eventLimit: true, // allow "more" link when too many events
events: "events.php",
Thank you all for your help!
May be you want to change the language in calendar.
Try:
lang: 'fr'
Be sure you have also inserted the right script for it. Arrange the path according to your folders:
<script src='fullcalendar/lang-all.js'></script>
Hi i'm trying to loop inside the jquery Fullcalendar events, but i don't know why this is not working :
var birthdaysList = #Html.Raw(Json.Encode(#ViewBag.birthdaysList));
$(document).ready(function () {
$('#calendar').fullCalendar({
lang: 'es',
header: {
left: 'title',
center: '',
right: 'prev,next today'
//right: 'month,agendaWeek,agendaDay'
},
eventLimit: true, // allow "more" link when too many events
events: //My loop here for title: birthdaysList.name , start birthdaysList.date
});
});
OK first of all, you can't do a loop inside envents: , you have to make an array and then call it from the envents: , like this:
var birthdaysList = #Html.Raw(Json.Encode(#ViewBag.birthdaysList));
var events = []; //The array
for(var i =0; i < birthdaysList.length; i++)
{events.push( {title: birthdaysList[i].name , start: birthdaysList[i].date})}
$(document).ready(function () {
$('#calendar').fullCalendar({
lang: 'es',
header: {
left: 'title',
center: '',
right: 'prev,next today'
//right: 'month,agendaWeek,agendaDay'
},
eventLimit: true, // allow "more" link when too many events
events: events
});
});
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?