CODEWITHSUNDEEP
javascriptjqueryfullcalendarfullcalendar-scheduler
Daniyal Ahmed
Daniyal Ahmed

Reputation: 63

Full Calendar Dates are different in different countries

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.

enter image description here

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

Upvotes: 0

Views: 672

Answers (2)

Daniyal Ahmed
Daniyal Ahmed

Reputation: 63

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

Upvotes: 0

Ryan89
Ryan89

Reputation: 1216

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.

Upvotes: 1

Related Questions