如何在 fullCalendar.io 中将 UTC 日期转换为用户时区答案

【问题标题】：How do I convert UTC date into user timezone in fullCalendar.io如何在 fullCalendar.io 中将 UTC 日期转换为用户时区
【发布时间】：2019-09-15 21:30:38
【问题描述】：

我有一个 UTC 格式的日期和时间，例如：

我的日历生成代码。我正在使用fullcalendar.io。

//for loop start
sessionCalendar.push(
    {
      title: `${course["course_name"]}`,
      start: start_date_time.split(" ").join("T"),
      end: end_date_time.split(" ").join("T"),
    },
)
//for loops end

如您所见，我在日期和时间的中间添加了T 以使其成为 UTC 格式。

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' ],
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  },
  defaultDate: '2019-04-12',
  navLinks: true, 
  editable: false,
  eventLimit: true,
  events: sessionCalendar,
  timeZone: timeZone // var timeZone = "Asia/Kolkata"
});

calendar.render();

在上面的代码中，我设置了动态的 timeZone 值。不过，我在 UTC 格式的屏幕截图中看到的日期和时间与 start_date_time 相同。

如何将 UTC 日期和时间转换为用户指定的时区？

根据评论。我在末尾添加了“Z”

【问题讨论】：

尝试在末尾添加一个“Z”以将日期解析为 UTC。 new Date( '2019-05-08T11:18:00' ) !== new Date( '2019-05-08T11:18:00Z' );。然后您可以从该 Date 对象中获取本地日期时间。
我添加但没有变化。日历仍显示相同的日期和时间。
猜你必须深入研究 fullcalendar 文档才能找到图书馆希望你设置时区的正确方式。 ://
是的，我也在阅读文档，如果有人知道出了什么问题，我也会在这里发布。无论如何感谢您的帮助。
只是为了我的理解你为什么要start_date_time.split(" ").join("T")？

标签： javascript jquery timezone fullcalendar momentjs

【解决方案1】：

我已经解决了这个问题，但不是真的。

在调用初始化日历之前，我将日期和时间转换为用户特定的时区。

datetime_utc: function (datetime) {
    return moment.utc(datetime, 'YYYY-MM-DD HH:mm:ss').clone().tz(timeZone).format('YYYY-MM-DD HH:mm:ss');
},

上述 moemnt 函数可以轻松地将日期和时间转换为用户特定的时区。我刚刚更新了时间。我还从 can 日历功能中删除了时区属性。

//for loop start
sessionCalendar.push(
    {
      title: `${course["course_name"]}`,
      start: gbl.datetime_utc(start_date_time),
      end: gbl.datetime_utc(end_date_time),
    },
)
//for loops end

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' ],
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  },
  defaultDate: '2019-04-12',
  navLinks: true, 
  editable: false,
  eventLimit: true,
  events: sessionCalendar,
});

calendar.render();

这仍然是非常不完整的答案。 Fullcalendar.io 代码应该可以完成这项工作。

【讨论】：

【解决方案2】：

function convertDateAccordingToTZ(dateString: string, timeZoneOffset: number = 0) {

const dateObj = new Date(dateString);
const calculatedOffset = dateObj.getTimezoneOffset() + (timeZoneOffset * 60);
const formattedTime = dateObj.valueOf() + (calculatedOffset * 60000);

return new Date(formattedTime);

}

【讨论】：

你能改进我的答案吗？因为我知道如何将 UTC 日期转换为用户特定的时区。我已经通过 moment.js 做到了，它工作正常。在这里，我需要用 UTC 日期时间指定时区，它应该会自动转换。但它没有发生。
我认为我们不应该添加 z 来假设它是 UTC 日期，它应该来自服务器端。
你是对的，你也可以在你身边分配z，尝试将我的函数转换日期传递给日历