I want my calendar to have the repeating events on weekdays that start on the current day. I already added the events on weekdays but it also adds the events on past dates. events must only be added on current date onwards(weekdays)
<script>
var today = new Date(new Date().getFullYear(),new Date().getMonth() , new Date().getDate());
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'rrule','googleCalendar' ],
header: {
left: 'title',
right: 'today prev,next',
},
defaultDate: today,
businessHours: true,
editable: true,
events:
[
{
title: 'AM 500 Slots',
start: today,
daysOfWeek: [ 1, 2, 3, 4 ,5]
},
{
title: 'PM 500 Slots',
start: today,
daysOfWeek: [ 1, 2, 3, 4 ,5]
}
],
});
calendar.render();
});
</script>
I used this link here to generate my desired output.
Related
For some reason, our Fullcalendar with resources does not want to start on monday, it always starts on the current day that we are. According to the docs, we should use firstDay, it also states that :
If weekNumberCalculation is set to 'ISO', this option defaults to 1 (Monday).
Which we did in our case, but no changes. We also tried upgrading to a different version (all above 5) but to no avail.
We are using version v5.11.3 of Fullcalendar (premium).
Anyone that can point us in the right direction?
In the screenshot that I've added, you can see it start on today (friday 18/11/2022).
var calendarEl = document.getElementById('calendar2');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'xxx',
timeZone: 'UTC',
initialView: 'resourceTimelineWeek',
hiddenDays: [0, 6],
locale: 'nl-be',
weekNumberCalculation: "ISO",
droppable: true,
eventStartEditable: false,
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek'
},
views: {
resourceTimelineWeek: {
duration: {days: 7},
slotDuration: '24:00:00',
buttonText: "Week",
},
resourceTimelineDay: {
duration: {days: 1},
slotDuration: '24:00:00',
buttonText: "Dag"
}
},
editable: true,
events: {
url: 'xxx.php',
type: 'POST',
error: function () {
alert('there was an error while fetching events!');
}
},
refetchResourcesOnNavigate: true,
resources: {
url: 'xxx.php',
type: 'POST',
error: function () {
alert('there was an error while fetching events!');
}
}, eventReceive: function (info) {
var resourceid = info.event._def.resourceIds[0];
var date = info.event._instance.range.start.toLocaleString();
var employeeid = info.draggedEl.dataset.employeeid;
$.ajax({
type: "POST",
url: "xxx.php",
cache: false,
data: {
'resourceid': resourceid,
'date': date,
'employeeid': employeeid
},
dataType: 'json',
success: function (data) {
var response = eval(data);
info.revert();
if (response.success) {
refetch();
}
}
});
}, eventContent: function (arg) {
let divEl = document.createElement('div');
let htmlTitle = arg.event._def.extendedProps.html;
divEl.innerHTML = htmlTitle;
let arrayOfDomNodes = [divEl];
return {domNodes: arrayOfDomNodes}
}
});
calendar.render();
function refetch() {
//direct refetch doesn't work
calendar.refetchEvents();
}
I use Fullcalendar v 3.10.0 and I have a little bug with weekNumbers
Wrong numeration of weeks
For example v3.10.5 bug
$(function() {
$('#calendar').fullCalendar({
defaultView: 'month',
weekNumbers: true,
firstDay: 1,
defaultDate: "2022-01-01",
events: 'https://fullcalendar.io/api/demo-feeds/events.json'
});
});
https://codepen.io/serhii-danovsky/pen/GRxPjOw
And v 5.11.2 no bug
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
defaultView: 'month',
weekNumbers: true,
firstDay: 1,
initialDate: '2022-01-01',
events: 'https://fullcalendar.io/api/demo-feeds/events.json'
});
calendar.render();
});
https://codepen.io/serhii-danovsky/pen/qBoLaPP
How can I fix this
Without version update
You can try adding the option
weekNumberCalculation: 'ISO'
which seems to correct the numbering to how you wish
C# .net Core MVC fullcalendar.js
I have the JSON feed working great from my controller. I want to add a couple of custom fields to the JSON feed like description and type.
I can create manual events in the View Javascript and add all kinds of extra fields just fine. I'm trying to handle the same extra fields when they come from a url JSON feed. How can I change the object in the View javascript so that data is being stored?
Sample from JSON file:
[
{
"id": 2020,
"batch": "c8762027-91d6-4892-af45-9737e86cd1a8",
"type": "Schedule",
"date": "2022-02-17",
"title": "Schedule - 2020",
"description": "test",
"notes": null,
"color": "blue"
},
{
"id": 2021,
"batch": "45fe545f-a274-4e38-af85-6340c98ee4c0",
"type": "Schedule",
"date": "2022-03-01",
"title": "Schedule - 2021",
"description": "test",
"notes": null,
"color": "blue"
}
]
The events get created on the calendar with the correct ID, title, color, etc. .. all the standard fields. The description and type do not get filled.
From the View file
<script type="text/javascript">
let calendar = initCalendar();
function initCalendar() {
var calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
weekNumbers: true,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
eventClick: function (info) {
//alert('Title: ' + info.event.title + ' - ' + 'ID: ' + info.event.id);
document.getElementById('Title').innerHTML = info.event.title;
document.getElementById('Description').innerHTML = info.event.description;
$('#EventDetail').modal('show');
},
events: {
url: '#Url.Action("Calendar")'
}
});
calendar.render();
return calendar;
}
</script>
ends up showing
I figured it out. When the calendar receives the JSON stream, it will add non-standard fields to the extendeProps section automatically. So if you are sending in your stream a "description" field (which is not a standard field), it will be added to the extendedProps object.
When you need to reference those extra fields in the javascript, you need to reference extendedProps like below in the eventClick handler. For setting the "description" of my event to show in the body of my popup modal display, you reference the info.event.extendedProps.description.
<script type="text/javascript">
let calendar = initCalendar();
function initCalendar() {
var calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
weekNumbers: true,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
eventClick: function (info) {
document.getElementById('Title').innerHTML = info.event.title;
document.getElementById('Description').innerHTML = info.event.extendedProps.description;
$('#EventDetail').modal('show');
},
events: {
url: '#Url.Action("Calendar")'
}
});
calendar.render();
return calendar;
}
</script>
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
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'.