草庐IT

javascript - 全日历和时区。救命,我做错了

coder 2024-05-12 原文

不知何故我做错了。我在使用 Fullcalendar 时遇到了问题。我已经尝试将 ignoreTimezone 设置为 true 和 false,但这似乎无关紧要。它在下面的代码中有两个地方,因为我从文档中不确定它的位置。

我的数据源是一个隐藏的表单域。 FullCalendar 的数据通过添加 5 小时 (CDT) 进行调整。 inFullCalendar 的数据不会通过删除 5 小时进行调整。

在后端,我只是保存并返回 JSON 字符串而不对其进行处理(甚至解码)

Page Load:
  Data In: Empty, no data
  Data Edit: drag from noon to 2pm (CDT), then submit form
  Data Out: Use clientEvent to get data, and JSON.stringify to put into form field.
    [{"id":6844,"title":"Open","start":"2011-04-19T17:00:00.000Z","end":"2011-04-19T19:00:00.000Z","allDay":false}]

Page Load (after submitting form):
  Data In: Use JSON.parse to load data from hidden form field.  This is the incoming data, but the event is shifted to 5pm (CDT) in the control.  
    [{"id":6844,"title":"Open","start":"2011-04-19T17:00:00.000Z","end":"2011-04-19T19:00:00.000Z","allDay":false}]
  Data Out:  Without changing the control, it's now:
    [{"id":6844,"title":"Open","start":"2011-04-19T22:00:00.000Z","end":"2011-04-20T00:00:00.000Z","allDay":false}]

我这样设置 Fullcalendar:

// Fullcalendar for business hours page

jQuery(document).ready(function() {

  jQuery('#edit-submit').bind("click", business_hours_set);
  jQuery('#edit-preview').bind("click", business_hours_set);

  jQuery('#calendar').fullCalendar({

    // configure display
    header: {
      left: '',
      center: '',
      right: ''
    },
    ignoreTimezone: false,
    defaultView: 'agendaWeek',
    allDaySlot: false,
    firstHour: 8,

    // configure selection for event creation
    selectable: true,
    selectHelper: true,
    select: business_hours_add,

    // configure data source
    editable: true,
    eventSources: [
    {
      events: jQuery.parseJSON(jQuery('#fullcalendar_data').val()),
      color: '#992B0A',
      textColor: 'white',
      ignoreTimezone: false
    }
    ],

    // configure editing
    eventClick: function(calEvent) {
      business_hours_delete(calEvent.id);
    }
  });
  alert(jQuery('#fullcalendar_data').val());
});

function business_hours_add(startDate, endDate) {
  var calendar = jQuery('#calendar');
  var newid = Math.ceil(Math.random()*64000);
  calendar.fullCalendar('renderEvent',
  {
    id: newid,
    title: "Open",
    start: startDate,
    end: endDate,
    allDay: false
  },
  true // make the event "stick"
  );
  calendar.fullCalendar('unselect');
}

var business_hours_selectedId = -1;
function business_hours_delete(id) {

  business_hours_selectedId = id;

  jQuery( "#dialog-confirm" ).dialog({
    resizable: false,
    height:160,
    modal: true,
    buttons: {
      "Yes, delete!": function() {
        calendar = jQuery('#calendar');
        calendar.fullCalendar( 'removeEvents', business_hours_selectedId);
        jQuery( this ).dialog( "close" );
      },
      Cancel: function() {
        jQuery( this ).dialog( "close" );
      }
    }
  }, id);
}

function business_hours_set() {
  var data = jQuery('#calendar').fullCalendar( 'clientEvents' );

  // data is cyclical.  Create a new data structure to stringify.
  var ret = [];
  for(var i=0; i<data.length; i++) {
    var datum = {
      id: data[i].id,
      title: data[i].title,
      start: data[i].start,
      end: data[i].end,
      allDay: data[i].allDay
    }
    ret[i] = datum;
  }
  // stringify and return
  jQuery('#fullcalendar_data').val(JSON.stringify(ret));
  alert(JSON.stringify(ret));
}

我做错了什么?

提前致谢,迈克

最佳答案

您将 CDT 调整日期序列化为 UTC 日期(因此轮类 5 小时),因此当它们被读回时,它们会被重新调整为 CDT,依此类推。

因为没有办法在 JS 日期对象上设置时区,Fullcalendar 在内部将它们表示为 UTC 日期,但会根据输入时间调整时区偏移量。

$.fullCalendar.parseISO8601('2011-04-19T17:00:00.000-05:00');
// Tue Apr 19 2011 22:00:00 GMT+0000 (GMT)  <-- note time shift

这就是为什么当您序列化为 JSON 时,您会得到一个带有“Zulu”(UTC) 时区的字符串:

var dt = $.fullCalendar.parseISO8601('2011-04-19T17:00:00.000-05:00');
JSON.stringify( dt ); // "2011-04-19T22:00:00.000Z"

