Question

我需要使用fullcalendar.io创建日历视图。要使用日历，我需要创建一个这样的JSON：

var db_data = [
  {
    "id": 5,
    "user_id": 1,
    "article_id": 5,
    "title": "",
    "start": "2016-03-25 15:18:46"
  },
  {
    "id": 4,
    "user_id": 1,
    "article_id": 5,
    "price": 55,
    "title": "",
    "start": "2016-03-15 15:18:46"
  } etc.

我需要将日期的价格从从period_start到period_end的每个日期，但是对于某些价格，我在数据库中有值，而对于其他我没有，所以我需要使用标准价格（等等50美元）...

所以我有了period_start和period_end，我从数据库中获取了一些数据，但是现在我需要为不在数据库中的日期创建一个带有对象的JSON，所以我创建了代码：

function fulljson (){
    var db_data;
    $.ajax({
                url: "http://localhost:8888/diving/{{$article->id}}", 
                type: "GET",
                async: true, 
                dataType: "json",
                success: function(data) {
                db_data = data;
                console.log(db_data);

    // declare variables
    var period_start = new Date('{{ date('Y-m-d', strtotime($article->from)) }}'),
        period_end = new Date('{{ date('Y-m-d', strtotime($article->to)) }}'),
        current_date = period_start,
        array_of_all_dates = [];

    // Create a populated array of dates
    while (current_date.getTime() <= period_end.getTime()) {
      array_of_all_dates.push(current_date);
      current_date = new Date(+current_date);
      current_date.setDate(current_date.getDate() + 1);
    }

    // Now loop over the array of populated dates and mutate, so something like
    array_of_all_dates = array_of_all_dates.map(function (date) {
      var found_in_db = db_data.filter(function (db_data) {
        return new Date(db_data.start.replace(" ", "T")).getTime() === date.getTime(); // I need to do this comparison better!
      });
      if (found_in_db.length > 0) {
        return found_in_db[0];
      }
      var new_object = {
        title: '',
        start: date,
        price: '{{$article->price}}'
      };
      console.log(new_object);
      return new_object;

    });
    console.log('result'+array_of_all_dates);
    drawCalendar(array_of_all_dates);
                }, 
                error: function (data) {
                console.log(data);
                console.log('ERROR');
                }      
    });

};

    $(document).ready(function() {
    fulljson();

    });

    function drawCalendar(data) {
             $('#calendar').fullCalendar({
            header: {
                left: 'prev today',
                center: 'title',
                right: 'next'
            },
            defaultDate: Date.now(),

            eventRender: function(event, element) {
            element.find("fc-event-container").remove();    
    element.find(".fc-content").remove();
    element.find(".fc-event").remove();
    var new_description =   
         '<div style="display:inline-flex; float:right;"><div class="col-md-6"style="margin-top:5px";><p class="price">' + event.price + 'e</p></div>';

    element.append(new_description);
} ,// allow "more" link when too many events
            events: data,
            loading: function(bool) {
                $('#loading').toggle(bool);
            }
    }

        });
};

现在此代码可在Chrome中使用：

但是在FireFox中，我得到了这个：

请看1.2.3。二月我从数据库获得数据。你会看到变化。

那么为什么这段代码在Chrome中有效并且在Firefox中不起作用？有什么问题？有没有更好的解决方案来解决这个问题？

Answer 1

那么为什么这段代码在Chrome中有效并且在Firefox中不起作用？

因为提供的日期字符串无效，Firefox会在传递给invalid date时将这些字符串转换为new Date()。但是，Chrome会对它们进行解析，但这不是跨浏览器的预期行为

从服务器发送有效的ISO字符串或插件文档中推荐的任何格式

来自fullcalender docs：

为事件或eventSources指定事件对象时，您可以指定IETF格式的字符串（例如：“Wed，2009年10月18日13:00:00 EST”）， ISO8601格式的字符串（例如：“2009-11-05T13：15：30Z”）或UNIX 时间戳。

循环日期并添加对象，如果没有在JSON数据中激活

1 个答案: