How to update the Fullcalendar in my function? - javascript

How to update the Fullcalendar in my function? (onClick, onSelect, function(), etc)
example https://codepen.io/liggth/pen/GRgjYqG?editors=1010
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
});
calendar.render();
});
function test(){
calendar.refetchEvents();
}
IN this case, I get the error:
Uncaught TypeError: calendar.refetchEvents is not a function

You should add property as dateClick and assign function in it. docs
var calendar;
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById('calendar');
calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
dateClick: function() {
alert('a day has been clicked!');
}
});
calendar.render();
});
function test() {
calendar.refetchEvents();
}

Related

FullCalendar.io extend event object from JSON events

I've been using an older version of fullcalendar and am having trouble recreating my calendars in the current version of fullCalendar.
I have seen the documentation and understand the extendedProp created in the event object, but I'm having trouble recreating this action from a JSON result of events.
Old fullCalendar v3.9
function DoCalendar() {
var URX = document.getElementById('url').value;
var URL = AppUrl + "JSON/GetCalendar/" + URX;
$('#Calendar').fullCalendar("destroy");
$('#Calendar').fullCalendar("render");
$('#Calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'basicWeek,month'
},
defaultView: 'month',
//defaultDate:
height: 'auto',
fixedWeekCount: false,
allDay: false,
allDaySlot: false,
displayEventTime: false,
navLinks: false,
eventLimit: false,
events: { url: URL },
eventColor: 'yellow',
eventTextColor: 'black',
eventRender: function (event, element) {
element.find('.fc-title').html(event.title);
event.eventColor = event.color;
$(element).popover({
title: event.start,
content: event.popover,
trigger: 'hover',
placement: 'auto',
html: true,
container: 'body'
});
}
})
New fullCalendar v5
function TestCalendar() {
var calendarEl = document.getElementById('calendario');
var teamId = document.getElementById('teamId').innerText;
var eventsURL = "/api/Calendar/GetTeamCalendar?id=" + teamId;
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: {
url: eventsURL,
error: function () {
$('#script-warning').show();
}
},
eventColor: 'yellow',
eventTextColor: 'black',
eventClick: function (info) {
alert('Event: ' + info.event.extendedProp);
},
eventRender: function (event, element) {
console.log(event.extendedProp);
}
});
calendar.render();
}
The current JSON result
[{"id":"436969","title":"Practice","start":"2020-10-31T22:29:00","end":"2020-10-31T22:40:00","someField":"the field"},
{"id":"955138","title":"Practice","start":"2020-10-31T03:15:00","end":"2020-10-31T04:15:00","someField":"the field"},
{"id":"985289","title":"Practice","start":"2020-11-02T17:37:00","end":"2020-11-02T17:42:00","someField":"the field"]
eventClick: function (info) {
alert('Event: ' + info.event.someField);
}
continues to return undefined
Any help is appreciated
According to documentation here,
https://fullcalendar.io/docs/event-object
You can get those details in object as below. it works for me.
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [{
"id": "436969", "title": "Practice", "start": "2020-10-31T22:29:00", "end": "2020-10-31T22:40:00", "someField": "the field"
},
{ "id": "955138", "title": "Practice", "start": "2020-10-31T03:15:00", "end": "2020-10-31T04:15:00", "someField": "the field" },
{ "id": "985289", "title": "Practice", "start": "2020-11-02T17:37:00", "end": "2020-11-02T17:42:00", "someField": "the field" }],
eventColor: 'yellow',
eventTextColor: 'black',
eventClick: function (info) {
alert('Event: ' + info.event.extendedProps["someField"]);
},
eventRender: function (event, element) {
console.log(event.extendedProp);
}
});
calendar.render();
});
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.2/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.2/main.css" rel="stylesheet"/>
<div id='calendar'></div>

Read a Json file through a json script and display it in a web page

