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
Related
I am trying full calendar for the first time on an ASP.NET MVC page. for the timezone, I have tried using 'local', 'America/Chicago'( as well as America/New_York and America/Los_Angeles) and variations of UTC all to no avail. When it has timezone: 'local' every event will show 2 hours after the start of each event, so an event at 11am will say 1pm. UTC is worse it is 8 hours off then. How do I fix this??
Here is the code
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/fullcalendar.js"></script>
<script>
$(document).ready(function () {
$('#coverage').click(function () {
$('#Map').show();
});
$('#close').click(function () {
$('#Map').hide();
});
var events = [];
$.ajax({
type: "GET",
url: "/Home/GetEvents",
success: function (data) {
$.each(data, function (i, evt) {
events.push({
title: evt.Title,
start: evt.Start,
id: evt.ID
});
});
GenerateCalendar(events);
}
});
function GenerateCalendar(events) {
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar({
header: {
right: '',
center: '',
left: ''
},
theme: true,
timezone: 'local',
editable: false,
defaultDate: '#Convert.ToDateTime(ViewBag.EventDate).ToShortDateString() ',
allDaySlot: false,
selectable: true,
slotMinutes: 15,
events: events,
eventClick: function (calEvent) {
window.location = '/MonthlyEvents/Details/' + calEvent.id;
}
});
}
});
</script>
I'm doing some tests with the FullCalendar tool and I have an idea but can't find how to do it.
I'm playing with this demo from the ListView doc page : https://codepen.io/pen?editors=0010
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'listDay',
headerToolbar: {
left: 'title',
center: '',
right: ''
},
events: 'https://fullcalendar.io/api/demo-feeds/events.json'
});
calendar.render();
});
Is it possible to load the "listDay" on a specific day instead of the actual day ?
So the solution is to add an initialDate:'' in the parameters
Thank you #ADyson
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 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.
I have inserted some new functions in my js but dayClick and eventClick don't work. The calendar is able to load properly though.
Any idea why the dayclick and eventclick in the following code is not working?
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: '',
right: 'agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
allDayDefault: false,
allDaySlot: false,
firstHour: 9,
defaultView: 'agendaWeek',
dayClick: function(date, allDay, jsEvent, view) {
calendar.fullCalendar('gotoDate', date);
},
eventClick: function(calEvent, jsEvent, view) {
window.location = "http://www.domain.com?start=" + calEvent.start;
},
select: function(start, end) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end
},
false // make the event "stick"
);
var startDateString = $.fullCalendar.formatDate(start, 'yyyy-MM-dd hh:mm');
var endDateString = $.fullCalendar.formatDate(end, 'yyyy-MM-dd hh:mm');
$.ajax({
type: 'POST',
url: '{url}ajaxpost/add',
data: {
startDate: startDateString,
endDate: endDateString,
eventTitle: title
},
dateType: 'json',
success: function (resp) {
calendar.fullCalendar('refetchEvents');
}
});
}
calendar.fullCalendar('unselect');
},
editable: true,
events: "{url}ajaxget/data",
});
});
You cannot use the "select" callback and the "dayClick" callback together as there is a conflict between the two. You can use datepicker to accomplish the gotoDate function to accomplish the same thing.
http://weblogs.asp.net/gunnarpeipman/archive/2010/02/02/linking-jqueryui-datepicker-and-fullcalendar.aspx
As for the eventClick Im not sure why it is not working, but it is easier to place the url in the database the call it in the events and just set it as the property "url: www.somesite.com/sdfjkiwe"
As a side note, It would probably wor better if you didn't use renderEvent to display your event. Try using the event function found here to use your ajax call within it.
http://arshaw.com/fullcalendar/docs/event_data/events_function/