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

时间:2019-04-26 11:11:44

标签: javascript jquery timezone fullcalendar momentjs

我有UTC格式的日期和时间,例如:

event start and end time

我的日历生成代码。我正在使用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值。不过,我在屏幕截图中看到的日期和时间与start_date_time相同,都是UTC格式。

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

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

UTC timezone

2 个答案:

答案 0 :(得分: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代码应该可以完成这项工作。

答案 1 :(得分:0)

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);

}