I am a newbie to web and js programming so my issue might be simple.
I have found a piece code which allows me to create a calendar with all the rendez-vous in it.
The rendez-vous data are formatted into Json data and read through a JS script.
Here is the code :
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var data=
[
{
"title": "Rdv M.Ba",
"start": "2020-02-04T10:00:00"
},
{
"title": "Rdv M. Dia",
"start": "2020-02-07T16:00:00",
"end": "2020-02-07T16:15:00"
}
];
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2020-02-12',
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: data
});
calendar.render();
});
</script>
This way it is working but as soon as I replace the variable "data" in the script with that var rdv = require('./rdv.json'); (as you may have guessed rdv.json contains the exact same infos as the Json in var data with the same format) it does not display anything.
So could you tell me what is wrong here?
Thanks for your help
as pointed out in the comments require('./rdv.json') isn't standard javascript as found in the browser by default. You may be confused with nodejs or some other javascript framework.
A way to solve your question is adapted from here and is as follows:
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', './rdv.json', true);
xobj.onreadystatechange = function() {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
};
xobj.send(null);
}
Here we have created a function that can load the rdv.json file as real json. Since it is a callback function, you should be able use the data as follows:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
loadJSON(function(response) {
data = JSON.parse(response);
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2020-02-12',
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: data
});
calendar.render();
});
});
Hope this answer helps you!

FullCalendar.js get date range as string from select event

I am using FullCalendar.js to enable a user to select a single date or range of dates from a visual calendar like this.
The documentation specifies that I should implement the select function to capture the start date startStr and end date endStr of the user's selection.
Below is the code I thought would do this:
$('#calendar').fullCalendar({
selectable: true,
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
defaultDate: today,
navLinks: true,
eventLimit: true,
events: [],
select: function(selectionInfo) {
console.log(selectionInfo.startStr);
console.log(selectionInfo.endStr);
}
});
Output:
undefined
undefined
Clearly my approach is not correct. What am I doing wrong?
This does not answer why the OP code is not working.
However, for anyone else experiencing the same issue, here is a different implementation which serves as a working solution.
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
selectable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
dateClick: function(info) {
console.log(info.dateStr);
},
select: function(info) {
console.log(info.startStr);
console.log(info.endStr);
}
});
calendar.render();
I had similar issue, I was checking wrong documentation version (I am using v3) which select function is implemented as follow:
select: function(startDate, endDate) {
alert('selected ' + startDate.format() + ' to ' + endDate.format());
}

FullCalendar render events dynamic

I am working with Bootstarp v4.0 with FullCalendar.io I have created FullCalendar as below
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar, events = localStorage.reservedRooms ? JSON.parse(localStorage.reservedRooms) : []
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
//defaultDate: '2019-04-12',
weekNumbers: true,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: events
});
calendar.render();
});
Where I am putting events from localStorage
I want to load fullcalendar from jQuery button click but I cannot do it. I also tried to create separate HTML file and try to load that HTML file in div by
$.get but it never render. I also tried to insert events by calendar.addEventSource( source ) but that too not works.
My jQuery button click
$(document).ready(function() {
$('#checkAvailability').click(function(e) {
$.get(
'../Shared Documents/html/meetingRoom/meetingRoomSearchResult.html',
function(data) {
$('#dvResult').html(data)
})
})
})
Please help me load calendar dynamically.
Alter your ajax to return only the events( as json), initialize the calendar when the ajax was successful
var calendar;
$('#checkAvailability').click(function(e) {
$.get(
'../Shared Documents/html/meetingRoom/meetingRoomSearchResult.html',
function(events) {
if(calendar) calendar.destroy();
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
//defaultDate: '2019-04-12',
weekNumbers: true,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: events
});
calendar.render();
});
})
add the div to your main page
<div id='calendar'></div>

JavaScript Array Fill

I have a question regarding the next code, how can I fill the 'events' array dynamically, with a for / while ? ( I can't fill it manually due to the fact that there are a lot of datas )
Thank you
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
},
defaultDate: '2014-12-15',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Test',
start: '2014-12-17'
}
]
});
});
</script>
You can use IIFE (immediately-invoked function expression)
events: (function () {
var events = [];
for (var i = 0; i < 10; i +=1) {
// You can do here anything.
events.push({
title: 'Test' + i,
start: '2014-12-17'
});
}
return events;
})()
You can create an array variable and then use it when you initialize the calendar like so:
var events = [];
for(var i = 0; i < 10; i++) {
events.push({title: 'Test' + i, start: '2014-12-17'});
}
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
},
defaultDate: '2014-12-15',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: events
});

Categories

Resources