Full Calendar Dates are different in different countries

Question

I am using fullcalendar.js and i am having problem with the timezone. It is working perfectly well from where i am living but my client who lives in Canada Burlington doesn't get the same date he clicks on. i have set the zone to -05:00(their zone) but doesn't help, is there a way to set the timezone to local? so no matter where you access the full calendar it show.

These dates that are highlited are shown as 6 in Canada, on the same date clicked.

this is the code i'm using to open the modal on dayclick

   dayClick: function(date, jsEvent, view) {
    var click = date._d;
    var month = new Array();
    month[0] = "January";
    month[1] = "February";
    month[2] = "March";
    month[3] = "April";
    month[4] = "May";
    month[5] = "June";
    month[6] = "July";
    month[7] = "August";
    month[8] = "September";
    month[9] = "October";
    month[10] = "November";
    month[11] = "December";
    var weekday = new Array(7);
    weekday[0]=  "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Tuesday";
    weekday[3] = "Wednesday";
    weekday[4] = "Thursday";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";
    $("#myModal").modal("show");

    document.getElementById("date").setAttribute("value", click.getFullYear() +"-"+ ("0"+ (click.getMonth()+1)).slice(-2)+"-"+("0" + click.getDate()).slice(-2));

    document.getElementById("month").setAttribute("value", month[click.getMonth()]);
    document.getElementById("str_day").setAttribute("value", ("0" + click.getDate()).slice(-2));
    document.getElementById("end_day").setAttribute("value", weekday[click.getDay()]);
  },
  eventResize: function(event, delta, revertFunc) {
    console.log(event);
    var title = event.title;
    var end = event.end.format();
    var start = event.start.format();
    $.ajax({
      url: 'fullcalender/process.php',
      data: 'type=resetdate&title='+title+'&start='+start+'&end='+end+'&eventid='+event.id,
      type: 'POST',
      dataType: 'json',
      success: function(response){
        if(response.status != 'success')
          revertFunc();
      },
      error: function(e){
        revertFunc();
        alert('Error processing your request: '+e.responseText);
      }
    });

And this is the code used to add in the database

if($type == 'new')
{
    $startdate = $_POST['startdate'].'+'.$_POST['zone'];
    $title = $_POST['title'];
    $insert = mysqli_query($con,"INSERT INTO calendar(`title`, `startdate`, `enddate`, `allDay`) VALUES('$title','$startdate','$startdate','false')");
    $lastid = mysqli_insert_id($con);
    echo json_encode(array('status'=>'success','eventid'=>$lastid));
}

Check [this SO answer](http://stackoverflow.com/a/439871/2159528) to set a date based on UTC time... If it doesn't fix your problem, you'll have to show some code. — Louys Patrice Bessette, Nov 09 '16 at 17:37

score 1 · Answer 1 · answered Nov 09 '16 at 18:27

1

As far as storing your times, they should be stored as UTC timestamp. For retrieving the timezone I use jstz to get the users timezone, its as simple as these two lines.

var tz = jstz.determine();
var timezone = tz.name();

This will give you a timezone like "America/Chicago" for wherever the user is, this is great because you dont have to ask the user for their timezone and it will work anywhere. Then pass your timezone along with your request for events and you can use your server side language for converting from UTC to the supplied timezone when retrieving events.

events: {
    url: "calendarManager.php?request=get&timezone=" + timezone + "&userid=" + userID
},

You should also use

timezone: "local",

in your calendar configuration and then convert from UTC to the users local timezone when returning events using the method above.

answered Nov 09 '16 at 18:27

Ryan89

1,216
15
20

i have been trying to find this line in fullcalendar.js but am unable to find this :/ – Daniyal Ahmed Nov 09 '16 at 18:30
what line do you mean? The configuration will not be set in fullcalendar.js, you will set it as a configuration option when initialising the calendar. – Ryan89 Nov 09 '16 at 18:33
oh Thanks :) though i have made a temporary solution as the client could see the previous date he clicked on, so i added 1 in the date, but i know that is not the permanent way to do it so wanted to make it permanent :) – Daniyal Ahmed Nov 09 '16 at 18:34

score 0 · Answer 2 · answered Nov 10 '16 at 18:12

0

I actually found the problem after 3 days, The problem was I was using getDate(), using getUTCDat() fixed the problem :)

answered Nov 10 '16 at 18:12

Daniyal Ahmed

63
9

Full Calendar Dates are different in different countries

2 Answers2