您需要将日期返回到您的时区。看起来 Fullcalendar 没有这个,所以你需要开始工作:

// detect local timezone offset
var localoffset = (new Date()).getTimezoneOffset();
// "unadjust" date
ret = new Date( ret.valueOf() + (localoffset * 60 * 1000) );

// serialize
function pad (n) { return String(n).replace(/^(-?)(\d)$/,'$10$2'); }
JSON.stringify( ret )
     // replace Z timezone with current
     .replace('Z', pad(Math.floor(localoffset / 60))+':'+ pad(localoffset % 60));

// should result in something like: "2011-04-21T19:00:00.000-05:00"

使用 Fullcalendar 可能有更好的方法来解决这个问题,但我不熟悉它。

代码未经测试:我住在格林威治标准时间,没有夏令时,真的不想为了看看它能正常工作而弄乱我的系统 (YMMW)。 :-)

关于javascript - 全日历和时区。救命,我做错了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5724142/

有关javascript - 全日历和时区。救命,我做错了的更多相关文章

  1. ruby - 没有轨道的 ActiveRecord 时区 - 2

    我在非Rails项目中使用ActiveRecord。在Rails中,我可以这样做:config.time_zone='EasternTime(US&Canada)'config.active_record.default_timezone='EasternTime(US&Canada)'但如果我不使用rails,我该如何设置时区? 最佳答案 ActiveRecord::Base.default_timezone='EasternTime(US&Canada)' 关于ruby-没有轨道的A

  2. ruby - 我的 Ruby IRC 机器人没有连接到 IRC 服务器。我究竟做错了什么? - 2

    require"socket"server="irc.rizon.net"port="6667"nick="RubyIRCBot"channel="#0x40"s=TCPSocket.open(server,port)s.print("USERTesting",0)s.print("NICK#{nick}",0)s.print("JOIN#{channel}",0)这个IRC机器人没有连接到IRC服务器,我做错了什么? 最佳答案 失败并显示此消息::irc.shakeababy.net461*USER:Notenoughparame

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 将 Logstash 中的时间戳时区转换为输出索引名称 - 2

    在我的场景中,Logstash收到的系统日志行的“时间戳”是UTC,我们在Elasticsearch输出中使用事件“时间戳”:output{elasticsearch{embedded=>falsehost=>localhostport=>9200protocol=>httpcluster=>'elasticsearch'index=>"syslog-%{+YYYY.MM.dd}"}}我的问题是,在UTC午夜,Logstash在外时区(GMT-4=>America/Montreal)结束前将日志发送到不同的索引,并且索引在20小时(晚上8点)之后没有日志,因为“时间戳”是UTC。我们已

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的? 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map,但任何事情都可能发生)首先要知道的是,这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  7. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss? - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中,html表单使用tinymce将“content”列设置为textarea字段。在首页,因为使用了tinymce,post.html.erb的代码需要用这样的原始方法来实现。.好的,现在如果我关闭浏览器javascript,这个文本区域可以在没有tinymce的情况下输入,也许用户会输入任何xss,比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中,但sanitize方法将相互过滤tinymce样式。例如

  8. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因,我必须为Firefox禁用javascript(手动,我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点? 最佳答案 是的,这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  9. ruby - Watir-Webdriver 是否支持点击目标为 javascript 的链接? - 2

    我是Ruby和Watir-Webdriver的新手。我有一套用VBScript编写的站点自动化程序,我想将其转换为Ruby/Watir,因为我现在必须支持Firefox。我发现我真的很喜欢Ruby,而且我正在研究Watir,但我已经花了一周时间试图让Webdriver显示我的登录屏幕。该站点以带有“我同意”区域的“警告屏幕”开头。用户点击我同意并显示登录屏幕。我需要单击该区域以显示登录屏幕(这是同一页面,实际上是一个表单,只是隐藏了)。我整天都在用VBScript这样做:objExplorer.Document.GetElementsByTagName("area")(0).click

  10. 网页设计期末作业,基于HTML+CSS+JavaScript超酷超炫的汽车类企业网站(6页) - 2

    🎉精彩专栏推荐💭文末获取联系✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主💂作者主页:【主页——🚀获取更多优质源码】🎓web前端期末大作业:【📚毕设项目精品实战案例(1000套)】🧡程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作(110套)】🌎超炫酷的Echarts大屏可视化源码:【🔰Echarts大屏展示大数据平台可视化(150套)】🔖HTML+CSS+JS实例代码:【🗂️5000套HTML+CSS+JS实例代码(炫酷代码)继续更新中…】🎁免费且实用的WEB前端学习指南:【📂web前端零基础到高级学习视频教程120G干货分享】🥇关于作者:💬历任研发工程师,技术组长,教学总监;

随机推荐