jQuery全日历插件时区问题

Question

我正在使用完整的日历计划视图来显示房间预订。 除 TimeZone 外，一切正常。

我创建了一个具有以下日期和时间的事件：

开始日期： 2018-11-21 19:00:00.000
结束日期： 2018-11-21 20:00:00.000

但是，在日历中，事件以不同的时间显示。显示时间为早上 5:30 到早上 6:30

如何设置为印度时区或用户时区？

这是我的代码：

function LoadBookings() {

    var rooms = [];
    var events = [];

    var s = $("#hdnStudio").val();
    var u = $("#hdnUnit").val();
    var f = $("#hdnFloor").val();
    var r = $("#hdnRoom").val();

    if ($('#calendar').length > 0) {
        $.ajax({
            url: '/RoomBooking/Events',
            data: { studio: s, unit: u, floor: f },
            type: 'POST',
            dataType: 'json'
        }).done(function (result) {
            if (result != null) {

                // Get all Events
                $.each(result.events, function (i, v) {
                    if (v.IsAllDayEvent) {
                        events.push({
                            id: v.Id,
                            resourceId: v.RoomId,
                            start: moment(v.StartDate).format("YYYY-MM-DD"),
                            end: moment(v.EndDate).format("YYYY-MM-DD"),
                            title: v.Title
                        });
                    }
                    else {
                        events.push({
                            id: v.Id, resourceId: v.RoomId,
                            start: moment(v.StartDate).format("YYYY-MM-DDTHH:mm:ss"),
                            end: moment(v.EndDate).format("YYYY-MM-DDTHH:mm:ss"),
                            title: v.Title
                        });
                    }
                });

                // Get all Rooms
                $.each(result.rooms, function (i, v) {
                    rooms.push({
                        id: v.Id,
                        title: v.Name,
                        eventColor: v.EventColor
                    });
                });

                $('#calendar').fullCalendar({
                    schedulerLicenseKey: "GPL-My-Project-Is-Open-Source",
                    editable: false, // enable draggable events
                    aspectRatio: 1.8,
                    resourceAreaWidth: '15%',
                    slotEventOverlap: false,
                    minTime: "09:00:00",
                    maxTime: "23:00:00",
                    scrollTime: '09:30', // undo default 6am scrollTime
                    header: {
                        left: 'today prev,next',
                        center: 'title',
                        right: 'timelineDay,agendaWeek,month,listWeek'
                    },
                    defaultView: 'timelineDay',
                    resourceLabelText: 'Rooms',
                    height: 500,
                    resources: rooms,
                    events: events,
                    timezone: 'UTC',
                    dayClick: function (date, jsEvent, view, resourceObj) {
                        var selectedDate = moment(date);
                        if (moment().diff(selectedDate) <= 0) {
                            var url = "/RoomBooking/Create?roomId=" + resourceObj.id + "&sDate=" + date.format();
                            $("#room-booking-modal .modal-content").load(url, function () {
                                $("#room-booking-modal").modal({ show: true });
                            });
                        }
                    },
                    eventClick: function (calEvent, jsEvent, view) {
                        var url = "/RoomBooking/Edit?id=" + calEvent.id;
                        $("#room-booking-modal .modal-content").load(url, function () {
                            $("#room-booking-modal").modal({ show: true });
                        });
                    }
                });
            }
        });
    }
}

Answer 1

您可以在 fullcalendar "local" 中设置 timezone 属性，它将呈现客户端的时区。

如果您存储事件的时区信息，并且希望根据每个最终用户计算机的本地时区以不同方式显示事件，请使用此模式。

$('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay,listWeek'
    },
    timezone:'local', // you can set a time zone 'local'
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    selectable: true,
    eventLimit: true, // allow "more" link when too many events
    events: 'https://fullcalendar.io/demo-events.json',
    loading: function(bool) {
      $('#loading').toggle(bool);
    },
    eventRender: function(event, el) {
      // render the timezone offset below the event title
      if (event.start.hasZone()) {
        el.find('.fc-title').after(
          $('<div class="tzo"/>').text(event.start.format('Z'))
        );
      }
    }
  });

请查看documentation。

这是一个live 示例。