search

Serhioromano / bootstrap-calendar

Full view calendar with year, month, week and day views based on templates with Twitter Bootstrap.
http://bootstrap-calendar.eivissapp.com/
MIT License
3.02k stars 1.29k forks source link

Event loading on different date. #744

Open sazetret opened 6 years ago

sazetret commented 6 years ago

I fetching the data from PHP using Ajax method and then loading them. Following is my jquery code:

var options = {
    events_source: function(start, end, timezone) {
            console.log("The timezone is: "+timezone);
    var events = [];
            $.ajax({
                //url:      'events.json.php?from='+start.getTime()+'&to='+end.getTime()+'&search='+$("#search").val(),
                url:        base_url+'members/ajax_fetch_moving_date?from='+start.getTime()+'&to='+end.getTime(),
                dataType:   'json',
                type:       'GET',
                async:      false
            }).done(function(json) {
                if(!json.success) {
                    $.error(json.error);
                }
                if(json.result) {
                    events = json.result;

                }
            });
            return events;
    },
    view: 'month',
    tmpl_path: base_url+'plugins/event-calendar/tmpls/',
    tmpl_cache: false,
    day: '<?php echo date('Y-m-d');?>',
    onAfterEventsLoad: function(events) {
        if(!events) {
            return;
        }

        if(events.length > 0)
        {
            $('#job_month_count').text(events.length);
        }
        else
        {
            $('#job_month_count').text('0');
        }
    },
    onAfterViewLoad: function(view) {
        $('.page-header h3').text(this.getTitle());
        $('.btn-group button').removeClass('active');
        $('button[data-calendar-view="' + view + '"]').addClass('active');
        $('#job_month').text($('.page-header h3').text());
    },
    classes: {
        months: {
            general: 'label'
        }
    }
};

My application resides on a server whose timezone is "America/New_York". The application is a "Movers and Packers" management panel, and the events are saved based on New_York timezone. The employees of the system belong to different timezone. When the main admin is logging in from his system (which has local browser timezone as New_York), he sees the data accurately. But when the employees are logging in from different timezone, the event dates are on different dates. For example, an event is on "15th February 2018" on New York timezone (saved in DB as 15th Feb 2018). When an employee from India is logging in, he is seeing the event listed on 16th Feb 2018 (as per the Indian Standard Time) even though the Ajax function is fetching the date as "15th Feb". I want to load the events on the calendar based on New_York time, irrespective of the local timezone of the employees.

In the calendar.js file, I forcefully set the browser_timezone as "America/New_York" in the following script:

var browser_timezone = '';
try {
    if($.type(window.jstz) == 'object' && $.type(jstz.determine) == 'function') {
        browser_timezone = jstz.determine().name();
        if($.type(browser_timezone) !== 'string') {
            browser_timezone = '';
        }
    }
    browser_timezone = 'America/New_York';
}
catch(e) {
}

The code console.log("The timezone is: "+timezone); in the first code-snippet displays the timezone as "America/New_York". Yet, the events are loading inconsistently. How can I solve this issue?

ravulareddy commented 6 years ago

I am having a similar issue. server timezone is UTC, users are worldwide (need to display in UTC to maintain consistency). Let me know if you find a solution

Serhioromano commented 6 years ago

If you use browser TZ then server TZ have to be UTC. Because when browser gets data, it does not know which TZ it is. It asumes it is UTC and adds TZ shift. So if your server TZ is New York and browser TZ in New York, calendar will add New York shift to server time.

sazetret commented 6 years ago

Sorry for replying it this late. I had found a solution earlier, but due to some inconsistency in daily life I couldn't communicate here to provide a solution.

OK, so here is what I did in my javascript/jquery to make the call. When making the Ajax call, the code sends two parameters 'from' and 'to'. By default, it used to send number of seconds x 10^3. However, I formatted it a bit to send from & to as strings in 'Y-m-d H:i:s' format. Along with 'from' & 'to' parameters, the Ajax also sends 'timezone' which is the browser timezone.

