I use fullcalendar to make a calendar with three view(dayGridMonth,timeGridWeek,listMonth) and they work fine except timeGridWeek that don't show events in proper time file, you can see in this image:
this is the code of calendar:
document.addEventListener('DOMContentLoaded', function() {
var calendarDiv = document.getElementById('calendar');
$.getJSON("/exams/events", function (data) {
var calendar = new FullCalendar.Calendar(calendarDiv, {
buttonText: {
today:'Hoy',
dayGridMonth:'Mes',
dayGridWeek: 'Semana',
listMonth: 'Lista'
},
firstDay: 1,
bootstrapFontAwesome:{
prev: 'fa-angle-left',
next: 'fa-angle-right'
},
themeSystem : 'bootstrap',
locales: 'es',
plugins: [ 'dayGrid', 'timeGrid', 'list', 'bootstrap'],
minTime: '08:00:00',
maxTime: '21:00:00',
slotDuration: '00:30:01',
nowIndicator: true,
displayEventTime: true,
timeFormat: 'H(:mm)',
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
hour12: true,
meridiem: false,//no funciona
omitCommas: true
},
defaultView: 'dayGridMonth',
header: {
left: 'dayGridMonth,timeGridWeek,listMonth',
center: 'title',
right: 'today prev next'
},
allDayText: '',
height: 'auto',
editable: true,
events: data
});
calendar.addEventSource('/releases');
calendar.render();
changeCalendarView();
});
});
the day and time format that I set is with his format :
SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSXXX")
Am I doing something wrong?
Do I have to change the date format?
Thanks for all!!
I had a similar issue and I solve it changing the dates format following the fullcalendar documentation: https://fullcalendar.io/docs/events-json-feed , in the dates part.
I'm using Django as Framework. I'm getting the response "reservations_api" from an API in Json fromat:
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarUI = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarUI, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'dayGridMonth,timeGridWeek,listMonth',
center: 'title',
right: 'today prev next'
},
events: [
{% for reservation in reservations_api %}
{
title: 'helloooooo ',
start: '{{ reservation.start_date }}',
end: '{{ reservation.end_date }}',
},
{% endfor %}
]
});
calendar.render();
calendar.setOption('locale', 'fr')
});
</script>
this is an example of the Json response data:
[
{
"id": 0,
"start_date": "2021-05-05T09:00:00",
"end_date": "2021-05-07T18:00:00",
"enterprise": {
"name": "Enterprise1",
"id": 1
},
"user": {
"id": 0,
"name": "user0"
}
},
{
"id": 1,
"start_date": "2021-05-06T09:00:00",
"end_date": "2021-05-07T18:00:00",
"enterprise": {
"name": "Enterprise1",
"id": 1
},
"user": {
"id": 0,
"name": "user0"
}
}
]
Related
I have a premium version of this product, I am using the generic code they post on the site for this example. I have this code, which appears to be the correct way to implement the adaptive plugin, but I do not see a way to print the calendar?
What am I missing here?
jQuery.ajax({
type: "GET",
url: "index.php?option=com_ajax&plugin=getEmpData&format=json&ser="+ser+"&m_id="+m_id+"&formid="+formid+"&fdate="+fdate+"&tdate="+tdate,
success: function(data)
{
if (!data.data['0']) {
jQuery("#print-btn").hide();
jQuery("#geted-bschart").html('');
jQuery("#geted-results").html('No Data exist');
} else {
jQuery("#geted-results").html("");
const getEmpData = JSON.parse(data.data['0']);
let bs = getEmpData['0'];
getEmpData.shift();
var calendarEl = document.getElementById('geted-results');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
initialView: 'dayGridMonth',
views: {
dayGridMonth: {
type: 'dayGrid',
duration: { months: mths },
monthMode: true,
fixedWeekCount: false,
}
},
plugins: [
adaptivePlugin
],
headerToolbar: {
left: '',
center: 'title',
right: ''
},
initialDate: fdtArray['2']+'-'+fdtArray['0']+'-'+fdtArray['1'],
editable: false,
selectable: true,
businessHours: true,
dayMaxEvents: true,
events: getEmpData
});
jQuery("#geted-bschart").html(bs.calc);
calendar.render();
jQuery("#print-btn").show();
if (jQuery( ".res-legends" ) && jQuery( ".res-legends" ).length) {
jQuery(".res-legends").remove();
}
jQuery(lhtml).insertAfter(".fc-header-toolbar");
}
jQuery('#getEmpDataForm input, #getEmpDataForm button').prop('disabled', false);
},
error(xhr,status,error,data)
{
jQuery('#getEmpDataForm input, #getEmpDataForm button').prop('disabled', false);
}
});```
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>
I am updating my Fullcalendar install to V4. I am feeding mine via JSON and I have HTML (some FontAwsome Icons) in my event title. Here is my old V3 code to render my elements:
$(function() {
$('#calendars').fullCalendar({
events: '/activities/calendar.json',
contentHeight: 750,
displayEventTime: false,
header: {
left: '',
center: 'title',
right: 'today prev,next'
},
businessHours: {
dow: [1, 2, 3, 4, 5]
},
handleWindowResize: true,
eventLimit: 2,
eventLimitClick: 'popover',
eventRender: function(event, element) {
element.find('.fc-title').html(event.title);
}
});
});
The eventRender: is what fails. The new docs don't clearly explain how I my convert this to the new version. With this code in place my calendar simply fails to load with json parse error in the console. If I remove it it works but my HTML is rendered as plain text. I am sure I am missing something obvious and easy here. My JS skill set is not that great.
As of FullCalendar v5 you can use eventContent.
document.addEventListener('DOMContentLoaded', function() {
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
{
"id": 1,
"title": "First Line<br>Second Line",
"start": "2022-06-04",
"end": null,
"allDay": true,
"editable": true,
"className": "badge-soft-warning",
}
],
eventContent: function( info ) {
return {html: info.event.title};
}
});
calendar.render();
})
After some stubmling around I found this:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('timeline');
var calendar = new FullCalendar.Calendar(calendarEl, {
events: '/activities/timeline.json',
plugins: [ 'resourceTimeline', 'interaction' ],
header: {
left: 'prev,today,next',
center: 'title',
right: 'resourceTimelineWeek,resourceTimelineMonth,resourceTimelineYear, '
},
eventRender: function(info) {
info.el.querySelectorAll('.fc-title')[0].innerHTML = info.el.querySelectorAll('.fc-title')[0].innerText;
}
});
calendar.render();
});
I am open to alternate cleaner answers.
I am importing here a from a JSON with this structure:
{
"title": "M 11 Zoe Weihnachtskurs ",
"klasse": "Klasse B",
"color": "Ebreichsdorf",
"standort": "Ebreichsdorf",
"start": "2020-01-02T08:00:00",
"end": "2020-01-02T09:40:00",
"description": "Theorie B 11"
}
All is working fine and i am seeing my events with their respective times and title, but i would need the standort to be displayed too.
I was reading the documentation and tried to initiate this like:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('steinmonth');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: [ 'dayGrid', 'timeGrid' ],
defaultView: 'dayGridMonth',
weekNumberCalculation: 'ISO',
hiddenDays: [ 0 ],
views: {
dayGrid: {
// options apply to dayGridMonth, dayGridWeek, and dayGridDay views
displayEventEnd: true,
titleFormat: { day: 'numeric', month: 'short' },
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
meridiem: false
}
},
timeGrid: {
// options apply to timeGridWeek and timeGridDay views
},
week: {
// options apply to dayGridWeek and timeGridWeek views
},
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,timeGridWeek',
},
eventSources: [
{
url: 'https://arcanas.at/wp-content/plugins/steincal/steinmonth.json',
method: 'POST',
title: 'name',
start: 'start',
end: 'end',
extendedProps: {
standort: 'standort',
color: 'color',
description: 'description'
},
color: 'white',
textColor: 'black'
}
],
eventRender: function (info) {
console.log(info.event.extendedProps)
if ( event.standort ) {
element.find('.fc-title').append('<br />' + event.standort);
//element.find('.fc-content').append('<span class="fc-standort">' + event.standort + '</span>');
}
},
});
calendar.setOption('locale', 'de-at');
calendar.render();
});
and the console output is
{klasse: "Klasse B", standort: "Ebreichsdorf", description: "Theorie GW 03"}
So how do i append the standort value for every event to the object? There must be something i overlooked.
Oh, this was too simple - closing, but perhaps someone will find this useful:
eventRender: function(info) {
info.el.querySelector('.fc-title').innerHTML = info.event.title + "</br>" + info.event.extendedProps.standort;
},
The spec for the rrule plugin says that Until dates are Inclusive. I'm not seeing that. Am I mis-reading?
https://github.com/jakubroztocil/rrule
If given, this must be a Date instance, that will specify the limit of the recurrence. If a recurrence instance happens to be the same as the Date instance given in the until argument, this will be the last occurrence.
I have this test:
calendaring.testRecur = function(dayOrWeek){
var rruleDataWeekly = {
freq: 'WEEKLY',
interval: 1,
byweekday: [ 'MO', 'WE', 'FR' ],
dtstart: '2019-11-01T10:30:00',
until: '2019-11-15'
};
var rruleDataDaily = {
freq: 'DAILY',
interval: 1,
count: 5,
dtstart: '2019-11-04T09:30:00',
};
var rruleData = dayOrWeek === "day" ? rruleDataDaily : rruleDataWeekly;
var title = dayOrWeek === "day" ? "Test Daily" : "Test Weekly";
var newEvent = {
title: title,
duration: "00:45",
rrule: rruleData
};
calendaring.calendar.addEvent(newEvent);};
And this is my config for the calendar:
calendaring.calendar = new Calendar(calendarEl, {
events: '/myurl',
plugins: ['rrule', 'interaction', 'dayGrid', 'timeGrid', 'bootstrap', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay, listDay',
},
defaultView: 'timeGridWeek',
slotDuration: '00:15',
slotLabelInterval: '01:00',
minTime: '06:00',
maxTime: '21:00',
allDaySlot: false,
slotEventOverlap: false,
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
list: 'List',
},
themeSystem: 'bootstrap',
editable: true,
selectable: true,
droppable: true,
fixedWeekCount: false,
hiddenDays: [ 0, 6 ],
eventLimit: 6,
});
calendaring.calendar.render();};
The issue was I didn't have a time associated with my UNTIL. So, it assumes midnight, not 23:59:59. Phew. Thanks #ADyson for the help.
You can use the code below to show a day, daily, weekly, every two weeks and monthly events with a tooltip on mouse hover event.
In this example you can see how we can set up rrule in FullCalendar.
Visit here- https://stackoverflow.com/a/68770685/9673996