MonkeyBusiness
MonkeyBusiness

Reputation: 593

Loop dates and add object if not excist in JSON data

I need to create calendar view with fullcalendar.io. To use calendar I need to create a JSON like this:

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.

I need to put price at calendar from every date from period_start to period_end, but for some prices I have values in database and for other I dont have so I need to use standar price (etc.$50)...

SO I have period_start and period_end and I get some data from database but now I need to create an JSON with objects for dates which are not in database so I create code:

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

        });
};

And now this code work in Chrome: enter image description here

But in FireFox I get this: enter image description here

Please look at 1.2.3. February where I have data from database. You will see the changes.

SO why this code work in Chrome and dont work in Firefox? What is a problem? Is there a better solution to solve this problem?

Upvotes: 2

Views: 52

Answers (1)

charlietfl
charlietfl

Reputation: 171679

SO why this code work in Chrome and dont work in Firefox?

Because the date strings provided are not valid and Firefox will transpose those to invalid date when passed to new Date(). Chrome however does parse them but this is not expected behavior cross browser

Send valid ISO strings from server or any format recommended in plugin docs

From fullcalender docs:

When specifying Event Objects for events or eventSources, you may specify a string in IETF format (ex: "Wed, 18 Oct 2009 13:00:00 EST"), a string in ISO8601 format (ex: "2009-11-05T13:15:30Z") or a UNIX timestamp.

Upvotes: 2

Related Questions