events_source: function(start, end, timezone) {
    startTimeArray = start.split(" ");
    if(startTimeArray[1] == 'Jan')
        startNY = startTimeArray[3] + '-01-' + startTimeArray[2] + ' 00:00';
    if(startTimeArray[1] == 'Feb')
        startNY = startTimeArray[3] + '-02-' + startTimeArray[2] + ' 00:00';
    if(startTimeArray[1] == 'Mar')
        startNY = startTimeArray[3] + '-03-' + startTimeArray[2] + ' 00:00';
    if(startTimeArray[1] == 'Apr')
        startNY = startTimeArray[3] + '-04-' + startTimeArray[2] + ' 00:00';
    if(startTimeArray[1] == 'May')
        startNY = startTimeArray[3] + '-05-' + startTimeArray[2] + ' 00:00';
    if(startTimeArray[1] == 'Jun')
        startNY = startTimeArray[3] + '-06-' + startTimeArray[2] + ' 00:00';
    if(startTimeArray[1] == 'Jul')
        startNY = startTimeArray[3] + '-07-' + startTimeArray[2] + ' 00:00';
    if(startTimeArray[1] == 'Aug')
        startNY = startTimeArray[3] + '-08-' + startTimeArray[2] + ' 00:00';
    if(startTimeArray[1] == 'Sep')
        startNY = startTimeArray[3] + '-09-' + startTimeArray[2] + ' 00:00';
    if(startTimeArray[1] == 'Oct')
        startNY = startTimeArray[3] + '-10-' + startTimeArray[2] + ' 00:00';
    if(startTimeArray[1] == 'Nov')
        startNY = startTimeArray[3] + '-11-' + startTimeArray[2] + ' 00:00';
    if(startTimeArray[1] == 'Dec')
        startNY = startTimeArray[3] + '-12-' + startTimeArray[2] + ' 00:00';

    endTimeArray = end.split(" ");
    if(endTimeArray[1] == 'Jan')
        endNY = endTimeArray[3] + '-01-' + endTimeArray[2] + ' 00:00';
    if(endTimeArray[1] == 'Feb')
        endNY = endTimeArray[3] + '-02-' + endTimeArray[2] + ' 00:00';
    if(endTimeArray[1] == 'Mar')
        endNY = endTimeArray[3] + '-03-' + endTimeArray[2] + ' 00:00';
    if(endTimeArray[1] == 'Apr')
        endNY = endTimeArray[3] + '-04-' + endTimeArray[2] + ' 00:00';
    if(endTimeArray[1] == 'May')
        endNY = endTimeArray[3] + '-05-' + endTimeArray[2] + ' 00:00';
    if(endTimeArray[1] == 'Jun')
        endNY = endTimeArray[3] + '-06-' + endTimeArray[2] + ' 00:00';
    if(endTimeArray[1] == 'Jul')
        endNY = endTimeArray[3] + '-07-' + endTimeArray[2] + ' 00:00';
    if(endTimeArray[1] == 'Aug')
        endNY = endTimeArray[3] + '-08-' + endTimeArray[2] + ' 00:00';
    if(endTimeArray[1] == 'Sep')
        endNY = endTimeArray[3] + '-09-' + endTimeArray[2] + ' 00:00';
    if(endTimeArray[1] == 'Oct')
        endNY = endTimeArray[3] + '-10-' + endTimeArray[2] + ' 00:00';
    if(endTimeArray[1] == 'Nov')
        endNY = endTimeArray[3] + '-11-' + endTimeArray[2] + ' 00:00';
    if(endTimeArray[1] == 'Dec')
        endNY = endTimeArray[3] + '-12-' + endTimeArray[2] + ' 00:00';

    var events = [];
    $.ajax({
        url:        base_url+'members/ajax_fetch_moving_date',
        type:       'POST',
        data: {'from': startNY, 'to': endNY, 'timezone':timezone},
        dataType:   'json',
        async:      false
    }).done(function(json) {
        if(!json.success) {
            $.error(json.error);
        }
        if(json.result) {
            events = json.result;
        }
    });
    return events;
}

Now, the actual thing lies in the server scripting. In my app, I used PHP's CakePHP famework. I am fetching the data like this:-

$from = $this->request->data['from'];
$to   = $this->request->data['to'];
$brw_timezone = $this->request->data['timezone'];
$start = strtotime($from);
$end   = strtotime($to);

$from and $to values are like '2018-04-01 00:00:00' and '2018-05-01 00:00:00'. Irrespective of any region, every timezone has 12.00 AM, right?

$startDate = date('Y-m-d',strtotime($from));
$endDate = date('Y-m-d',strtotime($to));
$moving_dates = $this->Customer->find('all', array(
                    'conditions' => array(
                            'Customer.isDeposit' =>1,
                            'Customer.isCancel' =>0,
                            'Customer.buyer_id' =>$buyer_id,
                            'Customer.move_date >= ' => $startDate,
                            'Customer.move_date < ' => $endDate
                            ),
                    'order' => array('Customer.move_date' => 'DESC')));

Since the server timezone is America/New_York, the query would return data between 2018-04-01 00:00:00 and 2018-05-01 00:00:00. This data, when will be loaded on client side calendar, would show the data corresponding to the browser timezone. For example, event on 2018-04-03 23:00:00 at New York would be listed as 2018-04-04 09:30:00 on browsers of "Asia/Kolkata" timezone. There is a time difference between the two timezone. So the best way was to negate or add this time difference to the event time at the server side and send it back to client side. Since we can already send browser_timezone to server side via Ajax call, the conversion was easy for me:-

$dateTimeZoneBr = new DateTimeZone($brw_timezone);
$dateTimeZoneNY = new DateTimeZone("America/New_York");
$dateStartTimeBr = new DateTime($stringMoveTime, $dateTimeZoneBr);
$dateStartTimeNY = new DateTime($stringMoveTime, $dateTimeZoneNY);
$dateEndTimeBr = new DateTime($stringMoveEndTime, $dateTimeZoneBr);
$dateEndTimeNY = new DateTime($stringMoveEndTime, $dateTimeZoneNY);

$startTimeOffset = $dateTimeZoneBr->getOffset($dateStartTimeBr) - $dateTimeZoneNY->getOffset($dateStartTimeNY);
$endTimeOffset = $dateTimeZoneBr->getOffset($dateEndTimeBr) - $dateTimeZoneNY->getOffset($dateEndTimeNY);

$moving['start'] = intval(strtotime($stringMoveTime) - $startTimeOffset). '000';
$moving['end'] = intval(strtotime($stringMoveEndTime) - $endTimeOffset). '000';
$moving['start_24'] = $stringMoveTime;
$moving['end_24'] = $stringMoveEndTime;
$moving['start_send'] = $startDate;
$moving['end_send'] = $endDate;

$movingList[] = $moving;

Then I created the json, and sent it back:-

$response['success'] = 1; 
$response['result'] = $movingList; 
echo json_encode($response);

Since the adjusted data would be balanced or adjusted at the client side once again, the data will load up accurately and will create an impact that I am viewing the actual data of "America/New_York"