I am trying to fix the timezones for the calendar. It sends to the django server the times as an ISO format with the offsets as the timezone that the user selects at the dropdown menu and saves it. It is saved in the server correctly. But upon loading it into the calendar, it seems to interpret it as actually 5 hours ahead (America/Chicago CST time) instead of the time format as 00:00:00 that was input originally. And yes the offset is -5.
I've already tried removing the timeZone option in the fullcalendar variable and that didn't do anything.
#calendar.html
var calendar = $("#calendar").fullCalendar({
// timeZone: $("#id_timezone").val(),
timeZone: "UTC", #UTC is just for testing purposes
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay",
},
events: "/all_events",
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true,
eventDurationEditable: true,
select: function (start, end, allDay) {
var title = prompt("Enter Event Title");
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
type: "GET",
url: "/add_event",
data: {
title: title,
start: start,
end: end,
timezone: $("#id_timezone").val(),
},
dataType: "json",
success: function (data) {
calendar.fullCalendar("refetchEvents");
alert("Added Successfully " + start);
},
error: function (data) {
alert(
"There is a problem!!! " + start + $("#timezone").val()
);
},
});
}
},
eventResize: function (event) {
var start = $.fullCalendar.formatDate(
event.start,
"Y-MM-DD HH:mm:ss"
);
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
type: "GET",
url: "/update",
data: {
title: title,
start: start,
end: end,
id: id,
timezone: $("#id_timezone").val(),
},
dataType: "json",
success: function (data) {
calendar.fullCalendar("refetchEvents");
alert("Event Update");
},
error: function (data) {
alert("There is a problem!!!");
},
});
},
eventDrop: function (event) {
var start = $.fullCalendar.formatDate(
event.start,
"Y-MM-DD HH:mm:ss"
);
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
type: "GET",
url: "/update",
data: {
title: title,
start: start,
end: end,
id: id,
timezone: $("#id_timezone").val(),
},
dataType: "json",
success: function (data) {
calendar.fullCalendar("refetchEvents");
alert("Event Update");
},
error: function (data) {
alert("There is a problem!!!");
},
});
},
eventClick: function (event) {
$("#eventModal").modal("show");
$("#modalTitle").val(event.title);
const dayStart = $.fullCalendar.formatDate(event.start, "Y-MM-DD");
const dayEnd = $.fullCalendar.formatDate(event.end, "Y-MM-DD");
var timeStart = $.fullCalendar.formatDate(event.start, "HH:mm:ss");
var timeEnd = $.fullCalendar.formatDate(event.start, "HH:mm:ss");
$("#dayStart").val(dayStart);
$("#dayEnd").val(dayEnd);
$("timeStart").val(timeStart);
$("timeEnd").val(timeEnd);
$("#desc").val(event.desc);
$("#saveEvent").on("click", function () {
var id = event.id;
$.ajax({
type: "GET",
url: "/updateEvent",
data: {
id: id,
title: $("#modalTitle").val(),
dayStart: $("#dayStart").val(),
dayEnd: $("#dayEnd").val(),
timeStart: $("#timeStart").val(),
timeEnd: $("#timeEnd").val(),
desc: $("#desc").val(),
timezone: $("#id_timezone").val(),
},
dataType: "json",
success: function (id) {
calendar.fullCalendar("refetchEvents");
alert("Event Updated");
},
error: function (data) {
alert("There is a problem!!! " + id);
},
});
});
$("#removeBtn").on("click", function () {
var id = event.id;
$.ajax({
type: "GET",
url: "/remove",
data: { id: id },
dataType: "json",
success: function (data) {
calendar.fullCalendar("refetchEvents");
alert("Event Removed");
},
error: function (data) {
alert("There is a problem!!!");
},
});
});
},
});
#views.py
def all_events(request):
user = request.user.id
user_events = Events.objects.filter(user=user)
program_events = Events.objects.filter(user__isnull=True)
out = []
tz = afbUsers.objects.get(pk=user)
timezone = pytz.timezone(tz.timezone)
for event in user_events:
# start = event.start.strftime('%Y-%m-%d %H:%M:%S')
# print(start)
# start = parser.parse(start)
# start = start.astimezone(timezone)
# print(start)
# end = event.end.strftime('%Y-%m-%d %H:%M:%S')
# end = parser.parse(end)
# end = end.astimezone(timezone)
out.append({
'title': event.name,
'id': event.id,
'start': event.start.strftime("%m/%d/%Y, %H:%M:%S"),
'end': event.end.strftime("%m/%d/%Y, %H:%M:%S"),
})
# for event in program_events:
# start = event.start
# start = start.astimezone(utc_timezone)
# end = event.end
# end = end.astimezone(utc_timezone)
# out.append({
# 'title': event.name,
# 'id': event.id,
# 'start': start.strftime("%m/%d/%Y, %H:%M:%S"),
# 'end': end.strftime("%m/%d/%Y, %H:%M:%S"),
# })
return JsonResponse(out, safe=False)
EDIT: I am providing specific worked data examples.
// data example
{
"id": 1,
"user": 42, // This should be the ID of an existing user in the afbUsers table
"name": "Community Meetup",
"start": "2024-04-26T18:00:00Z",
"end": "2024-04-26T20:00:00Z",
"desc": "A gathering for the local community to discuss upcoming projects and initiatives."
}
Figured it out by initializing the calendar correctly according to the version of the CDN I was using. I corrected to the latest version 6.
<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
});
calendar.render();