我正在尝试修复日历的时区。它将时间以 ISO 格式发送到 django 服务器，并将偏移量作为用户在下拉菜单中选择的时区并保存。它已正确保存在服务器中。但将其加载到日历中后，它似乎将其解释为实际提前 5 小时（美国/芝加哥 CST 时间），而不是最初输入的时间格式 00:00:00。是的，偏移量是-5。
我已经尝试删除 fullcalendar 变量中的 timeZone 选项，但这没有任何作用。
#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)
编辑：我提供具体的工作数据示例。
// 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."
}
通过根据我使用的 CDN 版本正确初始化日历来解决这个问题。我已更正到最新版本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();